<!DOCTYPE html>
<body onload="run();">
<svg width="450" height="250">
    <defs>
        <mask id="m1" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m2a" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m2b" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m3" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect x="0.5" y="0.5" width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m4" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m5" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m6" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m7" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
        <mask id="m8" x="0" y="0" width="1" height="1" maskContentUnits="objectBoundingBox">
            <rect width="0.5" height="0.5" fill="white"/>
        </mask>
    </defs>

    <rect id="r1" x="50" y="50" width="50" height="50"/>
    <rect id="r2" x="150" y="50" width="50" height="50" mask="url(#m2a)"/>
    <rect id="r3" x="250" y="50" width="50" height="50" mask="url(#m3)"/>
    <rect id="r4" x="350" y="50" width="50" height="50" mask="url(#m4)"/>
    <rect id="r5" x="50" y="150" width="50" height="50" mask="url(#m5)"/>
    <rect id="r6" x="150" y="150" width="50" height="50" mask="url(#m6)"/>
    <rect id="r7" x="250" y="150" width="50" height="50" mask="url(#m7)"/>
    <rect id="r8" x="350" y="150" width="50" height="50" mask="url(#m8)"/>
</svg>
<script>
function run() {
    if (window.testRunner) {
        testRunner.waitUntilDone();
        requestAnimationFrame(function() {
            r1.setAttribute("mask", "url(#m1)"); // change from no mask to some mask
            r2.setAttribute("mask", "url(#m2b)"); // change from one mask to another
            r3.removeAttribute("mask"); // change from a mask to no mask
            r4.setAttribute("fill", "blue"); // change style of mask resource client
            r5.setAttribute("height", "75"); // change layout of mask resource client
            m6.setAttribute("x", "0.5"); // change mask attribute
            m7.firstElementChild.setAttribute("fill", "#808080"); // change style of mask contents
            m8.firstElementChild.setAttribute("x", "0.5"); // change layout of mask contents
            testRunner.notifyDone();
        });
    }
}
</script>
