<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#roundedRect {
    fill: none;
    stroke: green;
    stroke-width: 20px;
    stroke-linejoin: bevel;
}
rect:hover {
    stroke: red;
}
]]></style>
</defs>

<rect id="fallback" x="30" y="30" width="420" height="320" fill="yellow" onclick="passed()"/>
<rect id="roundedRect" x="40" y="40" rx="30" ry="30" width="400" height="300" pointer-events="visibleStroke" onclick="failed()"/>
<text id="text" x="30" y="370"></text>

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

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

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

function stop() {
    fallback.removeEventListener("mousedown", failed, false);
    roundedRect.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(31, 31);
    eventSender.mouseDown();
}
]]>
</script>

</svg>
</body>
</html>