top-layer-stacking.tentative.html (2246B)
1 <!DOCTYPE html> 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 4 transforms and z-index are tested inside a top layer element subtree. --> 5 <html> 6 <head> 7 <link rel="match" href="top-layer-stacking-ref.html"> 8 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 9 <style> 10 .box { 11 height:150px; 12 width:150px; 13 } 14 15 ::backdrop { 16 display: none; 17 } 18 19 .container { 20 perspective: 500px; 21 border: 1px solid black; 22 background-color: magenta; 23 } 24 .transformed { 25 transform: rotateY(45deg); 26 background-color: cyan; 27 } 28 </style> 29 </head> 30 <body> 31 <dialog id="hiddenDialog" style="display: none; color: red">This should not be displayed.</dialog> 32 <dialog id="topDialog" style="position: fixed; top: 10px; z-index: -10;"> 33 This white box is the topmost modal dialog. It should be on top of everything. 34 </dialog> 35 <div style="position: absolute; top: 0px; z-index: 3; background-color: red; left: 0; right: 0; height: 200px;"> 36 <dialog id="bottomDialog" style="position: absolute; top: 50px; background-color: green; width: 75%; height: 400px;"> 37 This green box is also a modal dialog. It should be rendered above the red and yellow regions. 38 <div class="container box"> 39 <div class="transformed box">A transform within the dialog's subtree.</div> 40 </div> 41 <div class="box" style="position: absolute; top:300px; z-index: 2; background-color: cyan"> 42 This shows z-index stacking within the dialog's subtree. The cyan box should be on top of the magenta one. 43 </div> 44 <div class="box" style="position: absolute; top:350px; left:50px; z-index: 1; background-color: magenta"></div> 45 <div style="position: fixed; top: 90px; left: 30px; background-color: green">This is part of the green dialog.</div> 46 </dialog> 47 </div> 48 <div style="position: absolute; top: 100px; left: 0px; right: 0px; height: 200em; background-color: yellow; z-index:1000"> 49 </div> 50 <script> 51 document.getElementById('bottomDialog').showModal(); 52 document.getElementById('topDialog').showModal(); 53 document.getElementById('hiddenDialog').showModal(); 54 </script> 55 </body> 56 </html>