blob: 48f96c341a5b27e789cee4e76c504fcecec5e55e [file] [log] [blame]
<!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 a green square.</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>