Port dialog cancel event tests to WPT. (#29906)
Differential Revision: https://phabricator.services.mozilla.com/D121762
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1724043
gecko-commit: cfa10a4a1854eef78677915329bd549b02490926
gecko-reviewers: sefeng
Co-authored-by: Tim Nguyen <ntim.bugs@gmail.com>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html
new file mode 100644
index 0000000..7d42dec
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-events.html
@@ -0,0 +1,50 @@
+<!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>
+ <script src="/resources/testdriver-actions.js"></script>
+ <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>
+</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();
+
+ const escKey = "\uE00C";
+ new test_driver.Actions()
+ .keyDown(escKey)
+ .keyUp(escKey)
+ .send();
+</script>
+</body>
+</html>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html
new file mode 100644
index 0000000..a627906
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-preventDefault.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test cancel event with preventDefault on cancel event for dialog element</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>
+ <script src="/resources/testdriver-actions.js"></script>
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event with preventDefault on cancel event for dialog element</p>
+<dialog>
+ <p>Hello World</p>
+</dialog>
+<script>
+ setup({ single_test: true });
+
+ var hasCancelEventFired = false;
+
+ const dialog = document.querySelector("dialog");
+
+ const verify = () => {
+ assert_true(hasCancelEventFired, "cancel is fired");
+ done();
+ };
+
+ dialog.addEventListener("cancel", function(event) {
+ hasCancelEventFired = true;
+ event.preventDefault();
+ step_timeout(function() {
+ verify();
+ }, 0)
+ });
+
+ dialog.addEventListener("close", function() {
+ assert_true(false, "close event should not be fired");
+ });
+
+ dialog.showModal();
+ const escKey = "\uE00C";
+ new test_driver.Actions()
+ .keyDown(escKey)
+ .keyUp(escKey)
+ .send();
+</script>
+</body>
+</html>
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html
new file mode 100644
index 0000000..e6730a7
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-input.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test dialog modal is closed by escape key with input focused</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>
+ <script src="/resources/testdriver-actions.js"></script>
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test dialog modal is closed by escape key with input focused</p>
+<dialog id="dialog">
+ <p>Hello World</p>
+</dialog>
+
+<dialog id="dialogWithAutofocus">
+ <input autofocus/>
+</dialog>
+
+<script>
+ setup({ single_test: true });
+
+ const triggerEscKey = () => {
+ const escKey = "\uE00C";
+ new test_driver.Actions()
+ .keyDown(escKey)
+ .keyUp(escKey)
+ .send();
+ };
+
+ /* Make sure we still cancel the dialog even if the input element is focused */
+ function runTestCancelWhenInputFocused() {
+ const dialog = document.getElementById("dialogWithAutofocus");
+ const input = document.querySelector("input");
+
+ dialog.addEventListener("close", function() {
+ assert_false(dialog.open, "dialog with input autofocused is closed");
+ done();
+ });
+ dialog.showModal();
+ assert_true(input == document.activeElement, "input element should be focused");
+
+ triggerEscKey();
+ }
+
+ const dialog = document.getElementById("dialog");
+
+ dialog.addEventListener("close", function() {
+ assert_false(dialog.open, "dialog closed");
+ step_timeout(function(){
+ runTestCancelWhenInputFocused();
+ }, 0);
+ });
+
+ dialog.showModal();
+ triggerEscKey();
+</script>
+</pre>
+</body>
+</html>
+
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html
new file mode 100644
index 0000000..605f54c
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-cancel-with-select.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test dialog modal is closed by escape key with select focused</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>
+ <script src="/resources/testdriver-actions.js"></script>
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test dialog modal is closed by escape key with select focused</p>
+<dialog id="dialog">
+ <select>
+ <option value="one">one</option>
+ <option value="two">two</option>
+ </select>
+</dialog>
+
+<script>
+ setup({ single_test: true });
+
+ const dialog = document.getElementById("dialog");
+ const select = document.querySelector("select");
+
+ dialog.addEventListener("close", function() {
+ assert_false(dialog.open, "dialog with select is closed");
+ done();
+ });
+ dialog.showModal();
+ assert_true(select == document.activeElement, "select element should be focused");
+
+ const escKey = "\uE00C";
+ new test_driver.Actions()
+ .keyDown(escKey)
+ .keyUp(escKey)
+ .send();
+</script>
+</body>
+</html>
+
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html b/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html
new file mode 100644
index 0000000..9c00d7e
--- /dev/null
+++ b/html/semantics/interactive-elements/the-dialog-element/dialog-keydown-preventDefault.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <title>Test cancel event with preventDefault on keydown event for dialog element</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>
+ <script src="/resources/testdriver-actions.js"></script>
+ <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1322947">
+</head>
+<body>
+<p>Test cancel event with preventDefault on keydown event for dialog element</p>
+<dialog>
+ <p>Hello World</p>
+</dialog>
+<script>
+ setup({ single_test: true });
+
+ var hasCancelEventFired = false;
+
+ const dialog = document.querySelector("dialog");
+
+ const verify = () => {
+ assert_false(hasCancelEventFired, "cancel should not be fired");
+ assert_true(hasKeydownEventFired, "document level keydown event should be fired");
+ done();
+ };
+
+ dialog.addEventListener("cancel", function(event) {
+ hasCancelEventFired = true;
+ });
+
+ document.addEventListener("keydown", function(event) {
+ hasKeydownEventFired = true;
+ event.preventDefault();
+ step_timeout(function() {
+ verify();
+ }, 0);
+ });
+ dialog.showModal();
+ const escKey = "\uE00C";
+ new test_driver.Actions()
+ .keyDown(escKey)
+ .keyUp(escKey)
+ .send();
+</script>
+</body>
+</html>
