| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Test cancel event is fired when the dialog is closed by user interaction</title> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <link rel="help" href="https://bugs.webkit.org/show_bug.cgi?id=227534"> |
| <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947"> |
| </head> |
| <body> |
| <p>Test cancel event is fired when the dialog is closed by user interaction</p> |
| <dialog> |
| <p>Hello World</p> |
| <button>user activation button</button> |
| </dialog> |
| <script> |
| setup({ single_test: true }); |
| |
| var hasCancelEventFired = false; |
| var hasCloseEventFired = false; |
| |
| const dialog = document.querySelector("dialog"); |
| |
| dialog.addEventListener("cancel", function(event) { |
| assert_true(true, "cancel event is fired"); |
| assert_true(event.cancelable, "cancel event should be cancelable"); |
| assert_false(hasCancelEventFired, "cancel event should only be fired once"); |
| assert_false(hasCloseEventFired, "close event should be fired after cancel event"); |
| hasCancelEventFired = true; |
| }); |
| |
| dialog.addEventListener("close", function() { |
| assert_true(true, "close event is fired"); |
| assert_false(hasCloseEventFired, "close event should only be fired once"); |
| assert_true(hasCancelEventFired, "cancel event should be fired before close event"); |
| hasCloseEventFired = true; |
| done(); |
| }); |
| |
| dialog.showModal(); |
| |
| (async () => { |
| // Pressing escape on the dialog needs user activation or else the cancel event won't be fired. |
| const button = dialog.querySelector('button'); |
| const buttonClickPromise = new Promise(resolve => button.onclick = resolve); |
| await test_driver.click(button); |
| await buttonClickPromise; |
| |
| test_driver.send_keys(document.documentElement, "\uE00C"); // ESC key |
| })(); |
| </script> |
| </body> |
| </html> |
