| <html xmlns='http://www.w3.org/1999/xhtml'> |
| <head> |
| <style> |
| #svgRoot { |
| margin: 0px; |
| padding: 0px; |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| } |
| |
| #path { |
| fill: green; |
| fill-opacity: 0.1; |
| stroke: green; |
| stroke-opacity: 0.2; |
| } |
| </style> |
| </head> |
| <body> |
| <p>Tests for WK84117 - Make sure hit testing works properly on small paths.</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="translate(100, 100) scale(100, 100)"> |
| <path id="path" d="M 0 0 L 0.4 0 L 0.4 0.4 L 0 0.4 z" stroke-width="0.2" /> |
| </g> |
| </svg> |
| |
| <script><![CDATA[ |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var resultString = ""; |
| var pathElement = document.getElementById("path"); |
| |
| var pointsInPath = [ |
| {x: 106, y: 106}, |
| {x: 124, y: 124}, |
| {x: 121, y: 137} |
| ]; |
| |
| var pointsNotInPath = [ |
| {x: 0, y: 0}, |
| {x: 145, y: 145} |
| ]; |
| |
| var pointsOnPathStroke = [ |
| {x: 122, y: 146}, // outer stroke |
| {x: 124, y: 136} // inner stroke |
| ]; |
| |
| var pointsNotOnPathStroke = [ |
| {x: 160, y: 160}, // outside path |
| {x: 0, y: 0}, // outside path |
| {x: 120, y: 120} // inside path |
| ]; |
| |
| pathElement.style.setProperty("pointer-events", "visibleFill"); // only capture events on the fill |
| pointsInPath.forEach( function(point) { |
| var pass = (pathElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " path contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotInPath.forEach( function(point) { |
| var pass = (pathElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " path does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| |
| pathElement.style.setProperty("pointer-events", "visibleStroke"); // only capture events on the stroke |
| pointsOnPathStroke.forEach( function(point) { |
| var pass = (pathElement == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " path stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnPathStroke.forEach( function(point) { |
| var pass = (pathElement != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " path stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| document.getElementById("console").innerHTML = resultString; |
| ]]></script> |
| </body> |
| </html> |
