[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
web-platform-tests · Nov 23, 2021 · 64c677b · 64c677b
1 parent 2c2855c
commit 64c677b
Show file tree

Hide file tree

Showing 2 changed files with 117 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,60 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Interaction of 'inert' attribute with modal dialog</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<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>
+const child = document.getElementById("child");
+const dialog = document.getElementById("dialog");
+const wrapper = document.getElementById("wrapper");
+
+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,57 @@
+<!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:obrufau@igalia.com">
+<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 child = document.getElementById("child");
+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>