dialog-cancel-with-input.html (1677B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test dialog modal is closed by escape key with input focused</title> 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-vendor.js"></script> 9 <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534"> 10 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947"> 11 </head> 12 <body> 13 <p>Test dialog modal is closed by escape key with input focused</p> 14 <dialog id="dialog"> 15 <p>Hello World</p> 16 </dialog> 17 18 <dialog id="dialogWithAutofocus"> 19 <input autofocus/> 20 </dialog> 21 22 <script> 23 setup({ single_test: true }); 24 25 const triggerEscKey = () => { 26 test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key 27 }; 28 29 /* Make sure we still cancel the dialog even if the input element is focused */ 30 function runTestCancelWhenInputFocused() { 31 const dialog = document.getElementById("dialogWithAutofocus"); 32 const input = document.querySelector("input"); 33 34 dialog.addEventListener("close", function() { 35 assert_false(dialog.open, "dialog with input autofocused is closed"); 36 done(); 37 }); 38 dialog.showModal(); 39 assert_true(input == document.activeElement, "input element should be focused"); 40 41 triggerEscKey(); 42 } 43 44 const dialog = document.getElementById("dialog"); 45 46 dialog.addEventListener("close", function() { 47 assert_false(dialog.open, "dialog closed"); 48 step_timeout(function() { 49 runTestCancelWhenInputFocused(); 50 }, 0); 51 }); 52 53 dialog.showModal(); 54 triggerEscKey(); 55 </script> 56 </pre> 57 </body> 58 </html>