Skip to content
Permalink
Browse files
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
  • Loading branch information
Ahmad Saleem authored and aproskuryakov committed Sep 18, 2022
1 parent 4c91eff commit 48936aafec37b3b17c182f210f46e65bf6df9ba9
Show file tree
Hide file tree
Showing 5 changed files with 70 additions and 1 deletion.
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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()) {

0 comments on commit 48936aa

Please sign in to comment.