wpt / svg / interact / scripted / rect-hittest-002.html

Status: FAIL | Duration: 75ms | Subtests: 29/53 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (29/53)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
elementFromPoint(...) on <rect>s with simple strokes, element at (30, 12)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (118, 10)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (197, 12)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (201, 28)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (15, 70)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (97, 52)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (149, 49)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (85, 82)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (122, 98)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (154, 75)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (72, 130)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (48, 145)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (31, 279)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (28, 201)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (71, 179)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (43, 244)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (74, 219)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (94, 261)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (126, 231)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (146, 185)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (173, 216)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (225, 258)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (247, 284)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (286, 174)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (254, 120)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (203, 96)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (244, 163)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (300, 37)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (335, 136)PASS
elementFromPoint(...) on <rect>s with simple strokes, element at (60, 20)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (180, 20)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (180, 120)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (60, 120)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (80, 40)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (160, 40)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (160, 100)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (80, 100)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (67, 56)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (146, 27)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (173, 111)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (28, 242)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (51, 182)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (89, 155)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (136, 198)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (177, 270)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (275, 197)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (297, 233)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (235, 47)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (272, 61)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (290, 70)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (233, 140)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (312, 128)FAILcannot convert 'null' or 'undefined' to object
elementFromPoint(...) on <rect>s with simple strokes, element at (330, 150)FAILcannot convert 'null' or 'undefined' to object

/svg/interact/scripted/rect-hittest-002.html

<!DOCTYPE html>
<title>elementFromPoint(...) on &lt;rect>s with simple strokes</title>
<link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/interact.html#hit-testing">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#rect1:hover,
#rect2:hover,
#rect3:hover,
#rect4:hover,
#rect5:hover,
#rect6:hover {
    stroke: #00f;
}
</style>
<svg id="svg" width="420" height="300" version="1.1">
  <rect id="border" x="0.5" y="0.5" width="419" height="299" stroke="#000" stroke-width="1" fill="none"/>

  <rect id="rect1" x="70" y="30" width="100" height="80" stroke="#000" stroke-width="20" fill="none"/>
  <rect id="rect2" x="40" y="150" width="50" height="120" stroke="#000" stroke-width="20" fill="none" transform="rotate(20 65 210)"/>
  <rect id="rect3" x="140" y="200" width="150" height="70" stroke="#000" stroke-width="20" fill="none"/>
  <rect id="rect4" x="220" y="50" width="60" height="10" stroke="#000" stroke-width="20" fill="none"/>
  <rect id="rect5" x="230" y="100" width="10" height="60" stroke="#000" stroke-width="20" fill="none" transform="rotate(-45 235 130)"/>
  <rect id="rect6" x="310" y="130" width="10" height="10" stroke="#000" stroke-width="20" fill="none"/>
</svg>
<script>
// Points are relative to the client rect of the <svg> root.
const tests = [
  { x: 30, y: 12, expectedElemId: "svg" },
  { x: 118, y: 10, expectedElemId: "svg" },
  { x: 197, y: 12, expectedElemId: "svg" },
  { x: 201, y: 28, expectedElemId: "svg" },
  { x: 15, y: 70, expectedElemId: "svg" },
  { x: 97, y: 52, expectedElemId: "svg" },
  { x: 149, y: 49, expectedElemId: "svg" },
  { x: 85, y: 82, expectedElemId: "svg" },
  { x: 122, y: 98, expectedElemId: "svg" },
  { x: 154, y: 75, expectedElemId: "svg" },
  { x: 72, y: 130, expectedElemId: "svg" },
  { x: 48, y: 145, expectedElemId: "svg" },
  { x: 31, y: 279, expectedElemId: "svg" },
  { x: 28, y: 201, expectedElemId: "svg" },
  { x: 71, y: 179, expectedElemId: "svg" },
  { x: 43, y: 244, expectedElemId: "svg" },
  { x: 74, y: 219, expectedElemId: "svg" },
  { x: 94, y: 261, expectedElemId: "svg" },
  { x: 126, y: 231, expectedElemId: "svg" },
  { x: 146, y: 185, expectedElemId: "svg" },
  { x: 173, y: 216, expectedElemId: "svg" },
  { x: 225, y: 258, expectedElemId: "svg" },
  { x: 247, y: 284, expectedElemId: "svg" },
  { x: 286, y: 174, expectedElemId: "svg" },
  { x: 254, y: 120, expectedElemId: "svg" },
  { x: 203, y: 96, expectedElemId: "svg" },
  { x: 244, y: 163, expectedElemId: "svg" },
  { x: 300, y: 37, expectedElemId: "svg" },
  { x: 335, y: 136, expectedElemId: "svg" },

  // Test all four outer corner points of #rect1
  { x: 60, y: 20, expectedElemId: "rect1" },
  { x: 180, y: 20, expectedElemId: "rect1" },
  { x: 180, y: 120, expectedElemId: "rect1" },
  { x: 60, y: 120, expectedElemId: "rect1" },
  // Test all four interior corner points of #rect1
  { x: 80, y: 40, expectedElemId: "rect1" },
  { x: 160, y: 40, expectedElemId: "rect1" },
  { x: 160, y: 100, expectedElemId: "rect1" },
  { x: 80, y: 100, expectedElemId: "rect1" },

  { x: 67, y: 56, expectedElemId: "rect1" },
  { x: 146, y: 27, expectedElemId: "rect1" },
  { x: 173, y: 111, expectedElemId: "rect1" },

  { x: 28, y: 242, expectedElemId: "rect2" },
  { x: 51, y: 182, expectedElemId: "rect2" },
  { x: 89, y: 155, expectedElemId: "rect2" },

  { x: 136, y: 198, expectedElemId: "rect3" },
  { x: 177, y: 270, expectedElemId: "rect3" },
  { x: 275, y: 197, expectedElemId: "rect3" },
  { x: 297, y: 233, expectedElemId: "rect3" },

  { x: 235, y: 47, expectedElemId: "rect4" },
  { x: 272, y: 61, expectedElemId: "rect4" },
  { x: 290, y: 70, expectedElemId: "rect4" },

  { x: 233, y: 140, expectedElemId: "rect5" },

  { x: 312, y: 128, expectedElemId: "rect6" },
  { x: 330, y: 150, expectedElemId: "rect6" }
];

setup(() => {
  const svg = document.getElementById("svg");
  const svgBounds = svg.getBoundingClientRect();
  window.svgOrigin = {
    x: svgBounds.left << 0,
    y: svgBounds.top << 0,
  };
});

tests.forEach(testcase => {
  test(t => {
    const expectedElem = document.getElementById(testcase.expectedElemId);
    const hitElem = document.elementFromPoint(svgOrigin.x + testcase.x, svgOrigin.y + testcase.y);
    assert_equals(hitElem, expectedElem);
  }, `${document.title}, element at (${testcase.x}, ${testcase.y})`);
});
</script>