Implement dialog.requestClose() [4/N]

This implements dialog.requestClose() and adds a test. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iaac3d89c28844d2b54ff5b1a7b68dc356d1fd172 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5991017 Commit-Queue: Mason Freed <masonf@chromium.org> Reviewed-by: David Baron <dbaron@chromium.org> Auto-Submit: Mason Freed <masonf@chromium.org> Cr-Commit-Position: refs/heads/main@{#1380450}
web-platform-tests · Nov 8, 2024 · 1dcbfc1 · 1dcbfc1
1 parent ecfc62a
commit 1dcbfc1
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.tentative.html b/html/semantics/interactive-elements/the-dialog-element/dialog-requestclose.tentative.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<meta charset="utf-8">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#dom-dialog-request-close">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="../../popovers/resources/popover-utils.js"></script>
+
+<dialog>Dialog</dialog>
+
+<script>
+const dialog = document.querySelector('dialog');
+function openDialog(modal) {
+  assert_false(dialog.open);
+  if (modal) {
+    dialog.showModal();
+  } else {
+    dialog.show();
+  }
+  assert_true(dialog.open);
+  assert_equals(dialog.matches(':modal'),modal);
+}
+function getSignal(t) {
+  const controller = new AbortController();
+  const signal = controller.signal;
+  t.add_cleanup(() => controller.abort());
+  return signal;
+}
+
+// Run this test first, since the user activation from other tests will persist.
+promise_test(async (t) => {
+  t.add_cleanup(() => dialog.close());
+  const signal = getSignal(t);
+  dialog.addEventListener('cancel',(e) => {
+    e.preventDefault();
+  },{signal});
+  openDialog(/*modal*/true);
+  dialog.requestClose();
+  assert_false(dialog.open,'Without user activation, requestClose can\'t be cancelled');
+},`requestClose requires user activation in order to be cancelable`);
+
+[false,true].forEach(modal => {
+  promise_test(async (t) => {
+    t.add_cleanup(() => dialog.close());
+    openDialog(modal);
+    dialog.requestClose();
+    assert_false(dialog.open);
+  },`${modal ? "Modal:" : "Non-modal:"} requestClose closes the dialog`);
+
+  promise_test(async (t) => {
+    t.add_cleanup(() => dialog.close());
+    const signal = getSignal(t);
+    let shouldPreventDefault = true;
+    dialog.addEventListener('cancel',(e) => {
+      if (shouldPreventDefault) {
+        e.preventDefault();
+      }
+    },{signal});
+    openDialog(modal);
+    await clickOn(dialog); // User activation
+    dialog.requestClose();
+    assert_true(dialog.open,'cancel event was cancelled - dialog shouldn\'t close');
+    shouldPreventDefault = false;
+    await clickOn(dialog); // User activation
+    dialog.requestClose();
+    assert_false(dialog.open,'cancel event was not cancelled - dialog should now close');
+  },`${modal ? "Modal:" : "Non-modal:"} requestClose can be cancelled`);
+});
+</script>