<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<mask id="Mask" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="300">
    <rect x="0" y="0" width="800" height="300" fill="red"/>
</mask>

<g onclick="mouseHandler()">
    <rect x="0" y="100" width="800" height="100" fill="blue" mask="url(#Mask)"/>
</g>

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

if (window.eventSender) {
    eventSender.mouseMoveTo(150, 135);
    eventSender.mouseDown();
    eventSender.mouseUp();
}

function mouseHandler(evt)
{
    document.getElementById("Mask").setAttribute("width", "800");

    if (window.testRunner)
        testRunner.notifyDone();
}
</script>

</svg>