[text-box-trim] More spec-compliant first/last formatted line.

See https://drafts.csswg.org/css-pseudo-4/#first-text-line 1. For a block container that establishes an inline formatting context, the "first formatted line" is its first line box, if it has one. Otherwise, there is no first formatted line. 2. Otherwise, for a block container that has block children, look inside the first in-flow block child (if any) and do #1 if it establishes an inline formatting context. Otherwise, do #2. In short, we don't need to search for line boxes in blocks after the first block child. If there is no line in the first child, there's no "first formatted line". There's no spec for "last formatted line", but apply the same logic. I.e. if the last block child has no line, there's no "last formatted line". This allows us to simplify things a bit, especially when it comes to re-laying out (kTextBoxTrimEndDidNotApply). The only case where we need this now is for blocks inside inlines: If the last formatted line is inside a block-in-inline, we need to go back and re-lay it out if it turns out to be the last line (which isn't something we can check inside block-in-inline layout). Note: When adding support for block fragmentation, trimming at a fragmentainer's block end will be another case where we need to re-lay out. The motivation for this change was text box trimming inside block fragmentation (upcoming CL), and be able to add support for that and still be reasonably confident that it won't become too complicated. This fixes one existing test. Some other existing tests had to be updated because of this change (they were making incorrect assumptions about first/last formatted line). As a result of that, some new refs had to be added, since other tests were piggy-backing on the same ref. Bug: 40254880, 367766472 Change-Id: I3fcc53af86353725b1f5705a5528493a72bf2e69
web-platform-tests · Oct 25, 2024 · 9d70db7 · 9d70db7
1 parent 045fedf
commit 9d70db7
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 6 deletions.
diff --git a/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003-ref.html b/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003-ref.html
@@ -10,5 +10,5 @@
 </style>
 
 <div class="div-parent">
-  <div>Testline1<br><br><br>Testline2<br><br><br>Testline3</div>
+  <div><br>Testline1<br><br><br>Testline2<br><br><br>Testline3<br><br></div>
 </div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html b/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-003.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
-<title>text-box-trim trims through invisible line boxes</title>
+<title>text-box-trim should only be applied on the first/last formatted line</title>
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
-<link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-formatted-line">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <link rel="match" href="text-box-trim-half-leading-block-box-003-ref.html">
 
@@ -17,6 +17,17 @@
 }
 </style>
 
+<!-- The SPANs here will be wrapped inside anonymous blocks. #div-parent will
+     thus start with an anonymous block (for the first SPAN). When looking for a
+     first formatted line, it will have to be inside this anonymous block (or it
+     doesn't exist at all).
+
+     To quote the spec:
+
+     The first formatted line of a block container [...] that contains
+     block-level content [...] is the first formatted line of its first in-flow
+     block-level child. If no such line exists, it has no first formatted
+     line. -->
 <div class="div-parent">
   <span>    </span>
   <div>Testline1<br>Testline2<br>Testline3</div>

diff --git a/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006-ref.html b/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<title>Trimmed 3-line Reference</title>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+
+<style>
+.div-parent {
+  outline: 1px solid orange;
+  font: 20px/1 Ahem;
+}
+</style>
+
+<div class="div-parent">
+  <div>Testline1<br><br><br>Testline2<br><br><br>Testline3<br></div>
+</div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006.html b/css/css-inline/text-box-trim/text-box-trim-half-leading-block-box-006.html
@@ -3,7 +3,7 @@
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
 <link rel="help" href="https://www.w3.org/TR/css-inline-3/#invisible-line-boxes">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
-<link rel="match" href="text-box-trim-half-leading-block-box-003-ref.html">
+<link rel="match" href="text-box-trim-half-leading-block-box-006-ref.html">
 
 <style>
 .div-parent {

diff --git a/css/css-inline/text-box-trim/text-box-trim-multicol-001-ref.html b/css/css-inline/text-box-trim/text-box-trim-multicol-001-ref.html
@@ -26,5 +26,5 @@
   </span>
   abc abc abc abc
   abc abc
-  <div class="spacer up-half"></div>
+  <div class="spacer"></div>
 </div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-multicol-002-ref.html b/css/css-inline/text-box-trim/text-box-trim-multicol-002-ref.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
+<style>
+.spacer {
+  background: lightgray;
+  block-size: 100px;
+}
+.multicol {
+  column-count: 3;
+  column-fill: auto;
+  border: 1px solid;
+  height: 4lh;
+  width: 20ch;
+  font-family: Ahem;
+  font-size: 40px;
+  line-height: 2;
+}
+.up-half {
+  position: relative;
+  top: -20px;
+}
+</style>
+<div class="multicol">
+  <span class="up-half">
+    abc abc abc abc
+  </span>
+  abc abc abc abc
+  abc abc
+  <div class="spacer up-half"></div>
+</div>
diff --git a/css/css-inline/text-box-trim/text-box-trim-multicol-002.html b/css/css-inline/text-box-trim/text-box-trim-multicol-002.html
@@ -2,7 +2,7 @@
 <title>Test when a box with `text-box-trim` is block fragmented</title>
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
 <link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
-<link rel="match" href="text-box-trim-multicol-001-ref.html">
+<link rel="match" href="text-box-trim-multicol-002-ref.html">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
 .spacer {