Blitz - WPT: 3d-point-mapping-overlapping.html

wpt / css / css-transforms / 3d-point-mapping-overlapping.html

Data from commit:
1884860 Copy-on-write style attribute blocks that are in the rule tree (#831) (2026-09-02)

Subtest	Status	Message
Hit test overlapping elements, hittesting box1)	PASS
Hit test overlapping elements, hittesting box2)	PASS
Hit test overlapping elements, hittesting box3)	PASS
Hit test overlapping elements, hittesting overlay)	PASS

Enable JavaScript in test iframe

/css/css-transforms/3d-point-mapping-overlapping.html

<!DOCTYPE html>
<title>Hit test overlapping elements</title>
<link rel="help" href="https://drafts.csswg.org/cssom-view/#dom-document-elementfrompoint">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style type="text/css" media="screen">
  body {
    margin: 0;
  }

  #box1 {
    position: absolute;
    height: 300px;
    width: 300px;
    background-color: #DDD;
  }

  #box2 {
    position: absolute;
    top: 50px;
    left: 50px;
    height: 200px;
    width: 200px;
    background-color: #AAA;
    transform: translateZ(50px);
  }

  #box3 {
    position: relative;
    background-color: blue;
    height: 100px;
    width: 100px;
    margin: 50px;
  }

  #overlay {
    position: absolute;
    height: 310px;
    width: 150px;
    background-color: rgba(0, 128, 0, 0.3);
    transform: translateZ(100px);
  }
</style>

<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
    <div id="overlay"></div>
  </div>
</body>

<script>
  class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  };
  const tests = [{
      expectedElemId: 'box1',
      points: [
        new Point(151, 254),
        new Point(152, 47),
        new Point(288, 13),
        new Point(289, 283),
      ]
    },
    {
      expectedElemId: 'box2',
      points: [
        new Point(158, 229),
        new Point(206, 220),
        new Point(223, 158),
        new Point(157, 57),
      ]
    },
    {
      expectedElemId: 'box3',
      points: [
        new Point(157, 191),
        new Point(193, 190),
        new Point(196, 103),
        new Point(152, 108),
      ]
    },
    {
      // Two points over every box.
      expectedElemId: 'overlay',
      points: [
        new Point(132, 178),
        new Point(125, 113),
        new Point(81, 67),
        new Point(92, 223),
        new Point(32, 270),
        new Point(28, 21),
      ]
    }
  ];

  tests.forEach(testcase => {
    test(t => {
      const expectedElem = document.getElementById(testcase.expectedElemId);
      for (const point of testcase.points) {
        const hitElem = document.elementFromPoint(point.x, point.y);
        assert_equals(hitElem, expectedElem,
          `point (${point.x}, ${point.y}) is inside element ${testcase.expectedElemId}`);
      }
    }, `${document.title}, hittesting ${testcase.expectedElemId})`);
  });
</script>

</html>