| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" |
| xmlns:h="http://www.w3.org/1999/xhtml"> |
| <title>SVGGeometryElement.prototype.isPointInFill</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__isPointInFill"/> |
| </metadata> |
| <h:script src="/resources/testharness.js"/> |
| <h:script src="/resources/testharnessreport.js"/> |
| |
| <circle id="circle-at-origin" r="10" fill="blue"/> |
| <ellipse id="ellipse" cx="150" cy="150" rx="200" ry="100" |
| fill="blue" fill-opacity="0.1" |
| stroke-width="100" stroke="green" stroke-opacity="0.2"/> |
| <rect id="basic-rectangle" x="90" y="200" width="100" height="100" fill="lightblue"/> |
| <path id="rectangular-outline-evenodd" d="M200,200h100v100h-100z m20,20h60v60h-60z" |
| fill="lightblue" fill-rule="evenodd"/> |
| <path id="rectangular-outline-nonzero" d="M310,200h100v100h-100z m20,20h60v60h-60z" |
| fill="lightblue"/> |
| <clipPath> |
| <path id="rectangular-outline-nonzero-in-clip" d="M200,200h100v100h-100z m20,20h60v60h-60z" |
| fill="lightblue" clip-rule="evenodd"/> |
| </clipPath> |
| |
| <script><![CDATA[ |
| 'use strict'; |
| |
| const pointsToTest = [ |
| { x: 150, y: 150 }, |
| { x: 275, y: 150 }, |
| { x: 250, y: 225 }, |
| { x: 0, y: 0 }, |
| { x: 275, y: 250 }, |
| ]; |
| function testPoints(element) { |
| const expected = [true, true, true, false, false]; |
| pointsToTest.forEach(function(point, index) { |
| assert_equals(element.isPointInFill(point), |
| expected[index], "point at " + point.x + ", " + point.y); |
| }); |
| } |
| function testResultVector(element) { |
| return pointsToTest.map(function(point) { |
| return element.isPointInFill(point); |
| }); |
| } |
| |
| test(function() { |
| let circleAtOrigin = document.getElementById("circle-at-origin"); |
| assert_true(circleAtOrigin.isPointInFill()); |
| let ellipse = document.getElementById("ellipse"); |
| assert_false(ellipse.isPointInFill()); |
| }, document.title + ", no arguments."); |
| |
| test(function() { |
| let circleAtOrigin = document.getElementById("circle-at-origin"); |
| assert_false(circleAtOrigin.isPointInFill({ x: NaN, y: 0 }), "x is NaN"); |
| assert_false(circleAtOrigin.isPointInFill({ x: Infinity, y: 0 }), "x is Infinity"); |
| assert_false(circleAtOrigin.isPointInFill({ x: -Infinity, y: 0 }), "x is -Infinity"); |
| assert_false(circleAtOrigin.isPointInFill({ x: 0, y: NaN }), "y is NaN"); |
| assert_false(circleAtOrigin.isPointInFill({ x: 0, y: Infinity }), "y is Infinity"); |
| assert_false(circleAtOrigin.isPointInFill({ x: 0, y: -Infinity }), "y is -Infinity"); |
| }, document.title + ", non-finite argument."); |
| |
| test(function() { |
| testPoints(document.getElementById("ellipse")); |
| }, document.title + ", functional test."); |
| |
| test(function() { |
| const circleAtOrigin = document.getElementById("circle-at-origin"); |
| assert_true(circleAtOrigin.isPointInFill({ x: 10, y: 0 }), "circle edge 3 o'clock"); |
| assert_true(circleAtOrigin.isPointInFill({ x: 0, y: 10 }), "circle edge 6 o'clock"); |
| const evenOdd = document.getElementById("rectangular-outline-evenodd"); |
| assert_true(evenOdd.isPointInFill({ x: 200, y: 250 }), |
| "rectangular path left outside edge"); |
| assert_true(evenOdd.isPointInFill({ x: 220, y: 250 }), |
| "rectangular path left inside edge"); |
| assert_true(evenOdd.isPointInFill({ x: 250, y: 300 }), |
| "rectangular path bottom outside edge"); |
| assert_true(evenOdd.isPointInFill({ x: 250, y: 280 }), |
| "rectangular path bottom inside edge"); |
| const rectangle = document.getElementById("basic-rectangle"); |
| assert_true(rectangle.isPointInFill({ x: 140, y: 200 }), "rect top edge"); |
| assert_true(rectangle.isPointInFill({ x: 190, y: 250 }), "rect right edge"); |
| assert_true(rectangle.isPointInFill({ x: 140, y: 300 }), "rect bottom edge"); |
| assert_true(rectangle.isPointInFill({ x: 90, y: 250 }), "rect left edge"); |
| }, document.title + ", points on the shape boundary are inside."); |
| |
| test(function() { |
| let evenOdd = document.getElementById("rectangular-outline-evenodd"); |
| assert_false(evenOdd.isPointInFill({ x: 250, y: 250 })); |
| let nonZeroWinding = document.getElementById("rectangular-outline-nonzero"); |
| assert_true(nonZeroWinding.isPointInFill({ x: 360, y: 250 })); |
| }, document.title + ", 'fill-rule'."); |
| |
| 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."); |
| |
| test(function() { |
| let nonZeroWinding = document.getElementById("rectangular-outline-nonzero-in-clip"); |
| assert_true(nonZeroWinding.isPointInFill({ x: 250, y: 250 })); |
| }, document.title + ", 'clip-rule' never overrides 'fill-rule'."); |
| ]]></script> |
| </svg> |