<!DOCTYPE html>
<body onload="run();">
<svg width="450" height="350">
    <defs>
        <pattern id="p1" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p2a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p2b" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p3" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p4" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p5" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p6" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p7" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p8" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p9a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/>
        <pattern id="p9b" xlink:href="#p9a">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
        <pattern id="p10a" x="0" y="0" width="0.5" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/>
        <pattern id="p10b" x="0" y="0" width="0.25" height="0.5" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox"/>
        <pattern id="p10c" xlink:href="#p10a">
            <rect width="0.25" height="0.25"/>
            <rect x="0.25" y="0.25" width="0.25" height="0.25"/>
        </pattern>
    </defs>

    <rect id="r1" x="50" y="50" width="50" height="50"/>
    <rect id="r2" x="150" y="50" width="50" height="50" fill="url(#p2a)"/>
    <rect id="r3" x="250" y="50" width="50" height="50" fill="url(#p3)"/>
    <rect id="r4" x="350" y="50" width="50" height="50" fill="url(#p4)"/>
    <rect id="r5" x="50" y="150" width="50" height="50" fill="url(#p5)"/>
    <rect id="r6" x="150" y="150" width="50" height="50" fill="url(#p6)"/>
    <rect id="r7" x="250" y="150" width="50" height="50" fill="url(#p7)"/>
    <rect id="r8" x="350" y="150" width="50" height="50" fill="url(#p8)"/>
    <rect id="r9" x="50" y="250" width="50" height="50" fill="url(#p9b)"/>
    <rect id="r10" x="150" y="250" width="50" height="50" fill="url(#p10c)"/>
</svg>
<script>
function run() {
    if (window.testRunner) {
        testRunner.waitUntilDone();
        requestAnimationFrame(function() {
            r1.setAttribute("fill", "url(#p1)"); // change from no pattern to some pattern
            r2.setAttribute("fill", "url(#p2b)"); // change from one pattern to another
            r3.removeAttribute("fill"); // change from a pattern to no pattern
            r4.setAttribute("fill-opacity", "0.5"); // change style of pattern resource client
            r5.setAttribute("width", "75"); // change layout of pattern resource client
            p6.setAttribute("width", "0.25"); // change pattern attribute
            p7.firstElementChild.setAttribute("fill", "blue"); // change style of pattern contents
            p8.firstElementChild.setAttribute("width", "0.5"); // change other attribute of pattern contents
            p9a.setAttribute("width", "0.25"); // change attribute on linked pattern
            p10c.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#p10b"); // change xlink:href on pattern
            testRunner.notifyDone();
        });
    }
}
</script>
