<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';
if (window.testRunner) {
testRunner.waitUntilDone();
testRunner.dumpAsText();
if (window.eventSender) {
eventSender.mouseMoveTo(31, 31);
eventSender.mouseDown();
]]>
</script>
</svg>
</body>
</html>
