LayoutTests/svg/custom/mask-invalidation.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="runRepaintTest()">
<script xlink:href="../../fast/repaint/resources/repaint.js"/>
<script>
function draw(x, y) {
    var maskrect = document.getElementById("maskRect");
    maskrect.setAttribute("transform", "translate(" + x + "," + y + ")");

    var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    rect.setAttribute("x", x);
    rect.setAttribute("y", y);
    rect.setAttribute("width", 453);
    rect.setAttribute("height", 299);
    rect.setAttribute("fill", "green");
    rect.setAttribute("mask", "url(#mask)");

    var root = document.getElementById("root");
    while (root.firstChild) {
        root.removeChild(root.firstChild);
    }
    root.appendChild(rect);
}

function repaintTest() {
    if (window.testRunner)
        testRunner.waitUntilDone();

    draw(150, 50);
    setTimeout(function() {
        draw(50, 50);
        if (window.testRunner)
            testRunner.notifyDone();
    }, 0);
}

</script>
<defs>
<mask id="mask" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
    <rect id="maskRect" x="50" y="50" width="460" height="316" fill="white" />
</mask>
</defs>
<g id="root">
    <rect x="50" y="50" width="453" height="299" fill="green" mask="url(#mask)"/>
</g>
</svg>