LayoutTests/svg/custom/js-update-pattern.svg

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="450" height="450" xmlns="http://www.w3.org/2000/svg">
<defs>
    <pattern patternUnits="userSpaceOnUse" id="Pattern" x="0" y="0" width="20" height="20">
        <rect x="5" y="5" width="10" height="10" fill="red" />
        <rect id="rect" x="10" y="10" width="10" height="10" fill="green" />
    </pattern>
</defs>

<script>
if (window.layoutTestController)
    layoutTestController.waitUntilDone();

window.setTimeout("clickNow()", 0);

function clickNow() {
    if (window.eventSender) {
        eventSender.mouseMoveTo(150, 50);
        eventSender.mouseDown();
        eventSender.mouseUp();
    }

    if (window.layoutTestController) {
        layoutTestController.notifyDone();
    }
}

function mouseHandler(evt)
{
    var pattern = document.getElementById("Pattern");
    var rect = document.getElementById("rect");

    if(pattern.width.baseVal.value == 20)
    {
        pattern.setAttribute("width", "10");
        rect.setAttribute("x", "0");
    }
    else
    {
        pattern.width.baseVal.value = 20;
        rect.setAttribute("x", "10");
    }
}
</script>

<rect onclick="mouseHandler(evt)" x="10" y="10" width="430" height="80" fill="url(#Pattern)" />
<rect x="10" y="100" width="430" height="80" fill="url(#Pattern)" />

</svg>