chromium/src/third_party/blink/web_tests/paint/invalidation/svg/js-late-mask-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 800 600" onload="runRepaintAndPixelTest()">
<script xlink:href="../../../resources/run-after-layout-and-paint.js"/>
<script xlink:href="../resources/text-based-repaint.js"/>

<g id="content"/>

<script>
    window.testIsAsync = true;
    var content = document.getElementById("content");

    function repaintTest() {
        createObject();
    }

    function createObject()
    {
        var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("width", "800");
        rect.setAttribute("height", "100");
        rect.setAttribute("y", "100");
        rect.setAttribute("fill", "blue");
        rect.setAttribute("mask", "url(#dynMask)");

        content.appendChild(rect);
        runAfterLayoutAndPaint(createMask);
    }

    function createMask()
    {
        var mask = document.createElementNS("http://www.w3.org/2000/svg", "mask");
        mask.setAttribute("id", "dynMask");
        mask.setAttribute("maskUnits", "userSpaceOnUse");
        mask.setAttribute("x", "0");
        mask.setAttribute("y", "0");
        mask.setAttribute("width", "800");
        mask.setAttribute("height", "300");

        var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("width", "800");
        rect.setAttribute("height", "300");
        rect.setAttribute("fill", "red");

        mask.appendChild(rect);
        content.appendChild(mask);

        finishRepaintTest();
    }
</script>

</svg>