removed-element-is-removed-from-top-layer.html (1056B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="match" href="removed-element-is-removed-from-top-layer-ref.html"> 5 <link rel="help" href="https://fullscreen.spec.whatwg.org/#new-stacking-layer"> 6 <style> 7 dialog { 8 height: 100px; 9 width: 100px; 10 } 11 12 ::backdrop { 13 display: none; 14 } 15 16 #bottomDialog { 17 background-color: blue; 18 top: 231px; 19 } 20 21 #topDialog { 22 background-color: green; 23 top: 50px; 24 left: 50px; 25 } 26 </style> 27 </head> 28 <body> 29 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=105489">105489</a>: Elements must be reattached when inserted/removed from top layer 30 <p>The test passes if you see a green rectangle stacked on top of a blue rectangle. 31 <dialog id="bottomDialog"></dialog> 32 <dialog id="topDialog"></dialog> 33 <script> 34 document.getElementById('topDialog').showModal(); 35 var bottomDialog = document.getElementById('bottomDialog'); 36 bottomDialog.showModal(); 37 bottomDialog.offsetTop; // force a layout 38 var parent = bottomDialog.parentNode; 39 parent.removeChild(bottomDialog); 40 parent.appendChild(bottomDialog); 41 </script> 42 </body> 43 </html>