| <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> |
