| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <!-- This tests that top layer elements are rendered above z-indexed elements | 2 <!-- This tests that top layer elements are rendered above z-indexed elements |
| 3 and stacked in the correct order amongst themselves. Also, layer features like | 3 and stacked in the correct order amongst themselves. Also, layer features like |
| 4 transforms and z-index are tested inside a top layer element subtree. --> | 4 transforms and z-index are tested inside a top layer element subtree. --> |
| 5 <html> | 5 <html> |
| 6 <head> | 6 <head> |
| 7 <style> | 7 <style> |
| 8 .box { | 8 .box { |
| 9 height:150px; | 9 height:150px; |
| 10 width:150px; | 10 width:150px; |
| 11 } | 11 } |
| 12 | 12 |
| 13 ::backdrop { | 13 ::backdrop { |
| 14 display: none; | 14 display: none; |
| 15 } | 15 } |
| 16 | 16 |
| 17 .container { | 17 .container { |
| 18 -webkit-perspective: 500px; | 18 -webkit-perspective: 500px; |
| 19 border: 1px solid black; | 19 border: 1px solid black; |
| 20 background-color: magenta; | 20 background-color: magenta; |
| 21 } | 21 } |
| 22 .transformed { | 22 .transformed { |
| 23 -webkit-transform: rotateY(45deg); | 23 transform: rotateY(45deg); |
| 24 background-color: cyan; | 24 background-color: cyan; |
| 25 } | 25 } |
| 26 </style> | 26 </style> |
| 27 </head> | 27 </head> |
| 28 <body> | 28 <body> |
| 29 <dialog id="hiddenDialog" style="display: none; color: red">This should not be d
isplayed.</dialog> | 29 <dialog id="hiddenDialog" style="display: none; color: red">This should not be d
isplayed.</dialog> |
| 30 <dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;"> | 30 <dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;"> |
| 31 This white box is the topmost modal dialog. It should be on top of everythin
g. | 31 This white box is the topmost modal dialog. It should be on top of everythin
g. |
| 32 </dialog> | 32 </dialog> |
| 33 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; lef
t: 0; right: 0; height: 200px;"> | 33 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; lef
t: 0; right: 0; height: 200px;"> |
| (...skipping 11 matching lines...) Expand all Loading... |
| 45 </div> | 45 </div> |
| 46 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em
; background-color: yellow; z-index:1000"> | 46 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em
; background-color: yellow; z-index:1000"> |
| 47 </div> | 47 </div> |
| 48 <script> | 48 <script> |
| 49 document.getElementById('bottomDialog').showModal(); | 49 document.getElementById('bottomDialog').showModal(); |
| 50 document.getElementById('topDialog').showModal(); | 50 document.getElementById('topDialog').showModal(); |
| 51 document.getElementById('hiddenDialog').showModal(); | 51 document.getElementById('hiddenDialog').showModal(); |
| 52 </script> | 52 </script> |
| 53 </body> | 53 </body> |
| 54 </html> | 54 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 637763002:
Unprefix usage of -webkit-transform in tests (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master