<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<style>
#svgRoot {
margin: 0px;
padding: 0px;
position: absolute;
top: 0px;
left: 0px;"
}
#rect {
fill: green;
fill-opacity: 0.1;
}
</style>
</head>
<body>
<p>Test for bug 34714 - onclick is not reliable for transformed SVG elements. This test checks that elementFromPoint() works correctly with an SVG rect element (green) defined within a 1x1 viewbox.</p>
<p>On success, you will see a series of "PASS" messages</p>
<pre id="console"></pre>
<svg id="svgRoot" width="400px" height="400px" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(0.5, 0)">
<rect id="rect" width="1" height="1" transform="translate(-0.499, 0)"/>
</g>
</svg>
<script><![CDATA[
if (window.testRunner) {
testRunner.dumpAsText();
}
var resultString = "";
var rectElt = document.getElementById("rect");
var pointsInRect = [
{x: 1, y: 1}, // fails without the fix
{x: 1, y: 399}, // fails without the fix
{x: 399, y: 1},
{x: 399, y: 399},
{x: 200, y: 200}
];
pointsInRect.forEach( function(point) {
var pass = (rectElt == document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS " : "FAIL ") + " rect contains point @ " + point.x + ", " + point.y + "\n";
});
var pointsNotInRect = [
{x: 1, y: 401},
{x: 401, y: 1},
{x: 401, y: 401},
{x: -1, y: -1},
];
pointsNotInRect.forEach( function(point) {
var pass = (rectElt != document.elementFromPoint(point.x, point.y));
resultString += ((pass) ? "PASS " : "FAIL ") + " rect does not contain point @ " + point.x + ", " + point.y + "\n";
});
document.getElementById("console").innerHTML = resultString;
]]></script>
</body>
</html>