top-layer-stacking-dynamic.html (1415B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="top-layer-stacking-dynamic-ref.html"> 5 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-dialog-element"> 7 <style> 8 dialog { 9 height: 150px; 10 width: 150px; 11 outline: none; 12 } 13 14 ::backdrop { 15 display: none; 16 } 17 18 .red { 19 background-color: red; 20 top: 200px; 21 } 22 23 #bottomDialog { 24 background-color: blue; 25 top: 50px; 26 } 27 28 #topDialog { 29 background-color: green; 30 top: 100px; 31 left: 50px; 32 } 33 </style> 34 </head> 35 <body> 36 This tests top layer element stacking order after dynamically calling show/close and removal from the DOM tree. 37 The test passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles. 38 39 <dialog id="topDialog"></dialog> 40 <dialog id="bottomDialog"></dialog> 41 <dialog id="removedDialog" class="red"> 42 <dialog id="removedDialogChild" class="red"></dialog> 43 </dialog> 44 <script> 45 document.getElementById('topDialog').showModal(); 46 var removedDialog = document.getElementById('removedDialog'); 47 removedDialog.showModal(); 48 document.getElementById('bottomDialog').showModal(); 49 document.getElementById('removedDialogChild').showModal(); 50 removedDialog.parentNode.removeChild(removedDialog); 51 document.getElementById('topDialog').close(); 52 document.getElementById('topDialog').showModal(); 53 </script> 54 </body> 55 </html>