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 |
| 13 ::backdrop { |
| 14 display: none; |
| 15 } |
| 16 |
12 .container { | 17 .container { |
13 -webkit-perspective: 500px; | 18 -webkit-perspective: 500px; |
14 border: 1px solid black; | 19 border: 1px solid black; |
15 background-color: magenta; | 20 background-color: magenta; |
16 } | 21 } |
17 .transformed { | 22 .transformed { |
18 -webkit-transform: rotateY(45deg); | 23 -webkit-transform: rotateY(45deg); |
19 background-color: cyan; | 24 background-color: cyan; |
20 } | 25 } |
21 </style> | 26 </style> |
(...skipping 18 matching lines...) Expand all Loading... |
40 </div> | 45 </div> |
41 <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"> |
42 </div> | 47 </div> |
43 <script> | 48 <script> |
44 document.getElementById('bottomDialog').showModal(); | 49 document.getElementById('bottomDialog').showModal(); |
45 document.getElementById('topDialog').showModal(); | 50 document.getElementById('topDialog').showModal(); |
46 document.getElementById('hiddenDialog').showModal(); | 51 document.getElementById('hiddenDialog').showModal(); |
47 </script> | 52 </script> |
48 </body> | 53 </body> |
49 </html> | 54 </html> |
OLD | NEW |