svg-isolation-add-clipper-text.html

<!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>

chromium/third_party/blink/web_tests/css3/blending/svg-isolation-add-clipper-text.html