dialog-closedby-show-stacked.html (4868B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <link rel="author" href="mailto:wpt@keithcirkel.co.uk"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dialog-light-dismiss"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-actions.js"></script> 9 <script src="/resources/testdriver-vendor.js"></script> 10 <script src="../../popovers/resources/popover-utils.js"></script> 11 12 <button id="outside">Outside</button> 13 <dialog id=outer closedby="closerequest"> 14 <dialog id=inner> 15 </dialog> 16 </dialog> 17 18 <script> 19 function awaitEvent(el, type, signal) { 20 const {promise, resolve} = Promise.withResolvers(); 21 el.addEventListener(type, resolve, { once: true, signal }); 22 return promise 23 } 24 25 promise_test(async (t) => { 26 inner.setAttribute('closedby', 'none'); 27 outer.show(); 28 // Need to ensure that CloseWatcher does not collapse 29 // both of these shows into a single CloseWatcher group. 30 await test_driver.bless(); 31 inner.show(); 32 assert_true(inner.open, "The inner dialog is open"); 33 assert_true(outer.open, "The outer dialog is open"); 34 35 let cancelFired = false; 36 inner.addEventListener('cancel', () => cancelFired = true, t.get_signal()); 37 outer.addEventListener('cancel', () => cancelFired = true, t.get_signal()); 38 39 const ESC = '\uE00C'; 40 await test_driver.send_keys(document.documentElement,ESC); 41 42 assert_false(cancelFired, "The cancel event was not fired"); 43 assert_true(inner.open, "The inner dialog is still open"); 44 assert_true(outer.open, "The outer dialog is still open"); 45 },'With an inner closedby=none, the outer & inner dialogs stays open when Esc is pressed'); 46 47 promise_test(async (t) => { 48 inner.setAttribute('closedby', 'none'); 49 outer.show(); 50 // Need to ensure that CloseWatcher does not collapse 51 // both of these shows into a single CloseWatcher group. 52 await test_driver.bless(); 53 inner.show(); 54 assert_true(inner.open, "The inner dialog is open"); 55 assert_true(outer.open, "The outer dialog is open"); 56 57 let cancelFired = false; 58 inner.addEventListener('cancel', () => cancelFired = true, t.get_signal()); 59 outer.addEventListener('cancel', () => cancelFired = true, t.get_signal()); 60 61 // Try clicking outside 62 await clickOn(outside); 63 64 assert_false(cancelFired, "The cancel event was not fired"); 65 assert_true(inner.open, "The inner dialog is open"); 66 assert_true(outer.open, "The outer dialog is open"); 67 },'With an inner closedby=none, the outer & inner dialogs stays open when clicked outside'); 68 69 promise_test(async (t) => { 70 inner.setAttribute('closedby', 'any'); 71 outer.show(); 72 // Need to ensure that CloseWatcher does not collapse 73 // both of these shows into a single CloseWatcher group. 74 await test_driver.bless(); 75 inner.show(); 76 assert_true(inner.open, "The inner dialog is open"); 77 assert_true(outer.open, "The outer dialog is open"); 78 79 let innerCancelled = false; 80 let outerCancelled = false; 81 inner.addEventListener('cancel', () => innerCancelled = true, t.get_signal()); 82 outer.addEventListener('cancel', () => outerCancelled = true, t.get_signal()); 83 84 let innerClosed = awaitEvent(inner, 'close', t.get_signal()); 85 86 // Try clicking outside 87 const ESC = '\uE00C'; 88 await test_driver.send_keys(document.documentElement,ESC); 89 90 await innerClosed; 91 92 assert_false(outerCancelled, "The outer cancel event was not fired"); 93 assert_true(innerCancelled, "The inner cancel event was fired"); 94 95 assert_false(inner.open, "The inner dialog is NOT open"); 96 assert_true(outer.open, "The outer dialog is open"); 97 },'With an inner closedby=any, the outer dialog stays open but the inner dialogs should close, when Esc is pressed'); 98 99 promise_test(async (t) => { 100 inner.setAttribute('closedby', 'any'); 101 outer.show(); 102 // Need to ensure that CloseWatcher does not collapse 103 // both of these shows into a single CloseWatcher group. 104 await test_driver.bless(); 105 inner.show(); 106 assert_true(inner.open, "The inner dialog is open"); 107 assert_true(outer.open, "The outer dialog is open"); 108 109 let innerCancelled = false; 110 let outerCancelled = false; 111 inner.addEventListener('cancel', () => innerCancelled = true, t.get_signal()); 112 outer.addEventListener('cancel', () => outerCancelled = true, t.get_signal()); 113 114 let innerClosed = awaitEvent(inner, 'close', t.get_signal()); 115 116 // Try clicking outside 117 await clickOn(outside); 118 119 await innerClosed; 120 121 assert_false(outerCancelled, "The outer cancel event was not fired"); 122 assert_true(innerCancelled, "The inner cancel event was fired"); 123 124 assert_false(inner.open, "The inner dialog is NOT open"); 125 assert_true(outer.open, "The outer dialog is open"); 126 },'With an inner closedby=any, the outer dialog stays open but the inner dialogs should close, when clicked outside'); 127 </script>