perspective-clipped.html | Explore in Territory

<html>
  <!-- This test reproduces a perspective w < 0 error addressed in
       https://bugs.webkit.org/show_bug.cgi?id=79136. In that bug, as a layer is being
       transformed, it may get "clamped" by the homogeneous coordinate w < 0.  When
       projecting individual points, this was handled correctly, but projecting quads was
       ignoring this clamping, causing invalid quads to be generated, which ultimately did
       not hit-test correctly.
    -->
<head>
  <style type="text/css">
    #container {
        -webkit-perspective: 1000px;
        -webkit-perspective-origin-x: 145px;
        /* removing this property fixes the issue, but doesn't provide the desired rendering */
        -webkit-perspective-origin-y: 189px;
    }

    #intermediate {
        position: absolute;
        left: 40px;
        top: 189px;
        -webkit-transform-style: preserve-3d;
    }

    #results {
        position: absolute;
        top: 420px;
        left: 20px;
    }

    #backgroundLayer {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: gray;
    }

    .highlightOnHover:hover {
        background-color: orange;
    }

    .rotatedUp {
        transform: rotateX(-240deg) translateZ(200px)
    }

    .rotatedDown {
        transform: rotateX(-300deg) translateZ(200px)
    }

    .green {
        background-color: green;
    }

    .box {
        position: absolute;
        width: 300px;
        height: 110px;
    }

  </style>
  <script src="resources/hit-test-utils.js"></script>
  <script>
      const hitTestData = [
        // Points near the corners of the top layer
        { 'point': [35, 100], 'target' : 'topLayer' },
        { 'point': [370, 100], 'target' : 'topLayer' },
        { 'point': [40, 40], 'target' : 'topLayer' },
        { 'point': [365, 40], 'target' : 'topLayer' },

        // Points within the axis-aligned bounding box of the top layer, but not actually on the layer itself
        { 'point': [35, 40], 'target' : 'backgroundLayer' },
        { 'point': [370, 40], 'target' : 'backgroundLayer' },

        // Points near the corners of the top layer
        { 'point': [40, 340], 'target' : 'bottomLayer' },
        { 'point': [365, 340], 'target' : 'bottomLayer' },
        { 'point': [35, 260], 'target' : 'bottomLayer' },
        { 'point': [370, 280], 'target' : 'bottomLayer' },

        // Points within the axis-aligned bounding box of the bottom layer, but not actually on the layer itself
        { 'point': [35, 340], 'target' : 'backgroundLayer' },
        { 'point': [371, 340], 'target' : 'backgroundLayer' },
      ];

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

<body>

  <div id="backgroundLayer"></div>

  <div id="container">
    <div id="intermediate" class="host" style="transform: rotate3d(1, 0, 0, 270deg)">
      <div id="topLayer" class="highlightOnHover rotatedUp green box" style=""></div>
      <div id="bottomLayer" class="highlightOnHover rotatedDown green box" style=""></div>
    </div>
  </div>

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

</body>
</html>
chromium/third_party/blink/web_tests/transforms/3d/hit-testing/perspective-clipped.html
