| <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" |
| xmlns:h="http://www.w3.org/1999/xhtml"> |
| <title>SVGGeometryElement.prototype.isPointInStroke</title> |
| <metadata> |
| <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#InterfaceSVGGeometryElement"/> |
| <h:link rel="help" href="https://svgwg.org/svg2-draft/types.html#__svg__SVGGeometryElement__isPointInStroke"/> |
| </metadata> |
| <h:script src="/resources/testharness.js"/> |
| <h:script src="/resources/testharnessreport.js"/> |
| |
| <circle cx="10" id="circle-with-stroke-intersecting-origin" r="10" |
| fill="none" stroke="blue" stroke-width="10"/> |
| <ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100" |
| fill="blue" fill-opacity="0.1" |
| stroke-width="100" stroke="lightblue" |
| stroke-opacity="0.2"/> |
| <g transform="scale(10)"> |
| <circle id="circle-with-non-scaling-stroke" cx="20" cy="20" r="10" |
| fill="none" stroke-width="1" stroke="blue" |
| vector-effect="non-scaling-stroke"/> |
| </g> |
| <rect id="rect-with-dash-array" width="100" height="100" x="200" y="50" |
| stroke-dasharray="100" stroke="blue" stroke-width="10" fill="none"/> |
| <rect id="rect-with-dash-offset" width="100" height="100" x="200" y="180" |
| stroke-dasharray="100" stroke-dashoffset="100" |
| stroke="blue" stroke-width="10" fill="none"/> |
| <rect id="rect-with-path-length" width="100" height="100" x="200" y="310" |
| stroke-dasharray="100" pathLength="200" |
| stroke="blue" stroke-width="10" fill="none"/> |
| <polygon id="poly-with-miter" points="10,300 110,320 10,340" |
| fill="none" stroke="yellow" stroke-width="10"/> |
| <polygon id="poly-with-miter-limit-10" points="120,300 220,320 120,340" |
| fill="none" stroke="yellow" stroke-width="10" stroke-miterlimit="10"/> |
| <polygon id="poly-with-linejoin-round" points="230,300 330,320 230,340" |
| fill="none" stroke="yellow" stroke-width="10" stroke-linejoin="round" |
| stroke-miterlimit="100"/> |
| <line id="line-with-round-linecap" x1="10" y1="300" x2="20" y2="300" |
| stroke="orange" stroke-width="20" stroke-linecap="round"/> |
| |
| <script><![CDATA[ |
| 'use strict'; |
| |
| setup(function() { |
| window.myPoint = document.documentElement.createSVGPoint(); |
| }); |
| |
| function adaptPoint(point) { |
| myPoint.x = point.x; |
| myPoint.y = point.y; |
| return myPoint; |
| } |
| |
| const pointsToTest = [ |
| { x: 275, y: 250 }, // outer stroke |
| { x: 300, y: 200 }, // inner stroke |
| { x: 375, y: 375 }, // outside ellipse |
| { x: 0, y: 0 }, // outside ellipse |
| { x: 150, y: 150 }, // inside ellipse |
| ]; |
| function testPoints(element) { |
| const expected = [true, true, false, false, false]; |
| pointsToTest.forEach(function(point, index) { |
| assert_equals(element.isPointInStroke(adaptPoint(point)), |
| expected[index], "point at " + point.x + ", " + point.y); |
| }); |
| } |
| function testResultVector(element) { |
| return pointsToTest.map(function(point) { |
| return element.isPointInStroke(adaptPoint(point)); |
| }); |
| } |
| |
| test(function() { |
| let strokeAtOrigin = document.getElementById("circle-with-stroke-intersecting-origin"); |
| assert_true(strokeAtOrigin.isPointInStroke()); |
| let ellipse = document.getElementById("ellipse"); |
| assert_false(ellipse.isPointInStroke()); |
| }, document.title + ", no arguments."); |
| |
| test(function() { |
| let strokeAtOrigin = document.getElementById("circle-with-stroke-intersecting-origin"); |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: NaN, y: 0 }))), "x is NaN"; |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: Infinity, y: 0 })), "x is Infinity"); |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: -Infinity, y: 0 })), "x is -Infinity"); |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: 0, y: NaN })), "y is NaN"); |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: 0, y: Infinity })), "y is Infinity"); |
| assert_false(strokeAtOrigin.isPointInStroke(adaptPoint({ x: 0, y: -Infinity })), "y is -Infinity"); |
| }, document.title + ", non-finite argument."); |
| |
| test(function() { |
| testPoints(document.getElementById("ellipse")); |
| }, document.title + ", functional test."); |
| |
| test(function() { |
| let rectWithDashes = document.getElementById("rect-with-dash-array"); |
| assert_true(rectWithDashes.isPointInStroke(adaptPoint({ x: 250, y: 48 }))); |
| assert_false(rectWithDashes.isPointInStroke(adaptPoint({ x: 302, y: 100 }))); |
| }, document.title + ", 'stroke-dasharray'."); |
| |
| test(function() { |
| let rectWithOffsetDashes = document.getElementById("rect-with-dash-offset"); |
| assert_false(rectWithOffsetDashes.isPointInStroke(adaptPoint({ x: 250, y: 178 }))); |
| assert_true(rectWithOffsetDashes.isPointInStroke(adaptPoint({ x: 302, y: 230 }))); |
| }, document.title + ", 'stroke-dashoffset'."); |
| |
| test(function() { |
| let polyWithMiter = document.getElementById("poly-with-miter"); |
| assert_true(polyWithMiter.isPointInStroke(adaptPoint({ x: 110, y: 320 }))); |
| assert_false(polyWithMiter.isPointInStroke(adaptPoint({ x: 113, y: 320 }))); |
| let polyWithMiterLimit10 = document.getElementById("poly-with-miter-limit-10"); |
| assert_true(polyWithMiterLimit10.isPointInStroke(adaptPoint({ x: 223, y: 320 }))); |
| }, document.title + ", 'stroke-miterlimit'."); |
| |
| test(function() { |
| let polyWithRoundJoin = document.getElementById("poly-with-linejoin-round"); |
| assert_true(polyWithRoundJoin.isPointInStroke(adaptPoint({ x: 334, y: 320 }))); |
| assert_false(polyWithRoundJoin.isPointInStroke(adaptPoint({ x: 336, y: 320 }))); |
| }, document.title + ", 'stroke-linejoin'."); |
| |
| test(function() { |
| let lineWithRoundCap = document.getElementById("line-with-round-linecap"); |
| assert_true(lineWithRoundCap.isPointInStroke(adaptPoint({ x: 25, y: 300 }))); |
| }, document.title + ", 'stroke-linecap'."); |
| |
| test(function() { |
| let rectWithPathLength = document.getElementById("rect-with-path-length"); |
| assert_true(rectWithPathLength.isPointInStroke(adaptPoint({ x: 250, y: 308 }))); |
| assert_false(rectWithPathLength.isPointInStroke(adaptPoint({ x: 250, y: 412 }))); |
| }, document.title + ", 'pathLength'."); |
| |
| test(function() { |
| let circleWithNSS = document.getElementById("circle-with-non-scaling-stroke"); |
| assert_true(circleWithNSS.isPointInStroke(adaptPoint({ x: 9.975, y: 20 }))); |
| assert_false(circleWithNSS.isPointInStroke(adaptPoint({ x: 9.9, y: 20 }))); |
| }, document.title + ", 'vector-effect'."); |
| |
| test(function() { |
| let ellipse = document.getElementById("ellipse"); |
| // Results for 'pointer-events: visiblePainted' and 'visibility: visible'. |
| let expectedResults = testResultVector(ellipse); |
| |
| const pointerEventValues = [ "bounding-box", "visibleFill", |
| "visibleStroke", "visiblePainted", "fill", |
| "stroke", "painted", "visible", "all", |
| "none" ]; |
| |
| ellipse.setAttribute("visibility", "visible"); |
| for (let pointerEventValue of pointerEventValues) { |
| ellipse.setAttribute("pointer-events", pointerEventValue); |
| assert_array_equals(expectedResults, testResultVector(ellipse)); |
| } |
| |
| ellipse.setAttribute("visibility", "hidden"); |
| for (let pointerEventValue of pointerEventValues) { |
| ellipse.setAttribute("pointer-events", pointerEventValue); |
| assert_array_equals(expectedResults, testResultVector(ellipse)); |
| } |
| }, document.title + ", 'visibility' and 'pointer-events' have no effect."); |
| ]]></script> |
| </svg> |