<!DOCTYPE html>
<body onload="run();">
<svg width="450" height="350">
    <defs>
        <filter id="f1">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f2a">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f2b">
            <feColorMatrix type="hueRotate" values="240"/>
        </filter>
        <filter id="f3">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f4">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f5">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f6">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f7">
            <feFlood flood-color="red"/>
        </filter>
        <filter id="f8">
            <feColorMatrix type="hueRotate" values="120"/>
        </filter>
        <filter id="f9a"/>
        <filter id="f9b" xlink:href="#f9a">
            <feFlood flood-color="blue"/>
        </filter>
        <filter id="f10a"/>
        <filter id="f10b" width="50%"/>
        <filter id="f10c" xlink:href="#f10a">
            <feFlood flood-color="blue"/>
        </filter>
        <filter id="f11">
            <feComponentTransfer>
                <feFuncR type="linear" slope="1" intercept="0"/>
                <feFuncG type="linear" slope="1" intercept="0"/>
                <feFuncB type="linear" slope="1" intercept="0"/>
            </feComponentTransfer>
        </filter>
    </defs>

    <rect id="r1" x="50" y="50" width="50" height="50" fill="purple"/>
    <rect id="r2" x="150" y="50" width="50" height="50" fill="purple" filter="url(#f2a)"/>
    <rect id="r3" x="250" y="50" width="50" height="50" fill="purple" filter="url(#f3)"/>
    <rect id="r4" x="350" y="50" width="50" height="50" fill="purple" filter="url(#f4)"/>
    <rect id="r5" x="50" y="150" width="50" height="50" fill="purple" filter="url(#f5)"/>
    <rect id="r6" x="150" y="150" width="50" height="50" fill="purple" filter="url(#f6)"/>
    <rect id="r7" x="250" y="150" width="50" height="50" fill="purple" filter="url(#f7)"/>
    <rect id="r8" x="350" y="150" width="50" height="50" fill="purple" filter="url(#f8)"/>
    <rect id="r9" x="50" y="250" width="50" height="50" fill="purple" filter="url(#f9b)"/>
    <rect id="r10" x="150" y="250" width="50" height="50" fill="purple" filter="url(#f10c)"/>
    <rect id="r11" x="250" y="250" width="50" height="50" fill="purple" filter="url(#f11)"/>
</svg>
<script>
function run() {
    if (window.testRunner) {
        testRunner.waitUntilDone();
        requestAnimationFrame(function() {
            r1.setAttribute("filter", "url(#f1)"); // change from no filter to some filter
            r2.setAttribute("filter", "url(#f2b)"); // change from one filter to another
            r3.removeAttribute("filter"); // change from a filter to no filter
            r4.setAttribute("fill", "red"); // change style of filter resource client
            r5.setAttribute("width", "75"); // change layout of filter resource client
            f6.setAttribute("x", "50%"); // change filter attribute
            f7.firstElementChild.setAttribute("flood-color", "green"); // change style of filter contents
            f8.firstElementChild.setAttribute("values", "240"); // change other attribute of filter contents
            f9a.setAttribute("x", "50%"); // change linked filter resource attribute
            f10c.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#f10b"); // change xlink:href of filter resource
            f11.querySelector("feFuncR").setAttribute("intercept", "1"); // change filter primitive child attribute
            testRunner.notifyDone();
        });
    }
}
</script>
