coplanar-with-camera.html | Explore in Territory

<html>
  <!-- This test reproduces a divide-by-zero error that is hopefully fixed by
       https://bugs.webkit.org/show_bug.cgi?id=79136. In that bug, a layer that gets
       translated by z so that it is coplanar with the camera origin. As a result, when
       trying to project a point from the container space to the local space, the
       implementation had a divide-by-zero which made hit-testing results incorrect. -->

<head>
  <style type="text/css">
    /* Marquee content. */
    #camera {
        position: absolute;
        top: 100px;
        left: 100px;
        -webkit-perspective: 800px;
    }

    #container {
        -webkit-transform-style: preserve-3d;
        transform: translateZ(800px)
    }

    #layer {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: green;

        /* This should theoretically cancel out the container's transform, and hit-testing should work. */
        transform: translateZ(-800px);
    }

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

    #layer:hover {
        background-color: orange;
    }

    #results {
        position: absolute;
        top: 420px;
        left: 20px;
    }
  </style>

  <script src="resources/hit-test-utils.js"></script>
  <script>
    const hitTestData = [
        { 'point': [98, 200], 'target' : 'background' },
        { 'point': [302, 200], 'target' : 'background' },
        { 'point': [200, 98], 'target' : 'background' },
        { 'point': [200, 302], 'target' : 'background' },
        { 'point': [101, 200], 'target' : 'layer' },
        { 'point': [299, 200], 'target' : 'layer' },
        { 'point': [200, 101], 'target' : 'layer' },
        { 'point': [200, 299], 'target' : 'layer' },
    ];

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

<body>

  <div id="background"></div>

  <div id="camera">
    <div id="container">
      <div id="layer">
        The text on this element should be selectable.
        Hovering on this element should cause a highlight.
      </div>
    </div>
  </div>

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

</body>
</html>
chromium/third_party/blink/web_tests/transforms/3d/hit-testing/coplanar-with-camera.html
