negative-zoffset-hit-test.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
  <style>
      #container {
        position: absolute;
        height: 200px;
        width:200px;
        top: 0;
        left: 0;
        background-color: gray;
      }

      /* target contain points with negative z-offsets */
      #target {
        position: relative;
        height: 160px;
        width: 160px;
        margin: 20px;
        background-color: #DDD;
        transform: rotate3d(0, 1, 0, -45deg);
        -webkit-transform-origin: right;
      }

      #description {
        margin-top: 210px;
      }

  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
      const hitTestData = [
        { 'point': [50, 50], 'target' : 'container' },
        { 'point': [60, 60], 'target' : 'container' },
        { 'point': [70, 70], 'target' : 'target' },
        { 'point': [80, 80], 'target' : 'target' },
        { 'point': [90, 90], 'target' : 'target' },
        { 'point': [100, 100], 'target' : 'target' },
        { 'point': [150, 150], 'target' : 'target' },
        { 'point': [180, 180], 'target' : 'container' },
      ];
      window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

  <div id="container">
    <div id="target">
    </div>
  </div>

  <p id="description">Checks that hit testing is correct when a transformed element has negative z-offset</p>

  <div id="results"></div>

</body>
</html>
chromium/third_party/blink/web_tests/transforms/3d/hit-testing/negative-zoffset-hit-test.html
