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

<!DOCTYPE html>
<title>Hit test coplanar 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;
  }

  .test {
    display: inline-block;
    height: 300px;
    width: 300px;
    margin: 20px;
  }

  .container {
    position: relative;
    height: 260px;
    width: 260px;
    margin: 20px;
  }

  .box {
    position: absolute;
    top: 20px;
    left: 30px;
    height: 100px;
    width: 200px;
    transform: translateZ(20px);
  }

  #box1 {
    background-color: #DDD;
  }

  #box2 {
    background-color: #CCC;
  }

  #box3 {
    background-color: #BBB;
    top: 60px;
  }

  #box4 {
    background-color: #AAA;
    top: 100px;
  }
</style>

<body>
  <div class="test">
    <div class="container" id="box1">
      <div class="box" id="box2"></div>
      <div class="box" id="box3"></div>
      <div class="box" id="box4"></div>
    </div>
  </div>
</body>

<script>
  class Point {
    constructor(x, y) {
      this.x = x;
      this.y = y;
    }
  };
  const tests = [{
      expectedElemId: 'box1',
      points: [
        new Point(59, 52),
        new Point(278, 59),
        new Point(58, 260),
        new Point(281, 269),
      ],
    },
    {
      expectedElemId: 'box2',
      points: [
        new Point(82, 68),
        new Point(109, 80),
        new Point(189, 71),
        new Point(268, 98)
      ],
    },
    {
      expectedElemId: 'box3',
      points: [
        new Point(73, 101),
        new Point(128, 136),
        new Point(206, 102),
        new Point(268, 138),
      ]
    },
    {
      expectedElemId: 'box4',
      points: [
        new Point(73, 144),
        new Point(72, 232),
        new Point(265, 146),
        new Point(264, 232),
      ]
    },
  ];

  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>