-
Notifications
You must be signed in to change notification settings - Fork 3.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[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}
- Loading branch information
1 parent
52dca51
commit 06916c3
Showing
2 changed files
with
112 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |