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

<!DOCTYPE html>
<title>Hit test overlapping elements</title>
<link rel="help" href="https://svgwg.org/svg2-draft/interact.html#hit-testing">
<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>