Add attribute reflection behavior for dialog closedBy [2/N]

This implements reflection of `closedBy` including the "limited to known values" behavior. See spec PR for details: whatwg/html#10737 Bug: 376516550 Change-Id: Iddefd573fe19fd39f4b3aebe13390235fea969b9
web-platform-tests · Nov 5, 2024 · 8d5d767 · 8d5d767
1 parent 1b56d89
commit 8d5d767
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/html/semantics/interactive-elements/the-dialog-element/dialog-closedby.tentative.html b/html/semantics/interactive-elements/the-dialog-element/dialog-closedby.tentative.html
@@ -15,14 +15,14 @@
 <dialog closedby="closerequest" data-behavior="closerequest"></dialog>
 <dialog closedby="none" data-behavior="none"></dialog>
 
-<dialog closedby data-behavior="closerequest"></dialog>
-<dialog closedby="invalid" data-behavior="closerequest"></dialog>
-<dialog data-behavior="closerequest"></dialog>
-
 <dialog closedby="AnY" data-behavior="any"></dialog>
 <dialog closedby="ClOsErEqUeSt" data-behavior="closerequest"></dialog>
 <dialog closedby="NoNe" data-behavior="none"></dialog>
 
+<dialog closedby="invalid" data-behavior="auto"></dialog>
+<dialog closedby data-behavior="auto"></dialog>
+<dialog data-behavior="auto"></dialog>
+
 <script>
   function openDialog(dialog,modal) {
     assert_false(dialog.open);
@@ -41,6 +41,7 @@
         t.add_cleanup(() => dialog.close());
         // Try hitting ESC
         openDialog(dialog,modal);
+        const closedByReflectionWhileOpen = dialog.closedBy;
         const ESC = '\uE00C';
         await new test_driver.send_keys(document.documentElement,ESC);
         const respondsToEsc = !dialog.open;
@@ -51,6 +52,8 @@
         const respondsToLightDismiss = !dialog.open;
         dialog.close();
         // See if expectations match
+        let expectedReflectionWhileOpen = dialog.dataset.behavior;
+        let expectedReflectionWhileClosed = dialog.dataset.behavior;
         switch (dialog.dataset.behavior) {
           case 'any':
             assert_true(respondsToEsc,'Dialog should respond to ESC');
@@ -64,11 +67,24 @@
             assert_false(respondsToEsc,'Dialog should NOT respond to ESC');
             assert_false(respondsToLightDismiss,'Dialog should NOT respond to light dismiss');
             break;
+          case 'auto':
+            if (modal) {
+              assert_true(respondsToEsc,'Modal dialog in auto state should respond to ESC');
+              assert_false(respondsToLightDismiss,'Modal dialog in auto state should NOT respond to light dismiss');
+              expectedReflectionWhileOpen = 'closerequest';
+            } else {
+              assert_false(respondsToEsc,'Non-modal dialog in auto state should NOT respond to ESC');
+              assert_false(respondsToLightDismiss,'Non-modal dialog in auto state should NOT respond to light dismiss');
+              expectedReflectionWhileOpen = 'none';
+            }
+            expectedReflectionWhileClosed = 'none';
+            break;
           default:
             assert_notreached('Invalid expectation');
         }
         // Check reflection
-        assert_equals(dialog.closedBy,dialog.dataset.behavior,'Reflection should be limited to known values');
+        assert_equals(closedByReflectionWhileOpen,expectedReflectionWhileOpen,'Reflection should be limited to known values (open)');
+        assert_equals(dialog.closedBy,expectedReflectionWhileClosed,'Reflection should be limited to known values (closed)');
       }, `closedby=${dialog.getAttribute('closedby')}, ${modal ? 'Modal' : 'Non-modal'}`);
     }
   }

diff --git a/html/semantics/interactive-elements/the-dialog-element/non-modal-canceling.html b/html/semantics/interactive-elements/the-dialog-element/non-modal-canceling.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element">
+<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="/close-watcher/resources/helpers.js"></script>
+
+<dialog>Dialog</dialog>
+
+<script>
+promise_test(async () => {
+  const dialog = document.querySelector('dialog');
+  assert_false(dialog.open);
+  dialog.show();
+  assert_true(dialog.open);
+  await sendEscKey();
+  assert_true(dialog.open,'Escape does not close a non-modal dialog');
+  dialog.close();
+  dialog.showModal();
+  assert_true(dialog.open);
+  await sendEscKey();
+  assert_false(dialog.open,'Escape does close a modal dialog');
+},'Non-modal dialogs should not be cancelable via ESC');
+</script>