| <!DOCTYPE html> |
| <title>Test SVG in -webkit-cross-fade image</title> |
| <style> |
| div { |
| display: inline-block; |
| width: 100px; |
| height: 100px; |
| } |
| #tst1 { |
| background-image: -webkit-cross-fade( |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"), |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='red'/></svg>"), |
| 0); |
| } |
| #tst2 { |
| background-image: -webkit-cross-fade( |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='red'/></svg>"), |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"), |
| 1.0); |
| } |
| #tst3 { |
| background-image: -webkit-cross-fade( |
| url("resources/green-10.png"), |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"), |
| 1.0); |
| } |
| #tst4 { |
| background-image: -webkit-cross-fade( |
| url("data:image/svg+xml,<svg viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'><circle cx='5' cy='5' r='2.5' fill='green'/></svg>"), |
| url("resources/green-10.png"), |
| 0.0); |
| } |
| </style> |
| <p>There should be four green circles below. |
| <div id=tst1></div> |
| <div id=tst2></div> |
| <div id=tst3></div> |
| <div id=tst4></div> |
