| <!DOCTYPE HTML> |
| <html> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| function addIsolation() { |
| var isolator = document.getElementById('isolator'); |
| isolator.setAttribute('clip-path', 'url(#Clipper)'); |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| } |
| window.addEventListener('load', function () { |
| window.setTimeout(addIsolation, 10); |
| }, false); |
| </script> |
| <body> |
| <p>The test passes if you see green text.</p> |
| <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400px" height="60px"> |
| <defs> |
| <clipPath id="Clipper"> |
| <text x="0" y="45" font-size="60" font-weight="bold">Clipping text!</text> |
| </clipPath> |
| </defs> |
| <g id="isolator"> |
| <rect x="0" y="0" width="400" height="60" style="fill: green; mix-blend-mode: difference;"/> |
| </g> |
| </svg> |
| </body> |
| </html> |
