[inert] Add WPTs for interaction of inert attribute with modal dialog

https://html.spec.whatwg.org/multipage/interaction.html#inert is clear: > While document is so blocked [by a modal dialog], every node that is > connected to document, with the exception of the subject element and > its shadow-including descendants, must be marked inert. (The elements > excepted by this paragraph can additionally be marked inert through > other means; being part of a modal dialog does not "protect" a node > from being marked inert.) However, both Firefox and WebKit ignore this, and let modal dialogs escape the inertness set by an ancestor with the 'inert' attribute. There is also an interesting case: when the modal dialog is the root element. Firefox handles this fine, but Chromium used to fail the test, and WebKit directly crashes. Bug: 692360 Change-Id: Ie52201a1f31790392180c96a9e08be1b5eee86d8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3290703 Commit-Queue: Oriol Brufau <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#945411}
web-platform-tests · Nov 25, 2021 · 92b5595 · 92b5595
1 parent 52dca51
commit 92b5595
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 0 deletions.
diff --git a/inert/inert-with-modal-dialog-001.tentative.html b/inert/inert-with-modal-dialog-001.tentative.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Interaction of 'inert' attribute with modal dialog</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
+<meta name="assert" content="Checks that being part of a modal dialog does not protect a node from being marked inert by an 'inert' attribute.">
+<div id="log"></div>
+<div id="wrapper">
+  wrapper
+  <dialog id="dialog">
+    dialog
+    <span id="child">
+      child
+    </span>
+  </dialog>
+</div>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+setup(() => {
+  dialog.showModal();
+  add_completion_callback(() => {
+    dialog.close();
+    getSelection().removeAllRanges();
+  });
+});
+
+function checkSelection(expectedText) {
+  const selection = getSelection();
+  selection.selectAllChildren(document.documentElement);
+  const actualText = selection.toString().trim();
+  assert_equals(actualText, expectedText);
+}
+
+test(function() {
+  checkSelection("dialog child");
+}, "Modal dialog only marks outside nodes as inert");
+
+test(function() {
+  child.inert = true;
+  this.add_cleanup(() => { child.inert = false; });
+  checkSelection("dialog");
+}, "Inner nodes with 'inert' attribute become inert anyways");
+
+test(function() {
+  dialog.inert = true;
+  this.add_cleanup(() => { dialog.inert = false; });
+  checkSelection("");
+}, "If the modal dialog has the 'inert' attribute, everything becomes inert");
+
+test(function() {
+  wrapper.inert = true;
+  this.add_cleanup(() => { wrapper.inert = false; });
+  checkSelection("");
+}, "If an ancestor of the dialog has the 'inert' attribute, everything becomes inert");
+</script>
diff --git a/inert/inert-with-modal-dialog-002.tentative.html b/inert/inert-with-modal-dialog-002.tentative.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Interaction of 'inert' attribute with modal dialog, when the dialog is the root element</title>
+<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
+<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#inert">
+<meta name="assert" content="Checks that being part of a modal dialog does not protect a node from being marked inert by an 'inert' attribute.">
+<div id="log"></div>
+<dialog id="dialog">
+  dialog
+  <span id="child">
+    child
+  </span>
+</dialog>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+const dialog = document.getElementById("dialog");
+const root = document.documentElement;
+
+setup(() => {
+  root.remove();
+  document.append(dialog);
+  dialog.showModal();
+  add_completion_callback(() => {
+    getSelection().removeAllRanges();
+  });
+});
+
+function checkSelection(expectedText) {
+  const selection = getSelection();
+  selection.selectAllChildren(document.documentElement);
+  const actualText = selection.toString().trim();
+  assert_equals(actualText, expectedText);
+}
+
+test(function() {
+  checkSelection("dialog child");
+}, "Modal dialog only marks outside nodes as inert");
+
+test(function() {
+  child.inert = true;
+  this.add_cleanup(() => { child.inert = false; });
+  checkSelection("dialog");
+}, "Inner nodes with 'inert' attribute become inert anyways");
+
+test(function() {
+  dialog.inert = true;
+  this.add_cleanup(() => { dialog.inert = false; });
+  checkSelection("");
+}, "If the modal dialog has the 'inert' attribute, everything becomes inert");
+
+// Ideally this would happen in a completion callback, but then it would
+// be too late: the results would have been shown inside the dialog.
+dialog.remove();
+document.append(root);
+</script>