popover-overlay.html (2401B)
1 <!doctype html> 2 <title>popover: overlay</title> 3 <link rel="help" href="https://html.spec.whatwg.org/multipage/popover.html#the-popover-attribute"> 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 popover id="popover-show-dialog"></dialog> 8 <dialog popover id="popover-show-modal-dialog"></dialog> 9 <dialog popover id="popover-dialog"></dialog> 10 <div popover id="popover-div"></div> 11 <script> 12 test(() => { 13 const popover_show_dialog = document.getElementById("popover-show-dialog"); 14 assert_equals(getComputedStyle(popover_show_dialog).overlay, "none", 15 "Computed overlay"); 16 popover_show_dialog.show(); 17 assert_equals(getComputedStyle(popover_show_dialog).overlay, "none", 18 "Computed overlay after show()"); 19 popover_show_dialog.close(); 20 }, "dialog.show() should not put popover dialog in top layer"); 21 22 test(() => { 23 const popover_show_modal_dialog = document.getElementById("popover-show-modal-dialog"); 24 assert_equals(getComputedStyle(popover_show_modal_dialog).overlay, "none", 25 "Computed overlay"); 26 popover_show_modal_dialog.showModal(); 27 assert_equals(getComputedStyle(popover_show_modal_dialog).overlay, "auto", 28 "Computed overlay after showModal()"); 29 popover_show_modal_dialog.close(); 30 }, "dialog.showModal() should put popover dialog in top layer"); 31 32 test(() => { 33 const popover_dialog = document.getElementById("popover-dialog"); 34 assert_equals(getComputedStyle(popover_dialog).overlay, "none", 35 "Computed overlay"); 36 popover_dialog.showPopover(); 37 assert_equals(getComputedStyle(popover_dialog).overlay, "auto", 38 "Computed overlay after showPopover()"); 39 popover_dialog.hidePopover(); 40 }, "dialog.showPopover() should put popover dialog in top layer"); 41 42 test(() => { 43 const popover_div = document.getElementById("popover-div"); 44 assert_equals(getComputedStyle(popover_div).overlay, "none", 45 "Computed overlay"); 46 popover_div.showPopover(); 47 assert_equals(getComputedStyle(popover_div).overlay, "auto", 48 "Computed overlay after showPopover()"); 49 popover_div.hidePopover(); 50 }, "div.showPopover() should put popover div in top layer"); 51 </script>