third_party/blink/web_tests/paint/invalidation/svg/js-late-clipPath-and-object-creation.svg

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Basic//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd">  
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" onload="runRepaintAndPixelTest()">
<script xlink:href="../../../resources/run-after-layout-and-paint.js"/>
<script xlink:href="../resources/text-based-repaint.js"/>
<g id="content" transform="scale(1, 1.5)"/>
<script>
    window.testIsAsync = true;
    function repaintTest() {
        runAfterLayoutAndPaint(createObject);
    }

    var content = document.getElementById("content");

    function createObject()
    {
        var text = document.createElementNS("http://www.w3.org/2000/svg", "text");
        text.setAttribute("font-size", "60");
        text.setAttribute("fill", "navy");
        text.setAttribute("clip-path", "url(#dynClip)");
        text.setAttribute("x", "10");
        text.setAttribute("y", "70");

        text.appendChild(document.createTextNode("Clipped. INVISIBLE."));        
        content.appendChild(text);

        runAfterLayoutAndPaint(createClipPath);
    }

    function createClipPath()
    {
        var clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
        clipPath.setAttribute("id", "dynClip");
        clipPath.setAttribute("clipPathUnits", "userSpaceOnUse");

        var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
        path.setAttribute("d", "M 0 0 l 200 0 l 0 200 l -200 0 Z");

        clipPath.appendChild(path);
        content.appendChild(clipPath);

        finishRepaintTest();
    }
</script>

</svg>