third_party/WebKit/LayoutTests/transforms/3d/hit-testing/perspective-clipped.html

   1 <html>
   2   <!-- This test reproduces a perspective w < 0 error addressed in
   3        https://bugs.webkit.org/show_bug.cgi?id=79136. In that bug, as a layer is being
   4        transformed, it may get "clamped" by the homogeneous coordinate w < 0.  When
   5        projecting individual points, this was handled correctly, but projecting quads was
   6        ignoring this clamping, causing invalid quads to be generated, which ultimately did
   7        not hit-test correctly.
   8     -->
   9 <head>
  10   <style type="text/css">
  11     #container {
  12         -webkit-perspective: 1000px;
  13         -webkit-perspective-origin-x: 145px;
  14         /* removing this property fixes the issue, but doesn't provide the desired rendering */
  15         -webkit-perspective-origin-y: 189px;
  16     }
  17
  18     #intermediate {
  19         position: absolute;
  20         left: 40px;
  21         top: 189px;
  22         -webkit-transform-style: preserve-3d;
  23     }
  24
  25     #results {
  26         position: absolute;
  27         top: 420px;
  28         left: 20px;
  29     }
  30
  31     #backgroundLayer {
  32         position: absolute;
  33         width: 400px;
  34         height: 400px;
  35         background-color: gray;
  36     }
  37
  38     .highlightOnHover:hover {
  39         background-color: orange;
  40     }
  41
  42     .rotatedUp {
  43         transform: rotateX(-240deg) translateZ(200px)
  44     }
  45
  46     .rotatedDown {
  47         transform: rotateX(-300deg) translateZ(200px)
  48     }
  49
  50     .green {
  51         background-color: green;
  52     }
  53
  54     .box {
  55         position: absolute;
  56         width: 300px;
  57         height: 110px;
  58     }
  59
  60   </style>
  61   <script src="resources/hit-test-utils.js"></script>
  62   <script>
  63       const hitTestData = [
  64         // Points near the corners of the top layer
  65         { 'point': [35, 100], 'target' : 'topLayer' },
  66         { 'point': [370, 100], 'target' : 'topLayer' },
  67         { 'point': [40, 40], 'target' : 'topLayer' },
  68         { 'point': [365, 40], 'target' : 'topLayer' },
  69
  70         // Points within the axis-aligned bounding box of the top layer, but not actually on the layer itself
  71         { 'point': [35, 40], 'target' : 'backgroundLayer' },
  72         { 'point': [370, 40], 'target' : 'backgroundLayer' },
  73
  74         // Points near the corners of the top layer
  75         { 'point': [40, 340], 'target' : 'bottomLayer' },
  76         { 'point': [365, 340], 'target' : 'bottomLayer' },
  77         { 'point': [35, 260], 'target' : 'bottomLayer' },
  78         { 'point': [370, 280], 'target' : 'bottomLayer' },
  79
  80         // Points within the axis-aligned bounding box of the bottom layer, but not actually on the layer itself
  81         { 'point': [35, 340], 'target' : 'backgroundLayer' },
  82         { 'point': [371, 340], 'target' : 'backgroundLayer' },
  83       ];
  84
  85       window.addEventListener('load', runTest, false);
  86   </script>
  87 </head>
  88
  89 <body>
  90
  91   <div id="backgroundLayer"></div>
  92
  93   <div id="container">
  94     <div id="intermediate" class="host" style="transform: rotate3d(1, 0, 0, 270deg)">
  95       <div id="topLayer" class="highlightOnHover rotatedUp green box" style=""></div>
  96       <div id="bottomLayer" class="highlightOnHover rotatedDown green box" style=""></div>
  97     </div>
  98   </div>
  99
 100   <div id="results"></div>
 101
 102 </body>
 103 </html>