backdrop-stacking-order.html (1798B)
1 <!DOCTYPE html> 2 <link rel="match" href="backdrop-stacking-order-ref.html"> 3 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 4 <style> 5 dialog { 6 padding: 0px; 7 border: none; 8 margin: 0px; 9 outline: none; 10 } 11 12 #bottom::backdrop { 13 top: 100px; 14 left: 100px; 15 height: 300px; 16 width: 300px; 17 background-color: rgb(0, 50, 0); 18 z-index: 100; /* z-index has no effect. */ 19 } 20 21 #bottom { 22 top: 125px; 23 left: 125px; 24 height: 250px; 25 width: 250px; 26 background-color: rgb(0, 90, 0); 27 } 28 29 #middle::backdrop { 30 top: 150px; 31 left: 150px; 32 height: 200px; 33 width: 200px; 34 background-color: rgb(0, 130, 0); 35 z-index: -100; /* z-index has no effect. */ 36 } 37 38 #middle { 39 top: 175px; 40 left: 175px; 41 height: 150px; 42 width: 150px; 43 background-color: rgb(0, 170, 0); 44 } 45 46 #top::backdrop { 47 top: 200px; 48 left: 200px; 49 height: 100px; 50 width: 100px; 51 background-color: rgb(0, 210, 0); 52 z-index: 0; /* z-index has no effect. */ 53 } 54 55 #top { 56 top: 225px; 57 left: 225px; 58 height: 50px; 59 width: 50px; 60 background-color: rgb(0, 255, 0); 61 z-index: -1000; /* z-index has no effect. */ 62 } 63 </style> 64 <body> 65 Test for dialog::backdrop stacking order. The test passes if there are 6 66 boxes enclosed in each other, becoming increasingly smaller and brighter 67 green. 68 <dialog id="top"></dialog> 69 <dialog id="middle"></dialog> 70 <dialog id="bottom"></dialog> 71 <script> 72 var topDialog = document.getElementById('top'); 73 var middleDialog = document.getElementById('middle'); 74 var bottomDialog = document.getElementById('bottom'); 75 topDialog.showModal(); 76 bottomDialog.showModal(); 77 topDialog.close(); // Just to shuffle the top layer order around a little. 78 middleDialog.showModal(); 79 topDialog.showModal(); 80 </script> 81 </body>