| <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.</p> |
| <p>On success, you will see a series of "PASS" messages and no "FAIL" messages.</p> |
| <pre id="console"></pre> |
| |
| <svg onload="runTest()" id="svgRoot" width="400px" height="400px" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> |
| <ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100"/> |
| </svg> |
| |
| <script><![CDATA[ |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| 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 |
| ]; |
| |
| var resultString = ""; |
| |
| function testFill(ellipseElement, pointerEvents, visibility, expectedResultInEllipse, expectedResultNotInEllipse) { |
| var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint(); |
| ellipseElement.setAttribute("visibility", visibility); |
| resultString += "Testing fill with pointer event " + pointerEvents + " and visibility=" + visibility + "\n"; |
| ellipseElement.setAttribute("pointer-events", pointerEvents); |
| var count = 0; |
| pointsInEllipse.forEach( function(point) { |
| mySVGPoint.x = point.x; |
| mySVGPoint.y = point.y; |
| var found = ellipseElement.isPointInFill(mySVGPoint); |
| var pass = found == expectedResultInEllipse[count++]; |
| resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse " + (found ? "contains" : "does not contain") + " point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| count = 0; |
| pointsNotInEllipse.forEach( function(point) { |
| mySVGPoint.x = point.x; |
| mySVGPoint.y = point.y; |
| var found = ellipseElement.isPointInFill(mySVGPoint); |
| var pass = found == expectedResultNotInEllipse[count++]; |
| resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse " + (!found ? "does not contain" : "contains") + " point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| resultString += "\n"; |
| } |
| function testStroke(ellipseElement, pointerEvents, visibility, expectedResultInEllipse, expectedResultNotInEllipse) { |
| var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint(); |
| ellipseElement.setAttribute("visibility", visibility); |
| resultString += "Testing stroke with pointer event " + pointerEvents + " and visibility=" + visibility + "\n"; |
| ellipseElement.setAttribute("pointer-events", pointerEvents); |
| var count = 0; |
| pointsOnEllipseStroke.forEach( function(point) { |
| mySVGPoint.x = point.x; |
| mySVGPoint.y = point.y; |
| var found = ellipseElement.isPointInStroke(mySVGPoint); |
| var pass = found == expectedResultInEllipse[count++]; |
| resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse stroke " + (found ? "contains" : "does not contain") + " point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| count = 0; |
| pointsNotOnEllipseStroke.forEach( function(point) { |
| mySVGPoint.x = point.x; |
| mySVGPoint.y = point.y; |
| var found = ellipseElement.isPointInStroke(mySVGPoint); |
| var pass = found == expectedResultNotInEllipse[count++]; |
| resultString += ((pass) ? "PASS, as expected" : "FAIL") + " ellipse stroke " + (!found ? "does not contain" : "contains") + " point at (" + point.x + ", " + point.y + ")\n"; |
| }); |
| resultString += "\n"; |
| } |
| |
| function runTest() { |
| |
| var ellipseElement = document.getElementById("ellipse"); |
| var mySVGPoint = ellipseElement.ownerSVGElement.createSVGPoint(); |
| |
| resultString += "Testing isPointInFill/isPointInStroke\n"; |
| try { |
| ellipseElement.isPointInFill(); |
| resultString += "isPointInFill() throws no exception\n"; |
| } catch(ex) { |
| resultString += "isPointInFill() throws exception\n"; |
| } |
| try { |
| ellipseElement.isPointInStroke(); |
| resultString += "isPointInStroke() throws no exception\n"; |
| } catch(ex) { |
| resultString += "isPointInStroke() throws exception\n"; |
| } |
| testFill(ellipseElement, "visibleFill", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "visibleStroke", "visible", [false, false, false], [false, false]); |
| testFill(ellipseElement, "visiblePainted", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "fill", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "stroke", "visible", [false, false, false], [false, false]); |
| testFill(ellipseElement, "painted", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "visible", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "all", "visible", [true, true, true], [false, false]); |
| testFill(ellipseElement, "none", "visible", [false, false, false], [false, false]); |
| |
| testFill(ellipseElement, "visibleFill", "hidden", [false, false, false], [false, false]); |
| testFill(ellipseElement, "visibleStroke", "hidden", [false, false, false], [false, false]); |
| testFill(ellipseElement, "visiblePainted", "hidden", [false, false, false], [false, false]); |
| testFill(ellipseElement, "fill", "hidden", [true, true, true], [false, false]); |
| testFill(ellipseElement, "stroke", "hidden", [false, false, false], [false, false]); |
| testFill(ellipseElement, "painted", "hidden", [true, true, true], [false, false]); |
| testFill(ellipseElement, "visible", "hidden", [false, false, false], [false, false]); |
| testFill(ellipseElement, "all", "hidden", [true, true, true], [false, false]); |
| testFill(ellipseElement, "none", "hidden", [false, false, false], [false, false]); |
| |
| |
| testStroke(ellipseElement, "visibleFill", "visible", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "visibleStroke", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "visiblePainted", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "fill", "visible", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "stroke", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "painted", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "visible", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "all", "visible", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "none", "visible", [false, false], [false, false, false]); |
| |
| testStroke(ellipseElement, "visibleFill", "hidden", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "visibleStroke", "hidden", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "visiblePainted", "hidden", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "fill", "hidden", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "stroke", "hidden", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "painted", "hidden", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "visible", "hidden", [false, false], [false, false, false]); |
| testStroke(ellipseElement, "all", "hidden", [true, true], [false, false, false]); |
| testStroke(ellipseElement, "none", "hidden", [false, false], [false, false, false]); |
| |
| document.getElementById("console").innerHTML = resultString; |
| } |
| ]]></script> |
| </body> |
| </html> |
