| <html xmlns='http://www.w3.org/1999/xhtml'> |
| <head> |
| <style> |
| #svgRoot { |
| margin: 0px; |
| padding: 0px; |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| } |
| |
| #ellipse { |
| fill: green; |
| fill-opacity: 0.1; |
| stroke-width: 100px; |
| stroke: green; |
| stroke-opacity: 0.2; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Tests for WK80423 - Make sure hit testing works properly on stroked ellipses with non-scaling stroke.</p> |
| <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p> |
| <pre id="console"></pre> |
| |
| <svg id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> |
| <g transform="scale(2)"> |
| <ellipse id="ellipse" cx="75" cy="75" rx="100" ry="50" vector-effect="non-scaling-stroke"/> |
| </g> |
| </svg> |
| |
| <script><![CDATA[ |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var resultString = ""; |
| var ellipseElement = document.getElementById("ellipse"); |
| |
| var pointsInEllipse = [ |
| {x: 150, y: 150}, |
| {x: 275, y: 150}, |
| {x: 250, y: 225} |
| ]; |
| |
| var pointsNotInEllipse = [ |
| {x: 0, y: 0}, |
| {x: 275, y: 250} |
| ]; |
| |
| var pointsOnEllipseStroke = [ |
| {x: 275, y: 250}, // outer stroke |
| {x: 300, y: 200} // inner stroke |
| ]; |
| |
| var pointsNotOnEllipseStroke = [ |
| {x: 375, y: 375}, // outside ellipse |
| {x: 0, y: 0}, // outside ellipse |
| {x: 150, y: 150} // inside ellipse |
| ]; |
| |
| ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill |
| pointsInEllipse.forEach( function(point) { |
| var pass = (ellipseElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotInEllipse.forEach( function(point) { |
| var pass = (ellipseElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| |
| ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke |
| pointsOnEllipseStroke.forEach( function(point) { |
| var pass = (ellipseElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnEllipseStroke.forEach( function(point) { |
| var pass = (ellipseElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| document.getElementById("console").innerHTML = resultString; |
| ]]></script> |
| </body> |
| </html> |
