dialog-canceling.html (3487B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=author href="mailto:falken@chromium.org"> 4 <link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element"> 5 <link rel=help href="https://bugs.chromium.org/p/chromium/issues/detail?id=253357"> 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="/common/top-layer.js"></script> 12 <script src="/close-watcher/resources/helpers.js"></script> 13 14 <!-- 15 To test manually, hit Escape once to see the topmost dialog turn green 16 then once again to close it. Repeat for the remaining dialog. 17 --> 18 19 <style> 20 #bottom { 21 top: 100px; 22 left: 100px; 23 height: 300px; 24 width: 300px; 25 margin: 0; 26 background: cyan; 27 } 28 29 #top { 30 top: 150px; 31 left: 150px; 32 height: 200px; 33 width: 200px; 34 margin: 0; 35 background: yellow; 36 } 37 </style> 38 39 <dialog id="bottom"> 40 <span></span> 41 <div>You can't Escape when this textbox has focus: <input id="swallow-input" type="text"></div> 42 <div>You can Escape even if this textbox has focus: <input id="normal-input" type="text"></div> 43 </dialog> 44 <dialog id="top"> 45 <span></span> 46 </dialog> 47 48 <script> 49 function handleCancel(event) { 50 this.style.background = 'green'; 51 this.querySelector('span').textContent = 'I blocked the cancel! Try again to close me.'; 52 event.preventDefault(); 53 this.removeEventListener('cancel', handleCancel); 54 } 55 56 promise_test(async () => { 57 bottomDialog = document.getElementById('bottom'); 58 bottomDialog.addEventListener('cancel', handleCancel); 59 60 topDialog = document.getElementById('top'); 61 topDialog.addEventListener('cancel', handleCancel); 62 63 normalInput = document.getElementById('normal-input'); 64 swallowInput = document.getElementById('swallow-input'); 65 swallowInput.addEventListener('keydown', function(event) { 66 event.preventDefault(); 67 }); 68 69 await test_driver.bless(); 70 bottomDialog.showModal(); 71 await blessTopLayer(bottomDialog); 72 topDialog.showModal(); 73 74 await blessTopLayer(topDialog); 75 await sendEscKey(); 76 assert_true(topDialog.open, 'Top dialog event listener should prevent closing.'); 77 assert_true(bottomDialog.open, 'Top dialog event listener should prevent closing.'); 78 79 await blessTopLayer(topDialog); 80 await sendEscKey(); 81 assert_false(topDialog.open, 'Top dialog should close.'); 82 assert_true(bottomDialog.open, 'Top dialog should close.'); 83 84 swallowInput.focus(); 85 await sendEscKey(); 86 await sendEscKey(); 87 await sendEscKey(); 88 assert_false(topDialog.open, 'Input should swallow Escape mechanism.'); 89 assert_true(bottomDialog.open, 'Input should swallow Escape mechanism.'); 90 91 normalInput.focus(); 92 await sendEscKey(); 93 assert_false(topDialog.open, 'Bottom dialog event listener should prevent closing.'); 94 assert_true(bottomDialog.open, 'Bottom dialog event listener should prevent closing.'); 95 96 await sendEscKey(); 97 assert_false(topDialog.open, 'Bottom dialog should close.'); 98 assert_false(bottomDialog.open, 'Bottom dialog should close.'); 99 100 await sendEscKey(); 101 assert_false(topDialog.open, 'Pressing Escape now should do nothing.'); 102 assert_false(bottomDialog.open, 'Pressing Escape now should do nothing.'); 103 104 bottomDialog.remove(); 105 topDialog.remove(); 106 }, 'Modal dialogs should close when the escape key is pressed.'); 107 108 </script>