commit b783501d9de4bd72dd58b0dc6e03e22ffc9e4b81
parent 8a8e2d7ce98edc2aa22e5697cd1c929502ee62af
Author: Andreu Botella <abotella@igalia.com>
Date: Fri, 31 Oct 2025 08:55:25 +0000
Bug 1996846 [wpt PR 55712] - [line-clamp] Remove hanging whitespace before the line-clamp ellipsis, a=testonly
Automatic update from web-platform-tests
[line-clamp] Remove hanging whitespace before the line-clamp ellipsis
The current spec text for `block-ellipsis` says the ellipsis should be
inserted after phase II of the [CSS-TEXT] white space processing
rules is applied. However, this does not make sense in the case where
the line would end with hanging whitespace, since glyph sequences can
only hang if they're at the end of the line, and the ellipsis would
block hanging. This is being discussed in
https://github.com/w3c/csswg-drafts/issues/12857.
Currently in Chromium, after https://crrev.com/c/6994661, the behavior
of line-clamp when the line before the ellipsis would end with hanging
whitespace is somewhat broken. The reason for this is that hanging
whitespace still causes a line to overflow as far as the line breaker
is concerned, and overflow causes the line to be completely displaced
by the ellipsis.
In order to fix this, we need to choose one of the options for dealing
with the hanging whitespace listed in that issue, even if the CSSWG
has not yet made a resolution. The most likely option to end up being
chosen seems to be to remove hanging whitespace, so we went with that.
In the implementation, rather than removing the hanging whitespace
item result, we are setting its width to zero. This is the same
approach used to make hanging whitespace not count for `min-content`.
Additionally, in
`InlineLayoutAlgorithm::DoesRemainderFitInLineWithoutEllipsis` we need
to rewind to before the hanging whitespace item results, so we can
properly account for their width. We also removed some of the
unnecessary complexity of this method to deal with breakpoints that
couldn't have been found during regular line-breaking, which is not
possible anymore after https://crrev.com/c/6994661.
Bug: 40336192
Change-Id: I4865aa8451deeaa0bdc5feae147dd27e285bef2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7089533
Reviewed-by: Andreu Botella <abotella@igalia.com>
Reviewed-by: Koji Ishii <kojii@chromium.org>
Commit-Queue: Andreu Botella <abotella@igalia.com>
Cr-Commit-Position: refs/heads/main@{#1536666}
--
wpt-commits: a1d41944f46dc2b9d0d62a5d7210dc1b385a40ee
wpt-pr: 55712
Diffstat:
2 files changed, 79 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/block-ellipsis-032.tentative.html b/testing/web-platform/tests/css/css-overflow/line-clamp/block-ellipsis-032.tentative.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: block-ellipsis after hanging whitespacce</title>
+<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com">
+<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
+<link rel="match" href="reference/block-ellipsis-032-ref.html">
+<meta name="assert" content="If the block-ellipsis soft wrap opportunity is preceded by hangable whitespace, it is removed before placing the ellipsis.">
+<style>
+.clamp {
+ line-clamp: 1;
+ border: 1px solid black;
+ font-family: monospace;
+ margin-bottom: 1em;
+ /* The non-hanging text in the first line is 22 to 26ch, plus 1ch for the ellipsis. The hanging whitespace is extra 8ch */
+ width: 29ch;
+}
+.right {
+ text-align: right;
+}
+.justified {
+ text-align: justify;
+}
+.green {
+ color: green;
+ font-weight: bold;
+}
+.hangs {
+ white-space: pre-wrap;
+ background-color: red;
+}
+</style>
+
+<p>Test passes if the text in the following blocks, including the ellipsis, is aligned to the proper
+margin, and if they all have some green text and no red.</p>
+
+<div class="clamp">
+ This text is <span class="green">left-aligned</span><span class="hangs"> </span>Clamped
+</div>
+<div class="clamp right">
+ This text is <span class="green">right-aligned</span><span class="hangs"> </span>Clamped
+</div>
+<div class="clamp justified">
+ This text is <span class="green">justified</span><span class="hangs"> </span>Clamped
+</div>
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/block-ellipsis-032-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/block-ellipsis-032-ref.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Overflow: test reference</title>
+<style>
+.clamp {
+ border: 1px solid black;
+ font-family: monospace;
+ width: 29ch;
+ text-wrap: nowrap;
+ margin-bottom: 1em;
+}
+.right {
+ text-align: right;
+}
+.justified {
+ text-align-last: justify;
+}
+.green {
+ color: green;
+ font-weight: bold;
+}
+</style>
+
+<p>Test passes if the text in the following blocks, including the ellipsis, is aligned to the proper
+margin, and if they all have some green text and no red.</p>
+
+<div class="clamp">
+ This text is <span class="green">left-aligned</span>…
+</div>
+<div class="clamp right">
+ This text is <span class="green">right-aligned</span>…
+</div>
+<div class="clamp justified">
+ This text is <span class="green">justified</span>…
+</div>
