[line-clamp] [text-box-trim] Trim the last line before clamp inside n…

…ested blocks When `text-box-trim: trim-end` is used together with `line-clamp`, it should trim the block-end leading of the last line before clamp, the one with the ellipsis. This worked when that last line before clamp is directly contained by the line-clamp container, but it doesn't when it is inside a nested block element. The reason for this is that, although for `InlineNode`s, `ConstraintSpace::ShouldTextBoxTrimNodeEnd` is always set if the parent `BlockNode` is as well; for `BlockNode`s, that flag is only set for nodes that are the last in-flow child node of its parent. This means that, for line-clamp, there is no flag to tell a child `BlockNode` that it is fine to trim if there's a clamp point inside it, even if it wouldn't be fine to trim in its last formatted line. This patch therefore adds a `ShouldTextBoxTrimInsideWhenLineClamp` field to `ConstraintSpace` to indicate this. Bug: 40336192, 40254880 Change-Id: I1690ab296dd9686a09f4b9f06a7d86d8998d9446 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5987915 Commit-Queue: Andreu Botella <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Cr-Commit-Position: refs/heads/main@{#1379720}
web-platform-tests · Nov 7, 2024 · 23f125f · 23f125f
1 parent 7d50b28
commit 23f125f
Showing 1 changed file with 40 additions and 0 deletions.
diff --git a/css/css-inline/text-box-trim/text-box-trim-line-clamp-002.html b/css/css-inline/text-box-trim/text-box-trim-line-clamp-002.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<title>text-box-trim applies to the last line before line-clamp, even if it's in a nested block</title>
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
+<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
+<link ref="help" href="https://www.w3.org/TR/css-overflow-4/#line-clamp">
+<link rel="match" href="text-box-trim-line-clamp-001-ref.html">
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.spacer {
+  background: lightgray;
+  block-size: 100px;
+}
+.target {
+  font: 50px/2 Ahem;
+  text-box-trim: trim-end;
+  text-box-edge: text;
+}
+.clamp {
+  line-clamp: 3;
+}
+@supports not (line-clamp: 3) {
+  .clamp {
+    -webkit-line-clamp: 3;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+}
+</style>
+<div class="spacer"></div>
+<div class="target clamp">
+  A<br>
+  B
+  <div>
+    C<br>
+    D
+  </div>
+  E
+</div>
+<div class="spacer"></div>