| OLD | NEW |
| 1 <html> | 1 <html> |
| 2 <!-- This test reproduces a perspective w < 0 error addressed in | 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 | 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. W
hen | 4 transformed, it may get "clamped" by the homogeneous coordinate w < 0. W
hen |
| 5 projecting individual points, this was handled correctly, but projecting
quads was | 5 projecting individual points, this was handled correctly, but projecting
quads was |
| 6 ignoring this clamping, causing invalid quads to be generated, which ulti
mately did | 6 ignoring this clamping, causing invalid quads to be generated, which ulti
mately did |
| 7 not hit-test correctly. | 7 not hit-test correctly. |
| 8 --> | 8 --> |
| 9 <head> | 9 <head> |
| 10 <style type="text/css"> | 10 <style type="text/css"> |
| (...skipping 22 matching lines...) Expand all Loading... |
| 33 width: 400px; | 33 width: 400px; |
| 34 height: 400px; | 34 height: 400px; |
| 35 background-color: gray; | 35 background-color: gray; |
| 36 } | 36 } |
| 37 | 37 |
| 38 .highlightOnHover:hover { | 38 .highlightOnHover:hover { |
| 39 background-color: orange; | 39 background-color: orange; |
| 40 } | 40 } |
| 41 | 41 |
| 42 .rotatedUp { | 42 .rotatedUp { |
| 43 -webkit-transform: rotateX(-240deg) translateZ(200px) | 43 transform: rotateX(-240deg) translateZ(200px) |
| 44 } | 44 } |
| 45 | 45 |
| 46 .rotatedDown { | 46 .rotatedDown { |
| 47 -webkit-transform: rotateX(-300deg) translateZ(200px) | 47 transform: rotateX(-300deg) translateZ(200px) |
| 48 } | 48 } |
| 49 | 49 |
| 50 .green { | 50 .green { |
| 51 background-color: green; | 51 background-color: green; |
| 52 } | 52 } |
| 53 | 53 |
| 54 .box { | 54 .box { |
| 55 position: absolute; | 55 position: absolute; |
| 56 width: 300px; | 56 width: 300px; |
| 57 height: 110px; | 57 height: 110px; |
| (...skipping 26 matching lines...) Expand all Loading... |
| 84 | 84 |
| 85 window.addEventListener('load', runTest, false); | 85 window.addEventListener('load', runTest, false); |
| 86 </script> | 86 </script> |
| 87 </head> | 87 </head> |
| 88 | 88 |
| 89 <body> | 89 <body> |
| 90 | 90 |
| 91 <div id="backgroundLayer"></div> | 91 <div id="backgroundLayer"></div> |
| 92 | 92 |
| 93 <div id="container"> | 93 <div id="container"> |
| 94 <div id="intermediate" class="host" style="-webkit-transform: rotate3d(1, 0,
0, 270deg)"> | 94 <div id="intermediate" class="host" style="transform: rotate3d(1, 0, 0, 270d
eg)"> |
| 95 <div id="topLayer" class="highlightOnHover rotatedUp green box" style=""><
/div> | 95 <div id="topLayer" class="highlightOnHover rotatedUp green box" style=""><
/div> |
| 96 <div id="bottomLayer" class="highlightOnHover rotatedDown green box" style
=""></div> | 96 <div id="bottomLayer" class="highlightOnHover rotatedDown green box" style
=""></div> |
| 97 </div> | 97 </div> |
| 98 </div> | 98 </div> |
| 99 | 99 |
| 100 <div id="results"></div> | 100 <div id="results"></div> |
| 101 | 101 |
| 102 </body> | 102 </body> |
| 103 </html> | 103 </html> |
| OLD | NEW |