[line-clamp] Hide atomic inlines and images after clamp
With line-clamp, all content after the clamp point in the layout tree
should be hidden for paint; however, atomic inlines and inline images
weren't. This patch fixes this.
Bug: 40336192
Change-Id: I2dde3b5d4959f4019c12507b14776221f98d1c09
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6010756
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Andreu Botella <abotella@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1381632}
diff --git a/third_party/blink/renderer/core/layout/block_node.cc b/third_party/blink/renderer/core/layout/block_node.cc
index dc16708..c5d2e0b5 100644
--- a/third_party/blink/renderer/core/layout/block_node.cc
+++ b/third_party/blink/renderer/core/layout/block_node.cc
@@ -1692,6 +1692,7 @@
builder.SetIsPaintedAtomically(true);
builder.SetUseFirstLineStyle(use_first_line_style);
+ builder.SetIsHiddenForPaint(parent_constraint_space.IsHiddenForPaint());
builder.SetBaselineAlgorithmType(baseline_algorithm_type);
diff --git a/third_party/blink/renderer/core/paint/box_fragment_painter.cc b/third_party/blink/renderer/core/paint/box_fragment_painter.cc
index de66182..32b4a2f4 100644
--- a/third_party/blink/renderer/core/paint/box_fragment_painter.cc
+++ b/third_party/blink/renderer/core/paint/box_fragment_painter.cc
@@ -376,8 +376,10 @@
return;
}
- if (!fragment.IsFirstForNode() && !CanPaintMultipleFragments(fragment))
+ if (fragment.IsHiddenForPaint() ||
+ (!fragment.IsFirstForNode() && !CanPaintMultipleFragments(fragment))) {
return;
+ }
// We are about to enter legacy paint code. This means that the node is
// monolithic. However, that doesn't necessarily mean that it only has one
diff --git a/third_party/blink/web_tests/TestExpectations b/third_party/blink/web_tests/TestExpectations
index faba842..7e4f7fc 100644
--- a/third_party/blink/web_tests/TestExpectations
+++ b/third_party/blink/web_tests/TestExpectations
@@ -7963,6 +7963,8 @@
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-028.tentative.html [ Failure ]
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-030.tentative.html [ Failure ]
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-031.tentative.html [ Failure ]
+crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-032.tentative.html [ Failure ]
+crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-033.tentative.html [ Failure ]
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-auto-001.tentative.html [ Failure ]
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-auto-002.tentative.html [ Failure ]
crbug.com/40336192 virtual/disable-css-line-clamp/external/wpt/css/css-overflow/line-clamp/line-clamp-auto-003.tentative.html [ Failure ]
diff --git a/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-032.tentative.html b/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-032.tentative.html
new file mode 100644
index 0000000..5c203dd0
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-032.tentative.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Atomic inlines after line-clamp</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Atomic inlines after the clamp point should be hidden">
+<style>
+.clamp {
+ line-clamp: 4;
+ width: 150px;
+ line-height: 25px;
+ /* The ellipsis would be outside of the 100x100 green square,
+ * and it shouldn't show up. */
+ color: transparent;
+}
+.green {
+ background-color: green;
+}
+.red {
+ background-color: red;
+}
+.inline-block {
+ display: inline-block;
+ height: 25px;
+ width: 100px;
+}
+.inline-flex {
+ display: inline-flex;
+}
+.inline-grid {
+ display: inline-grid;
+ grid-template-columns: auto auto;
+}
+.inline-table {
+ display: inline-table;
+}
+.inline-table span {
+ display: table-cell;
+}
+:is(.inline-flex, .inline-grid, .inline-table) span {
+ height: 25px;
+ width: 50px;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="clamp">
+ <span class="green inline-block">foo</span>
+ <span class="green inline-flex">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+ <span class="green inline-grid">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+ <span class="green inline-table">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+ <!-- Clamp point here -->
+ <span class="red inline-block">foo</span>
+ <span class="red inline-flex">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+ <span class="red inline-grid">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+ <span class="red inline-table">
+ <span>bar</span>
+ <span>baz</span>
+ </span>
+</div>
diff --git a/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-033.tentative.html b/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-033.tentative.html
new file mode 100644
index 0000000..5e893512d
--- /dev/null
+++ b/third_party/blink/web_tests/external/wpt/css/css-overflow/line-clamp/line-clamp-033.tentative.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: Images after line-clamp</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
+<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht">
+<meta name="assert" content="Images after the clamp point should be hidden">
+<style>
+.clamp {
+ /* Image blocks don't contain lines, and the range between the end of the
+ * first <img class="block"> and the start of the second is an empty line,
+ * which doesn't count as far as line-clamp is concerned. Therefore, the text
+ * "Hidden clamp line" is on the third line. */
+ line-clamp: 3;
+ width: 150px;
+ line-height: 0;
+ color: transparent;
+}
+img {
+ height: 25px;
+ width: 100px;
+}
+.atomic {
+ display: inline-block;
+}
+.block {
+ display: block;
+}
+</style>
+
+<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
+<div class="clamp">
+ <img src="/css/support/swatch-green.png">
+ <img class="atomic" src="/css/support/swatch-green.png">
+ <img class="block" src="/css/support/swatch-green.png">
+ <span><img class="block" src="/css/support/swatch-green.png"></span>
+ Hidden clamp line
+ <!-- Clamp point here -->
+ <img src="/css/support/swatch-red.png">
+ <img class="atomic" src="/css/support/swatch-red.png">
+ <img class="block" src="/css/support/swatch-red.png">
+ <span><img class="block" src="/css/support/swatch-red.png"></span>
+</div>
