modal-dialog-in-visibility-hidden.html (1290B)
1 <!DOCTYPE html> 2 <html> 3 <title>Test that modal dialogs have visibility: visible set from the UA sheet</title> 4 <meta charset="utf-8"> 5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 6 <link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3:is-modal"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 10 <div style="visibility: hidden"> 11 <dialog>This is a dialog</dialog> 12 </div> 13 14 <script> 15 let dialog = document.querySelector("dialog"); 16 17 test(t => { 18 dialog.show(); 19 t.add_cleanup(() => dialog.close()); 20 assert_equals(getComputedStyle(dialog).visibility, "hidden"); 21 }, "Non-modal dialog should let parent visibility inherit"); 22 23 test(t => { 24 dialog.showModal(); 25 t.add_cleanup(() => dialog.close()); 26 assert_equals(getComputedStyle(dialog).visibility, "visible"); 27 }, "Modal dialog should have visibility: visible by default in UA sheet"); 28 29 test(t => { 30 dialog.style.visibility = "hidden"; 31 dialog.showModal(); 32 t.add_cleanup(() => { 33 dialog.style.removeProperty("visibility"); 34 dialog.close(); 35 }); 36 assert_equals(getComputedStyle(dialog).visibility, "hidden"); 37 }, "Modal dialog visibility should be overridable"); 38 </script> 39 </html>