dialog-popover-closedby-simple.html (5775B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <meta name="timeout" content="long"> 4 <link rel="author" href="mailto:masonf@chromium.org"> 5 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="/resources/testdriver.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <script src="/resources/testdriver-vendor.js"></script> 11 <script src="../../popovers/resources/popover-utils.js"></script> 12 13 <div id=unrelated>Unrelated</div> 14 <dialog id=dialog_outer>Dialog outer 15 <div id=popover_inner popover>Popover inner</div> 16 </dialog> 17 <div id=popover_outer popover>Popover outer 18 <dialog id=dialog_inner>Dialog inner</dialog> 19 </div> 20 21 <style> 22 dialog { top: 50px; bottom: auto; padding:0; } 23 [popover] { top: 100px; bottom: auto; padding:0; } 24 </style> 25 26 <script> 27 function resetDialogOuterTest(dialog,popover) { 28 popover.hidePopover(); 29 dialog.close(); 30 dialog.showModal(); 31 popover.showPopover(); 32 assert_true(dialog.open && popover.matches(':popover-open'),'setup'); 33 } 34 async function runDialogOuterTest(t,dialog,popover) { 35 t.add_cleanup(() => { 36 dialog.removeAttribute('closedby'); 37 popover.hidePopover(); 38 dialog.close(); 39 }); 40 resetDialogOuterTest(dialog,popover); 41 await clickOn(popover); 42 assert_true(popover.matches(':popover-open'), 43 'clicking on popover should always leave everything open'); 44 assert_true(dialog.open,'dialog should stay open'); 45 resetDialogOuterTest(dialog,popover); 46 await clickOn(dialog); 47 assert_false(popover.matches(':popover-open'),'popover should close'); 48 assert_true(dialog.open,'dialog should stay open'); 49 resetDialogOuterTest(dialog,popover); 50 await clickOn(unrelated); 51 assert_false(popover.matches(':popover-open'),'popover should always close'); 52 assert_equals(dialog.open,dialog.closedBy !== 'any', 53 'dialog should close if closedby=any'); 54 resetDialogOuterTest(dialog,popover); 55 const ESC = '\uE00C'; 56 await test_driver.send_keys(document.documentElement,ESC); 57 assert_false(popover.matches(':popover-open'), 58 'popover should close after first ESC'); 59 assert_true(dialog.open,'dialog should stay open for first ESC'); 60 await test_driver.send_keys(document.documentElement,ESC); 61 assert_equals(dialog.open,dialog.closedBy === 'none', 62 'dialog should close on second ESC, if closedby is not none'); 63 } 64 promise_test(async (t) => { 65 dialog_outer.setAttribute('closedby','any'); 66 await runDialogOuterTest(t,dialog_outer,popover_inner); 67 },'Dialog closedby=any parent, popover child'); 68 promise_test(async (t) => { 69 dialog_outer.setAttribute('closedby','closerequest'); 70 await runDialogOuterTest(t,dialog_outer,popover_inner); 71 },'Dialog closedby=closerequest parent, popover child'); 72 promise_test(async (t) => { 73 dialog_outer.setAttribute('closedby','none'); 74 await runDialogOuterTest(t,dialog_outer,popover_inner); 75 },'Dialog closedby=none parent, popover child'); 76 77 78 function resetPopoverOuterTest(dialog,popover) { 79 dialog.close(); 80 popover.hidePopover(); 81 popover.showPopover(); 82 dialog.showModal(); 83 assert_true(dialog.open && popover.matches(':popover-open'),'setup'); 84 } 85 async function runPopoverOuterTest(t,dialog,popover) { 86 t.add_cleanup(() => { 87 dialog.removeAttribute('closedby'); 88 dialog.close(); 89 popover.hidePopover(); 90 }); 91 resetPopoverOuterTest(dialog,popover); 92 await clickOn(dialog); 93 assert_true(dialog.open,'clicking on dialog should always leave everything open'); 94 assert_true(popover.matches(':popover-open'),'popover should stay open'); 95 resetPopoverOuterTest(dialog,popover); 96 await clickOn(popover); 97 assert_equals(dialog.open,dialog.closedBy !== 'any', 98 'dialog should close if closedby=any'); 99 // Note that "clicking on" popover really means clicking on dialog's 100 // ::backdrop, and the dialog is a child of the popover. So by popover's light 101 // dismiss logic, it will *not* close. That's semi-expected here, but not in 102 // the next case. 103 assert_true(popover.matches(':popover-open'),'popover should stay open'); 104 resetPopoverOuterTest(dialog,popover); 105 await clickOn(unrelated); 106 assert_equals(dialog.open,dialog.closedBy !== 'any', 107 'dialog should close if closedby=any'); 108 // See note above. 109 assert_true(popover.matches(':popover-open'),'popover should stay open'); 110 if (!dialog.open) { 111 // If we light dismissed the dialog, check that the popover responds to a 112 // second click. 113 await clickOn(unrelated); 114 assert_false(popover.matches(':popover-open'),'popover should stay open'); 115 } 116 resetPopoverOuterTest(dialog,popover); 117 const ESC = '\uE00C'; 118 await test_driver.send_keys(document.documentElement,ESC); 119 assert_equals(dialog.open,dialog.closedBy === 'none', 120 'dialog should close after first ESC, if closedby!=none'); 121 assert_true(popover.matches(':popover-open'), 122 'popover should stay open for first ESC'); 123 await test_driver.send_keys(document.documentElement,ESC); 124 assert_equals(popover.matches(':popover-open'),dialog.closedBy === 'none', 125 'popover should close on second ESC, unless inner dialog prevents with closedby==none'); 126 } 127 promise_test(async (t) => { 128 dialog_inner.setAttribute('closedby','any'); 129 await runPopoverOuterTest(t,dialog_inner,popover_outer); 130 },'Popover parent, dialog closedby=any child'); 131 promise_test(async (t) => { 132 dialog_inner.setAttribute('closedby','closerequest'); 133 await runPopoverOuterTest(t,dialog_inner,popover_outer); 134 },'Popover parent, dialog closedby=closerequest child'); 135 promise_test(async (t) => { 136 dialog_inner.setAttribute('closedby','none'); 137 await runPopoverOuterTest(t,dialog_inner,popover_outer); 138 },'Popover parent, dialog closedby=none child'); 139 </script>