| <html xmlns='http://www.w3.org/1999/xhtml'> |
| <head> |
| <style> |
| #svgRoot { |
| margin: 0px; |
| padding: 0px; |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| } |
| |
| #ellipse, #rect { |
| fill: green; |
| fill-opacity: 0.1; |
| stroke-width: 0.3px; |
| stroke: green; |
| stroke-opacity: 0.2; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Make sure hit testing works properly on stroked ellipses and rects.</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(200)"> |
| <ellipse id="ellipse" cx="0.5" cy="0.5" rx="0.3" ry="0.2"/> |
| <rect id="rect" x="1.1" y="0.9" width="0.5" height="0.5"/> |
| </g> |
| </svg> |
| |
| <script><![CDATA[ |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var resultString = ""; |
| var ellipseElement = document.getElementById("ellipse"); |
| var rectElement = document.getElementById("rect"); |
| |
| var pointsInEllipse = [ |
| {x: 65, y: 81}, |
| {x: 89, y: 100}, |
| {x: 133, y: 128} |
| ]; |
| |
| var pointsNotInEllipse = [ |
| {x: 100, y: 148}, // outer stroke |
| {x: 0, y: 0} |
| ]; |
| |
| var pointsOnEllipseStroke = [ |
| {x: 43, y: 54}, // outer stroke |
| {x: 56, y: 123}, // inner stroke |
| {x: 146, y: 134}, // outer stroke |
| {x: 129, y: 109} // inner stroke |
| ]; |
| |
| var pointsNotOnEllipseStroke = [ |
| {x: 0, y: 100}, // outside ellipse |
| {x: 160, y: 160}, // outside ellipse |
| {x: 95, y: 100} // inside ellipse |
| ]; |
| |
| var pointsInRect = [ |
| {x: 230, y: 190}, |
| {x: 280, y: 245}, |
| {x: 310, y: 275} |
| ]; |
| |
| var pointsNotInRect = [ |
| {x: 337, y: 298}, // outer stroke |
| {x: 0, y: 0} |
| ]; |
| |
| var pointsOnRectStroke = [ |
| {x: 208, y: 168}, // outer stroke |
| {x: 237, y: 198}, // inner stroke |
| {x: 301, y: 305}, // outer stroke |
| {x: 302, y: 264} // inner stroke |
| ]; |
| |
| var pointsNotOnRectStroke = [ |
| {x: 0, y: 100}, // outside rect |
| {x: 375, y: 315}, // outside rect |
| {x: 267, y: 233} // inside rect |
| ]; |
| |
| ellipseElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill |
| rectElement.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"; |
| }); |
| pointsInRect.forEach( function(point) { |
| var pass = (rectElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotInRect.forEach( function(point) { |
| var pass = (rectElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| |
| ellipseElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke |
| rectElement.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"; |
| }); |
| pointsOnRectStroke.forEach( function(point) { |
| var pass = (rectElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnRectStroke.forEach( function(point) { |
| var pass = (rectElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| document.getElementById("console").innerHTML = resultString; |
| ]]></script> |
| </body> |
| </html> |
