<html xmlns='http://www.w3.org/1999/xhtml'>
<body style="margin: 0px; padding: 0px">

<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;">
<defs>

<style type="text/css"><![CDATA[
rect#strokedRect {
    fill: none;
    stroke: blue;
    stroke-width: 20px;
    stroke-linecap: square;
    stroke-miterlimit: 1;
}
rect#strokedRect:hover {
    stroke: red;
}
]]></style>
</defs>

<rect id="fallback" x="0" y="0" width="210" height="210" fill="green" onclick="passed()"/>
<rect id="strokedRect" x="10" y="10" width="190" height="190" pointer-events="visibleStroke" onclick="failed()"/>
<text id="text" x="0" y="230"></text>

<script type="text/ecmascript">
    <![CDATA[

var fallback = document.getElementById("fallback");
var strokedRect = document.getElementById("strokedRect");
var text = document.getElementById("text");

fallback.addEventListener("mousedown", passed, false);
strokedRect.addEventListener("mousedown", failed, false);

function stop() {
    fallback.removeEventListener("mousedown", failed, false);
    strokedRect.removeEventListener("mousedown", passed, false);

if (window.testRunner)
    testRunner.notifyDone();
}

function failed() {
    text.textContent = 'FAILED: strokeRect had pointer';
    stop();
}

function passed() {
    text.textContent = 'PASSED: fallbackRect had pointer';
    stop();
}

if (window.testRunner) {
    testRunner.waitUntilDone();
    testRunner.dumpAsText();
}

if (window.eventSender) {
    eventSender.mouseMoveTo(1, 1);
    eventSender.mouseDown();
}

]]>
</script>
</svg>

</body>
</html>