Bug 1760192 [wpt PR 33178] - [inert] Set user-select:text on modal di…

…alogs 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 <futhark@chromium.org> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/main@{#981078} -- wpt-commits: 7106c6106d2a78801d4b2fa1aab589322caed7af wpt-pr: 33178
mozilla · Mar 26, 2022 · 20c79db · 20c79db
1 parent 632de3e
commit 20c79db
Showing 1 changed file with 50 additions and 0 deletions.
diff --git a/.../tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html b/.../tests/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<meta charset="utf-8" />
+<title>Content selection in modal dialog</title>
+<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-ui-4/#content-selection">
+<meta name="assert" content="Checks that text can be selected in a modal dialog, except with 'user-select: none'.">
+
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+dialog {
+  font: 10px/1 Ahem;
+  text-align: center;
+}
+</style>
+
+<dialog>123456789A</dialog>
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script>
+const dialog = document.querySelector("dialog");
+dialog.showModal();
+
+function selectSomeText() {
+  // Clear existing selection.
+  getSelection().removeAllRanges();
+
+  // The dialog contains 10 characters. Select the 6 ones at the center.
+  return new test_driver.Actions()
+    .pointerMove(-3e1, 0, {origin: dialog})
+    .pointerDown()
+    .pointerMove(+3e1, 0, {origin: dialog})
+    .pointerUp()
+    .send();
+}
+
+promise_test(async function() {
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "345678");
+}, "By default, text inside a modal dialog can be selected");
+
+promise_test(async function() {
+  dialog.style.userSelect = "none";
+  await selectSomeText();
+  assert_equals(getSelection().toString(), "");
+}, "'user-select: none' prevents text from being selected");
+</script>