chromium/src/third_party/blink/web_tests/external/wpt/svg/types/scripted/SVGGeometryElement.isPointInFill-01.svg

<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"/>
  <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';

    setup(function() {
      window.myPoint = document.documentElement.createSVGPoint();
    });

    function adaptPoint(point) {
      myPoint.x = point.x;
      myPoint.y = point.y;
      return myPoint;
    }

    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(adaptPoint(point)),
                      expected[index], "point at " + point.x + ", " + point.y);
      });
    }
    function testResultVector(element) {
      return pointsToTest.map(function(point) {
        return element.isPointInFill(adaptPoint(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(adaptPoint({ x: NaN, y: 0 })), "x is NaN");
      assert_false(circleAtOrigin.isPointInFill(adaptPoint({ x: Infinity, y: 0 })), "x is Infinity");
      assert_false(circleAtOrigin.isPointInFill(adaptPoint({ x: -Infinity, y: 0 })), "x is -Infinity");
      assert_false(circleAtOrigin.isPointInFill(adaptPoint({ x: 0, y: NaN })), "y is NaN");
      assert_false(circleAtOrigin.isPointInFill(adaptPoint({ x: 0, y: Infinity })), "y is Infinity");
      assert_false(circleAtOrigin.isPointInFill(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 evenOdd = document.getElementById("rectangular-outline-evenodd");
      assert_false(evenOdd.isPointInFill(adaptPoint({ x: 250, y: 250 })));
      let nonZeroWinding = document.getElementById("rectangular-outline-nonzero");
      assert_true(nonZeroWinding.isPointInFill(adaptPoint({ 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(adaptPoint({ x: 250, y: 250 })));
    }, document.title + ", 'clip-rule' never overrides 'fill-rule'.");
    ]]></script>
</svg>