Text Selection on flex and grid box items does not work as expected

Text Selection on flex and grid box items does not work as expected https://bugs.webkit.org/show_bug.cgi?id=119878 Reviewed by Alan Bujtas. Merge & Extend for Grid - https://src.chromium.org/viewvc/blink?view=revision&revision=171810 Webkit paints "selection gaps" that extend the selection to the bounds of the selection root. If the selection spans two flex or grid items, and the selection root is the RenderBody, the selection gap for the first item is painted on top of the second item, obscuring its text. By making each flex or grid item a selection root, the selection gap is painted only up to the bounds of the flex item. This is the logic we use for table cells and positioned objects. * Source/WebCore/rendering/RenderBlock.cpp: (RednerBlock::isSelectionRoot) - Added isFlexItemIncludingDeprecated and isGridItem to behave similar for Selection paint as Table * LayoutTests/fast/text/flexbox-selection-gap-painting.html: Added Test * LayoutTests/fast/text/flexbox-selection-gap-painting-expected.html: Added Test Expectations * LayoutTests/fast/text/grid-selection-gap-painting.html: Added Test * LayoutTests/fast/text/grid-selection-gap-painting-expected.html: Added Test Expectations Canonical link: https://commits.webkit.org/254602@main
WebKit · Sep 18, 2022 · 48936aafec37b3b17c182f210f46e65bf6df9ba9 · 48936aa
1 parent 4c91eff
commit 48936aafec37b3b17c182f210f46e65bf6df9ba9
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 1 deletion.
diff --git a/LayoutTests/fast/text/flexbox-selection-gap-painting-expected.html b/LayoutTests/fast/text/flexbox-selection-gap-painting-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<div style="display: flex; background-color: #ddd; font-size: 24pt">
+   <div style="width: 100px ; display: inline-block">
+    <span id="a">aaa</span><br>
+    <span id="b">bbb</span>
+   </div>
+   <div style="width: 100px ; display: inline-block">
+    <span id="c">ccc</span>
+    <span id="d">ddd</span>
+   </div>
+</div>
+<script>
+    var b = document.querySelector('#b'),
+        d = document.querySelector('#d');
+    getSelection().setBaseAndExtent(b.firstChild, 0, d.firstChild, 2);
+    focus();
+</script>
diff --git a/LayoutTests/fast/text/flexbox-selection-gap-painting.html b/LayoutTests/fast/text/flexbox-selection-gap-painting.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<div style="display: flex; background-color: #ddd; font-size: 24pt">
+   <div style="width: 100px">
+    <span id="a">aaa</span><br>
+    <span id="b">bbb</span>
+   </div>
+   <div style="width: 100px">
+    <span id="c">ccc</span>
+    <span id="d">ddd</span>
+   </div>
+</div>
+<script>
+    var b = document.querySelector('#b'),
+        d = document.querySelector('#d');
+    getSelection().setBaseAndExtent(b.firstChild, 0, d.firstChild, 2);
+    focus();
+</script>
diff --git a/LayoutTests/fast/text/grid-selection-gap-painting-expected.html b/LayoutTests/fast/text/grid-selection-gap-painting-expected.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<div style="display: grid; grid-template-columns: 20px 20px 20px; grid-gap: 40px; background-color: #ddd; font-size: 24pt">
+   <div style="width: 100px ; display: inline-block"">
+    <span id="a">aaa</span><br>
+    <span id="b">bbb</span>
+   </div>
+   <div style="width: 100px ; display: inline-block"">
+    <span id="c">ccc</span>
+    <span id="d">ddd</span>
+   </div>
+</div>
+<script>
+    var b = document.querySelector('#b'),
+        d = document.querySelector('#d');
+    getSelection().setBaseAndExtent(b.firstChild, 0, d.firstChild, 2);
+    focus();
+</script>
diff --git a/LayoutTests/fast/text/grid-selection-gap-painting.html b/LayoutTests/fast/text/grid-selection-gap-painting.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<div style="display: grid; grid-template-columns: 20px 20px 20px; grid-gap: 40px; background-color: #ddd; font-size: 24pt">
+   <div style="width: 100px">
+    <span id="a">aaa</span><br>
+    <span id="b">bbb</span>
+   </div>
+   <div style="width: 100px">
+    <span id="c">ccc</span>
+    <span id="d">ddd</span>
+   </div>
+</div>
+<script>
+    var b = document.querySelector('#b'),
+        d = document.querySelector('#d');
+    getSelection().setBaseAndExtent(b.firstChild, 0, d.firstChild, 2);
+    focus();
+</script>
diff --git a/Source/WebCore/rendering/RenderBlock.cpp b/Source/WebCore/rendering/RenderBlock.cpp
@@ -1471,7 +1471,8 @@ bool RenderBlock::isSelectionRoot() const
         || isPositioned() || isFloating()
         || isTableCell() || isInlineBlockOrInlineTable()
         || hasTransform() || hasReflection() || hasMask() || isWritingModeRoot()
-        || isRenderFragmentedFlow() || style().columnSpan() == ColumnSpan::All)
+        || isRenderFragmentedFlow() || style().columnSpan() == ColumnSpan::All
+        || isFlexItemIncludingDeprecated() || isGridItem())
         return true;
 
     if (view().selection().start()) {