top-layer-nesting.html (1500B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="top-layer-nesting-ref.html"> 5 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 6 <style> 7 dialog { 8 height: 150px; 9 width: 150px; 10 outline: none; 11 } 12 13 ::backdrop { 14 display: none; 15 } 16 17 #bottomDialog { 18 background-color: yellow; 19 top: 100px; 20 z-index: 1000; 21 } 22 23 #middleDialog { 24 background-color: blue; 25 top: 150px; 26 left: 50px; 27 z-index: -500; 28 } 29 30 #topDialog { 31 background-color: green; 32 top: 200px; 33 left: 100px; 34 z-index: -1000; 35 } 36 37 .red { 38 background-color: red; 39 top: 250px; 40 left: 0px; 41 } 42 </style> 43 </head> 44 <body> 45 This tests that top layer elements are stacked correctly even if nested in the DOM tree. 46 The test passes if you see no red rectangles and see 3 rectangles stacked in the following order (from bottom to top): yellow, blue, green. 47 48 <dialog id="topDialog"> 49 <dialog id="middleDialog"> 50 <dialog id="bottomDialog"> 51 <dialog id="hiddenDialog" class="red"> 52 <dialog id="hiddenDialogChild" class="red"></dialog> 53 </dialog> 54 </dialog> 55 </dialog> 56 </dialog> 57 <script> 58 document.getElementById('hiddenDialogChild').showModal(); 59 document.getElementById('hiddenDialog').showModal(); 60 document.getElementById('bottomDialog').showModal(); 61 document.getElementById('middleDialog').showModal(); 62 document.getElementById('topDialog').showModal(); 63 document.getElementById('hiddenDialog').close(); 64 </script> 65 </body> 66 </html>