| <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> |
