[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}
blueboxd · Mar 15, 2022 · 2f99d43 · 2f99d43
1 parent f913f3a
commit 2f99d43
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 0 deletions.
diff --git a/third_party/blink/renderer/core/css/fullscreen.css b/third_party/blink/renderer/core/css/fullscreen.css
@@ -16,6 +16,7 @@
 
     /* intentionally not !important */
     object-fit: contain;
+    user-select: text;
 }
 
 iframe:fullscreen {

diff --git a/third_party/blink/renderer/core/html/resources/html.css b/third_party/blink/renderer/core/html/resources/html.css
@@ -1388,6 +1388,7 @@ dialog:-internal-modal {
     /* 6px + 2em = border + padding, as by default box-sizing is content-box. */
     max-width: calc(100% - 6px - 2em);
     max-height: calc(100% - 6px - 2em);
+    user-select: text;
 }
 
 /* TODO(foolip): In the Fullscreen spec, there's a ::backdrop block with the

diff --git a/...al/wpt/html/semantics/interactive-elements/the-dialog-element/modal-dialog-selection.html b/...al/wpt/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>