commit 0c8d6b284fe48af1712ea184324217578141c94b parent ede16b9f614f07bef10ee1e37cefc56b47bcf7ee Author: Andreu Botella <abotella@igalia.com> Date: Thu, 9 Oct 2025 20:33:56 +0000 Bug 1992170 [wpt PR 55181] - [line-clamp] Don't insert the line-clamp ellipsis inside nowrap text, a=testonly Automatic update from web-platform-tests [line-clamp] Don't insert the line-clamp ellipsis inside nowrap text When we initially implemented the `CSSLineClampLineBreakingEllipsis` runtime feature, which takes the line-clamp ellipsis into account when line-breaking (as opposed to using `LineTruncator`), we allowed the ellipsis to be inserted inside `text-wrap: nowrap` text (e.g. `white-space: pre`). The reason for this was that the spec text for `block-ellipsis` says that the ellipsis is placed after the last soft wrap opportunity that would still allow the ellipsis to not overflow the line box; and `text-wrap: nowrap` does not remove soft wrap opportunities, it just prevents wrapping at those. As it turns out, though, this was an oversight by the spec editor, and recently in https://github.com/w3c/csswg-drafts/issues/12811 it was resolved that `nowrap` blocks the insertion of ellipsis, except at forced line breaks. Similarly, in https://github.com/w3c/csswg-drafts/issues/12008 it was resolved that the ellipsis should be inserted as if appended after whitespace processing part II. Together, these two resolutions mean a line with the ellipsis is line-broken as usual, except that the available width is reduced by the width of the ellipsis; and then the ellipsis is inserted at the end, after whitespace collapsing (which in Chromium happens in the `LogicalLineBuilder`, not in the `LineBreaker`). This CL implements this behavior. One catch is, what happens with lines that end in hanging whitespace? Glyphs can only hang at the start or end of the line, and the ellipsis should block the hanging. The CSSWG didn't discuss this case yet, and there's an issue at https://github.com/w3c/csswg-drafts/issues/12857. This CL currently leaves Chromium's behavior there slightly broken, which we will fix in a follow-up. This CL also fixes the `webkit-line-clamp-024.html` and `line-clamp-with-abspos-017.html` WPT tests, since they don't work with the specified behavior. Bug: 40336192, 445681957, 445680405 Change-Id: Ibf8f61ddefd9cf5fdbc88fc5bb667363dfcdd266 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6994661 Commit-Queue: Andreu Botella <abotella@igalia.com> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1523726} -- wpt-commits: 7fa164825a1b0ad36b78e6cecc07f5b539835e24 wpt-pr: 55181 Diffstat:
5 files changed, 50 insertions(+), 13 deletions(-)
diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/block-ellipsis-031.html b/testing/web-platform/tests/css/css-overflow/line-clamp/block-ellipsis-031.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: block-ellipsis and line-end preserved spaces</title> +<link rel="author" title="Andreu Botella" href="mailto:abotella@igalia.com"> +<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/"> +<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis"> +<link rel="match" href="reference/block-ellipsis-031-ref.html"> +<meta name="assert" content="Preserved spaces at the end of a line will not be collapsed before the block-ellipsis"> +<style> +.clamp { + line-clamp: 2; + width: 63.1ch; + border: 1px solid black; + font-family: monospace; +} +span { + white-space: pre; +} +</style> +<div class="clamp">This time, Mark, who had always been the center of attention in +any social gathering, <span>walked into the room </span> uncharacteristically +quietly, barely speaking as he settled into a chair. +When asked, he said that he was fine, when he wasn't really fine.</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-with-abspos-017.html b/testing/web-platform/tests/css/css-overflow/line-clamp/line-clamp-with-abspos-017.html @@ -12,8 +12,7 @@ } .child { font: 16px / 32px monospace; - white-space: pre; - width: 7.1ch; + width: 13.1ch; } .rel { position: relative; @@ -28,10 +27,12 @@ } </style> <div class="clamp"> -<div class="child">Line 1 -Line 2 -Line 3 <span class="rel">hidden -fdgdgjldsfg -<div class="abspos"></div></span></div> + <div class="child"> + Line 1 <br> + Line 2 <br> + Line 3 <span class="rel">hidden<br> + fdgdgjldsfg <br> + <div class="abspos"></div></span> + </div> </div> <p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/block-ellipsis-031-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/block-ellipsis-031-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Overflow: test reference</title> +<style> +.clamp { + width: 63.1ch; + border: 1px solid black; + font-family: monospace; + white-space: pre; +} +</style> +<div class="clamp">This time, Mark, who had always been the center of attention in +any social gathering, walked into the room … +</div> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/reference/webkit-line-clamp-024-ref.html b/testing/web-platform/tests/css/css-overflow/line-clamp/reference/webkit-line-clamp-024-ref.html @@ -13,5 +13,5 @@ </style> Before <div class="clamp">Line 1 Line 2 -Line …</div> After</div> +Line…</div> After</div> <p>Following content.</p> diff --git a/testing/web-platform/tests/css/css-overflow/line-clamp/webkit-line-clamp-024.html b/testing/web-platform/tests/css/css-overflow/line-clamp/webkit-line-clamp-024.html @@ -11,15 +11,14 @@ -webkit-box-orient: vertical; -webkit-line-clamp: 3; font: 16px / 32px monospace; - white-space: pre; padding: 0 4px; background-color: yellow; overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */ } </style> -Before <div class="clamp">Line 1 -Line 2 -Line 3 -Line 4 +Before <div class="clamp">Line 1 <br> +Line 2 <br> +Line 3 <br> +Line 4 <br> Line 5</div> After</div> <p>Following content.</p>