src/third_party/WebKit/LayoutTests/transforms/3d/hit-testing/coplanar-with-camera.html

   1 <html>
   2   <!-- This test reproduces a divide-by-zero error that is hopefully fixed by
   3        https://bugs.webkit.org/show_bug.cgi?id=79136. In that bug, a layer that gets
   4        translated by z so that it is coplanar with the camera origin. As a result, when
   5        trying to project a point from the container space to the local space, the
   6        implementation had a divide-by-zero which made hit-testing results incorrect. -->
   7
   8 <head>
   9   <style type="text/css">
  10     /* Marquee content. */
  11     #camera {
  12         position: absolute;
  13         top: 100px;
  14         left: 100px;
  15         -webkit-perspective: 800px;
  16     }
  17
  18     #container {
  19         -webkit-transform-style: preserve-3d;
  20         transform: translateZ(800px)
  21     }
  22
  23     #layer {
  24         position: absolute;
  25         width: 200px;
  26         height: 200px;
  27         background-color: green;
  28
  29         /* This should theoretically cancel out the container's transform, and hit-testing should work. */
  30         transform: translateZ(-800px);
  31     }
  32
  33     #background {
  34         position: absolute;
  35         width: 400px;
  36         height: 400px;
  37         background-color: gray;
  38    }
  39
  40     #layer:hover {
  41         background-color: orange;
  42     }
  43
  44     #results {
  45         position: absolute;
  46         top: 420px;
  47         left: 20px;
  48     }
  49   </style>
  50
  51   <script src="resources/hit-test-utils.js"></script>
  52   <script>
  53     const hitTestData = [
  54         { 'point': [98, 200], 'target' : 'background' },
  55         { 'point': [302, 200], 'target' : 'background' },
  56         { 'point': [200, 98], 'target' : 'background' },
  57         { 'point': [200, 302], 'target' : 'background' },
  58         { 'point': [101, 200], 'target' : 'layer' },
  59         { 'point': [299, 200], 'target' : 'layer' },
  60         { 'point': [200, 101], 'target' : 'layer' },
  61         { 'point': [200, 299], 'target' : 'layer' },
  62     ];
  63
  64     window.addEventListener('load', runTest, false);
  65   </script>
  66 </head>
  67
  68 <body>
  69
  70   <div id="background"></div>
  71
  72   <div id="camera">
  73     <div id="container">
  74       <div id="layer">
  75         The text on this element should be selectable.
  76         Hovering on this element should cause a highlight.
  77       </div>
  78     </div>
  79   </div>
  80
  81   <div id="results"></div>
  82
  83 </body>
  84 </html>