Skip to content

Commit 20c79db

Browse files
Loirooriolmoz-wptsync-bot
authored andcommitted
Bug 1760192 [wpt PR 33178] - [inert] Set user-select:text on modal dialogs and fullscreen elements, a=testonly
Automatic update from web-platform-tests [inert] Set user-select:text on modal dialogs and fullscreen elements Modal dialogs and fullscreen elements mark all elements outside of them as inert. That makes them have a used value of "user-select: none". But modal dialogs and fullscreen elements are not inert, so by default they got "user-select: auto". This resolves to "none" since the used value on the parent element is "none". So modal dialogs and fullscreen elements were not selectable. This patch addresses the problem by setting "user-select: text" on UA origin. There is a somewhat similar precedent where the CSSWG resolved to set "visibility: visible" on modal dialogs: w3c/csswg-drafts#6939 (comment) Bug: 1305797 TEST=external/wpt/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html Change-Id: I6fb00c25559dfefcf931be535ddf4128864c71ae Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3521788 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Oriol Brufau <[email protected]> Cr-Commit-Position: refs/heads/main@{#981078} -- wpt-commits: 7106c6106d2a78801d4b2fa1aab589322caed7af wpt-pr: 33178
1 parent 632de3e commit 20c79db

File tree

1 file changed

+50
-0
lines changed

1 file changed

+50
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8" />
3+
<title>Content selection in modal dialog</title>
4+
<link rel="author" title="Oriol Brufau" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">
6+
<meta name="assert" content="Checks that text can be selected in a modal dialog, except with 'user-select: none'.">
7+
8+
<link rel="stylesheet" href="/fonts/ahem.css">
9+
<style>
10+
dialog {
11+
font: 10px/1 Ahem;
12+
text-align: center;
13+
}
14+
</style>
15+
16+
<dialog>123456789A</dialog>
17+
18+
<script src="/resources/testharness.js"></script>
19+
<script src="/resources/testharnessreport.js"></script>
20+
<script src="/resources/testdriver.js"></script>
21+
<script src="/resources/testdriver-vendor.js"></script>
22+
<script src="/resources/testdriver-actions.js"></script>
23+
<script>
24+
const dialog = document.querySelector("dialog");
25+
dialog.showModal();
26+
27+
function selectSomeText() {
28+
// Clear existing selection.
29+
getSelection().removeAllRanges();
30+
31+
// The dialog contains 10 characters. Select the 6 ones at the center.
32+
return new test_driver.Actions()
33+
.pointerMove(-3e1, 0, {origin: dialog})
34+
.pointerDown()
35+
.pointerMove(+3e1, 0, {origin: dialog})
36+
.pointerUp()
37+
.send();
38+
}
39+
40+
promise_test(async function() {
41+
await selectSomeText();
42+
assert_equals(getSelection().toString(), "345678");
43+
}, "By default, text inside a modal dialog can be selected");
44+
45+
promise_test(async function() {
46+
dialog.style.userSelect = "none";
47+
await selectSomeText();
48+
assert_equals(getSelection().toString(), "");
49+
}, "'user-select: none' prevents text from being selected");
50+
</script>

0 commit comments

Comments
 (0)