| <!DOCTYPE HTML> |
| |
| <!-- This file should contain two elements, each containing a cross-faded image between two rectangles, blended with a solid yellow background color. |
| The test passes if you can see two green rectangles drawn on the screen. The test fails if the rectangles are drawn with red. --> |
| |
| <link rel="stylesheet" href="resources/blending-style.css"> |
| <style> |
| div { |
| background-image: -webkit-cross-fade(url('data:image/svg+xml;utf8, \ |
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \ |
| <rect width="100" height="100" fill="%23F00"/> \ |
| </svg>' |
| ), url('data:image/svg+xml;utf8, \ |
| <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"> \ |
| <rect width="100" height="100" fill="%23F00"/> \ |
| </svg>' |
| ), 100%); |
| background-blend-mode: difference, normal |
| } |
| </style> |
| |
| <!-- Test the software path. --> |
| <div class="yellow margin5 box130px"></div> |
| |
| <!-- Test the hardware path. --> |
| <div class="accelerated yellow margin5 box130px"></div> |
