Skip to content

Commit

Permalink
[inert] Add WPTs for interaction of inert attribute with modal dialog
Browse files Browse the repository at this point in the history
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}
  • Loading branch information
Loirooriol authored and chromium-wpt-export-bot committed Nov 25, 2021
1 parent 52dca51 commit 06916c3
Showing 2 changed files with 112 additions and 0 deletions.
56 changes: 56 additions & 0 deletions inert/inert-with-modal-dialog-001.tentative.html
Original file line number Diff line number Diff line change
@@ -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>
56 changes: 56 additions & 0 deletions inert/inert-with-modal-dialog-002.tentative.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit 06916c3

Please sign in to comment.