overlapping-layers-hit-test.html | Explore in Territory

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

      .nopreserve {
        top: 0;
        left: 0;
      }

      .preserve {
        top: 250px;
        left: 0;
        transform-style: preserve-3d;
      }

      .box {
        width: 100%;
        position: absolute;
        height: 100%;
        top: 0;
      }

      .red {
        background-color: red;
        transform: perspective( 600px ) rotateY( 45deg );
      }

      .blue {
        background-color: blue;
        transform: perspective( 600px ) rotateY( -45deg );
      }

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

      #description {
        margin-top: 460px;
      }
  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
      const hitTestData = [

        { 'point': [10, 100], 'target' : 'container-nopreserve' },
        { 'point': [20, 100], 'target' : 'target2' },
        { 'point': [80, 100], 'target' : 'target1' },
        { 'point': [100, 100], 'target' : 'target1' },
        { 'point': [120, 100], 'target' : 'target1' },
        { 'point': [180, 100], 'target' : 'target1' },
        { 'point': [190, 100], 'target' : 'container-nopreserve' },

        { 'point': [10, 250], 'target' : 'container-preserve' },
        { 'point': [20, 250], 'target' : 'target4' },
        { 'point': [80, 250], 'target' : 'target4' },
        { 'point': [100, 250], 'target' : 'target4' },
        { 'point': [120, 250], 'target' : 'target3' },
        { 'point': [180, 250], 'target' : 'target3' },
        { 'point': [190, 250], 'target' : 'container-preserve' },

      ];
      window.addEventListener('load', runTest, false);
  </script>
</head>
<body>

  <div id="container-nopreserve" class="container nopreserve">
    <div id="target2" class="box red">
    </div>
    <div id="target1" class="box blue">
    </div>
  </div>

  <div id="container-preserve" class="container preserve">
    <div id="target3" class="box blue">
    </div>
    <div id="target4" class="box red">
    </div>
  </div>

  <p id="description">Checks that hit testing is correct when two layers with negative z-offset overlap</p>

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

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