<?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" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="symbol">
        <rect stroke-width="1px" fill="url(#Pattern)" stroke="navy" width="400" height="400"/>
    </symbol>

    <linearGradient id="Gradient" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="60" y2="10">
        <stop id="stop1" stop-color="blue" offset="0"/>
        <stop stop-color="red" offset="1"/>
    </linearGradient>

    <pattern id="Pattern" patternUnits="userSpaceOnUse" viewBox="0 0 60 10" x="0" y="0" width="60" height="10">
        <rect stroke-width="1px" fill="url(#Gradient)" stroke="red" width="60" height="10" transform="scale(2)"/>
    </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 stop = document.getElementById("stop1");

    if(stop.offset.baseVal == 0.3) {
        stop.offset.baseVal = 0;
    } else {
        stop.offset.baseVal = 0.3;
    }
}
</script>

<use onclick="mouseHandler(evt)" x="25" y="25" width="400" height="400" xlink:href="#symbol"/>

</svg>