top-layer-display-none.html (1553B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="top-layer-display-none-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 .red { 18 background-color: red; 19 top: 200px; 20 } 21 22 #bottomDialog { 23 background-color: blue; 24 top: 50px; 25 display: none; 26 } 27 28 #topDialog { 29 background-color: green; 30 top: 100px; 31 left: 50px; 32 } 33 </style> 34 </head> 35 <body> 36 This tests that a top layer element is not rendered if it, or an ancestor, has display: none. 37 It passes if you see a green rectangle stacked on top of a blue rectangle, and see no red rectangles. 38 39 <dialog id="hiddenDialog" class="red" style="display: none;"></dialog> 40 <div id="container"> 41 <div> 42 <dialog id="displayNoneChild1" class="red"></dialog> 43 <dialog id="displayNoneChild2" class="red"></dialog> 44 </div> 45 </div> 46 <dialog id="bottomDialog"></dialog> 47 <dialog id="topDialog"></dialog> 48 <script> 49 document.getElementById('hiddenDialog').showModal(); 50 document.getElementById('displayNoneChild1').showModal(); 51 document.getElementById('container').style.display = 'none'; 52 document.getElementById('displayNoneChild2').showModal(); 53 54 // Test that stacking works even if an element is added to the top layer when it has no renderer. 55 document.getElementById('bottomDialog').showModal(); 56 document.getElementById('topDialog').showModal(); 57 document.getElementById('bottomDialog').style.display = 'block'; 58 </script> 59 </body> 60 </html>