dialog-close-via-attribute.tentative.html (3211B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://github.com/whatwg/html/issues/5802"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-vendor.js"></script> 8 9 <button>button</button> 10 <dialog> 11 <button>button in dialog</button> 12 </dialog> 13 14 <script> 15 const dialog = document.querySelector('dialog'); 16 const button = document.querySelector('button'); 17 const dialogbutton = document.querySelector('dialog > button'); 18 19 promise_test(async t => { 20 button.focus(); 21 dialog.showModal(); 22 assert_equals(document.activeElement, dialogbutton, 23 '<button> in <dialog> should be focused after opening.'); 24 25 let closeFired = false; 26 let cancelFired = false; 27 dialog.addEventListener('close', () => closeFired = true); 28 dialog.addEventListener('cancel', () => cancelFired = true); 29 30 dialog.removeAttribute('open'); 31 assert_equals(document.activeElement, dialogbutton, 32 '<button> in <dialog> should still be focused immediately after removing open.'); 33 await new Promise(resolve => t.step_timeout(resolve, 0)); 34 await new Promise(requestAnimationFrame); 35 36 assert_not_equals(document.activeElement, button, 37 'Previously focused element should not be focused, even after waiting for a task.'); 38 assert_false(dialog.matches(':modal'), 39 'The dialog should not match :modal after closing.'); 40 assert_false(cancelFired, 41 'The cancel event should not fire when removing the open attribute.'); 42 assert_true(closeFired, 43 'The close event should be fired when removing the open attribute.'); 44 45 let buttonFiredClick = false; 46 button.addEventListener('click', () => buttonFiredClick = true); 47 await test_driver.click(button); 48 assert_true(buttonFiredClick, 49 'The page should not be inert or blocked after removing the open attribute.'); 50 // Clean up 51 dialog.showModal(); 52 dialog.close(); 53 }, 'Removing the open attribute from an open modal dialog should run the closing algorithm.'); 54 55 promise_test(async t => { 56 button.focus(); 57 dialog.show(); 58 assert_equals(document.activeElement, dialogbutton, 59 '<button> in <dialog> should be focused after opening.'); 60 61 let closeFired = false; 62 let cancelFired = false; 63 dialog.addEventListener('close', () => closeFired = true); 64 dialog.addEventListener('cancel', () => cancelFired = true); 65 66 dialog.removeAttribute('open'); 67 assert_equals(document.activeElement, dialogbutton, 68 '<button> in <dialog> should still be focused immediately after removing open.'); 69 await new Promise(resolve => t.step_timeout(resolve, 0)); 70 await new Promise(requestAnimationFrame); 71 72 assert_not_equals(document.activeElement, button, 73 'Previously focused element should not be focused, even after waiting for a task.'); 74 assert_false(cancelFired, 75 'The cancel event should not fire when removing the open attribute.'); 76 assert_true(closeFired, 77 'The close event should be fired when removing the open attribute.'); 78 // Clean up 79 dialog.show(); 80 dialog.close(); 81 }, 'Removing the open attribute from an open non-modal dialog should fire a close event.'); 82 </script>