dialog-overlay.html (1547B)
1 <!doctype html> 2 <title>dialog: overlay</title> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 4 <link rel="help" href="https://drafts.csswg.org/css-position-4/#overlay"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <dialog id="dialog"></dialog> 8 <script> 9 const dialog = document.getElementById("dialog"); 10 11 test(() => { 12 assert_equals(getComputedStyle(dialog).overlay, "none", 13 "Computed overlay"); 14 assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none", 15 "Computed overlay for ::backdrop"); 16 }, "dialog computed overlay initially 'none'"); 17 18 test(() => { 19 dialog.showModal(); 20 21 assert_equals(getComputedStyle(dialog).overlay, "auto", 22 "Computed overlay on open dialog"); 23 // ::backdrop pseudo element is always rendered in the top layer when its 24 // originating element is. It does not get its overlay property changed, 25 // though. 26 assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none", 27 "Computed overlay for ::backdrop"); 28 29 dialog.close(); 30 31 assert_equals(getComputedStyle(dialog).overlay, "none", 32 "Computed overlay on closed dialog"); 33 assert_equals(getComputedStyle(dialog, "::backdrop").overlay, "none", 34 "Computed overlay for ::backdrop"); 35 }, "Opening and closing a modal dialog changes computed overlay to 'auto' and back to 'none'"); 36 </script>