dialog-overlay-re-add-during-transition.html (1072B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>dialog: close and re-add modal dialog during overlay transition</title> 4 <link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel="help" href="https://drafts.csswg.org/css-position-4/#overlay"> 6 <link rel="match" href="pass-dialog-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <dialog id="dialog1">PASS</dialog> 9 <dialog id="dialog2">FAIL</dialog> 10 <style> 11 dialog::backdrop { background-color: black; } 12 #dialog1 { 13 transition-property: overlay, display; 14 transition-duration: 100s; 15 } 16 </style> 17 <script> 18 const dialog1 = document.getElementById("dialog1"); 19 const dialog2 = document.getElementById("dialog2"); 20 21 dialog1.showModal(); 22 dialog2.showModal(); 23 dialog1.close(); 24 requestAnimationFrame(() => 25 requestAnimationFrame(() => { 26 // dialog1 no longer "in top layer" even if rendered in top-layer, should 27 // be added as last top layer element. 28 dialog1.showModal(); 29 takeScreenshot(); 30 }) 31 ); 32 </script>