| <html xmlns='http://www.w3.org/1999/xhtml'> |
| <head> |
| <style type="text/css"> |
| #svgRoot { |
| margin: 0px; |
| padding: 0px; |
| position: absolute; |
| top: 0px; |
| left: 0px; |
| } |
| .nonscaletest { |
| stroke-width: 20px; |
| fill: #ccc; |
| fill-opacity: 0.4; |
| } |
| #ellipse1, #ellipse2 { |
| stroke: #f31900; |
| } |
| #line1, #line2 { |
| stroke: #3364c2; |
| } |
| #rect1, #rect2 { |
| stroke: #f7d72b; |
| } |
| #curve1, #curve2 { |
| stroke: #44c400; |
| } |
| </style> |
| <script type="text/javascript"> |
| function enter(event) { |
| event.target.setAttribute("stroke-opacity", "0.4"); |
| }; |
| function exit(event) { |
| event.target.setAttribute("stroke-opacity", "0.7"); |
| }; |
| </script> |
| </head> |
| <body> |
| <p>Tests for WK82628 - Make sure hit testing works properly on ellipses, rects, lines and curves 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="500px" height="300px" viewBox="0 0 500 300" xmlns="http://www.w3.org/2000/svg"> |
| <!-- The following are all small and scaled up --> |
| <g transform="translate(30, 0) scale(5, 5)"> |
| <ellipse id="ellipse1" class="nonscaletest" cx="10" cy="10" rx="10" ry="5" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <rect id="rect1" class="nonscaletest" x="30" y="10" width="10" height="7" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <path id="line1" class="nonscaletest" d="M20 20 l 10 10z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <g transform="translate(-6, 12)"> |
| <path id="curve1" class="nonscaletest" d="M5,20 C10,10 25,10 25,20 S40,30 40,20" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| </g> |
| </g> |
| <!-- The following are all large and scaled down --> |
| <g transform="translate(275, 0) scale(0.2, 0.2)"> |
| <ellipse id="ellipse2" class="nonscaletest" cx="250" cy="250" rx="250" ry="125" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" class="nonscaletest" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <rect id="rect2" class="nonscaletest" x="750" y="250" width="250" height="175" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <path id="line2" class="nonscaletest" d="M500 500 l 250 250z" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| <g transform="translate(-150, 300)"> |
| <path id="curve2" class="nonscaletest" d="M125,500 C250,250 625,250 600,500 S1000,750 1000,500" vector-effect="non-scaling-stroke" pointer-events="visibleStroke" onmouseover="enter(evt)" onmouseout="exit(evt)" stroke-opacity="0.7" stroke-dasharray="15,25" stroke-linecap="round"/> |
| </g> |
| </g> |
| </svg> |
| <script type="text/javascript"> |
| // document.body.onmousedown = function(evt) { console.log("mouse down at " + evt.x + "," + evt.y); } |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| var resultString = ""; |
| var ellipse1 = document.getElementById("ellipse1"); |
| var ellipse2 = document.getElementById("ellipse2"); // 250px to the right of ellipse1 |
| var pointsOnEllipse1Stroke = [ |
| {x: 29, y: 37}, |
| {x: 34, y: 48}, |
| {x: 94, y: 70}, |
| {x: 100, y: 78} |
| ]; |
| var pointsNotOnEllipse1Stroke = [ |
| {x: 33, y: 18}, |
| {x: 81, y: 49}, |
| {x: 129, y: 78} |
| ]; |
| |
| var rect1 = document.getElementById("rect1"); |
| var rect2 = document.getElementById("rect2"); // 250px to the right of rect1 |
| var pointsOnRect1Stroke = [ |
| {x: 172, y: 45}, |
| {x: 183, y: 63}, |
| {x: 220, y: 82}, |
| {x: 233, y: 90} |
| ]; |
| var pointsNotOnRect1Stroke = [ |
| {x: 205, y: 68} |
| ]; |
| |
| var line1 = document.getElementById("line1"); |
| var line2 = document.getElementById("line2"); // 250px to the right of line1 |
| var pointsOnLine1Stroke = [ |
| {x: 127, y: 97}, |
| {x: 174, y: 146} |
| ]; |
| var pointsNotOnLine1Stroke = [ |
| {x: 138, y: 131}, |
| {x: 177, y: 126} |
| ]; |
| |
| var curve1 = document.getElementById("curve1"); |
| var curve2 = document.getElementById("curve2"); // 250px to the right of curve1 |
| var pointsOnCurve1Stroke = [ |
| {x: 24, y: 159}, |
| {x: 107, y: 126}, |
| {x: 169, y: 193}, |
| {x: 195, y: 159} |
| ]; |
| var pointsNotOnCurve1Stroke = [ |
| {x: 5, y: 164}, |
| {x: 81, y: 140}, |
| {x: 161, y: 177} |
| ]; |
| |
| pointsOnEllipse1Stroke.forEach( function(point) { |
| var pass = (ellipse1 == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (ellipse2 == document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnEllipse1Stroke.forEach( function(point) { |
| var pass = (ellipse1 != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (ellipse2 != document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " ellipse2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| |
| pointsOnRect1Stroke.forEach( function(point) { |
| var pass = (rect1 == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (rect2 == document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnRect1Stroke.forEach( function(point) { |
| var pass = (rect1 != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (rect2 != document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " rect2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| |
| pointsOnLine1Stroke.forEach( function(point) { |
| var pass = (line1 == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (line2 == document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnLine1Stroke.forEach( function(point) { |
| var pass = (line1 != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " line1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (line2 != document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " line2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| |
| pointsOnCurve1Stroke.forEach( function(point) { |
| var pass = (curve1 == document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke contains point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (curve2 == document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke contains point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| pointsNotOnCurve1Stroke.forEach( function(point) { |
| var pass = (curve1 != document.elementFromPoint(point.x, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " curve1 stroke does not contain point at (" + point.x + ", " + point.y + ")\n"; |
| var pass = (curve2 != document.elementFromPoint(point.x + 250, point.y)); |
| resultString += ((pass) ? "PASS" : "FAIL") + " curve2 stroke does not contain point at (" + (point.x+250) + ", " + point.y + ")\n"; |
| }); |
| |
| document.getElementById("console").innerHTML = resultString; |
| </script> |
| </body> |
| </html> |
