Skip to content

Commit 732ceb5

Browse files
mstenshomoz-wptsync-bot
mstensho
authored and
moz-wptsync-bot
committed
Bug 1927054 [wpt PR 48817] - [text-box-trim] Trim at the start/end of columns., a=testonly
Automatic update from web-platform-tests [text-box-trim] Trim at the start/end of columns. There are now two types of text box trimming: The already existing one, trimming at the start or end of a node. And the new one, trimming at the start or end of a fragmentainer. We need to distinguish between these, since they aren't active at the same times. Therefore, the old "should text box trim start/end" flags are now qualified with "node" (e.g. ShouldTextBoxTrimNodeStart()), and the new ones are qualified with "fragmentainer" (e.g. ShouldTextBoxTrimFragmentainerStart()). When text-box-trim is specified inside a fragmentation context, it should not cause trimming at fragmentainer breaks, unless box-decoration-break is 'clone'. See w3c/csswg-drafts#5335 (comment) When text-box-trim is specified on a multicol container (i.e. NOT inside the fragmentation context that the multicol container establishes), it should cause trimming at fragmentainer breaks. See w3c/csswg-drafts#5335 (comment) Update text-box-trim-multicol-001.html, since we now trim at fragmentainer boundaries. Also make the multicol container slightly shorter, to demonstrate that we also trim at the end of columns. Make the multicol container in text-box-trim-multicol-002.html slightly taller, to demonstrate that there's trimming at the end of columns in that case (trimming is specified on a multicol descendant, and box-decoration-break is not 'clone'). Also add more tests for trimming at column boundaries, and also some basic printing tests that simply test that text-box trimming still works, at least when they're not next to a page boundary. Blink (and all other browsers, I think) cannot paint outside the page area, so trimming is disabled at page boundaries. There will be an internal WPT test for that in an upcoming CL. Set widows and orphans to 1 in the tests. They are not meant to be affected by orphans / widows requirements anyway, but our widows calculation code is currently causing trouble for text box trimming (two different types of relayout not getting along too well), so just set it to 1 for now. A follow-up CL will fix this. Bug: 41494433 Change-Id: Ic4fc97ecf4cce3f52d5c3d8d44c3188c53970002 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5961725 Commit-Queue: Morten Stenshorne Reviewed-by: Koji Ishii Cr-Commit-Position: refs/heads/main@{#1373770} -- wpt-commits: 35a534039299fb6e3e3e27056eaf5e22342be458 wpt-pr: 48817
1 parent 88e9b50 commit 732ceb5

22 files changed

+527
-15
lines changed

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-001-print-ref.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
4+
<style>
5+
@page {
6+
size: 400px;
7+
margin: 0;
8+
}
9+
body {
10+
margin: 0;
11+
}
12+
style>
13+
<div style="height:100px;">div>
14+
<div style="font:20px/20px Ahem; background:yellow;">
15+
xxx<br><br>
16+
<div style="height:400px;">div>
17+
<br>xxx
18+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-001-print.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
5+
<meta name="assert" content="Test that normal text box trimming works inside of pagination, with trimming being applied far away from the page edges. How to treat trimming at page edges depends on the implementation.">
6+
<link rel="match" href="not-at-page-edges-001-print-ref.html">
7+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8+
<style>
9+
@page {
10+
size: 400px;
11+
margin: 0;
12+
}
13+
body {
14+
margin: 0;
15+
}
16+
style>
17+
<div style="height:100px;">div>
18+
<div style="text-box-trim:trim-both; font:20px/60px Ahem; background:yellow;">
19+
xxx
20+
<div style="height:400px;">div>
21+
xxx
22+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-002-print-ref.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
4+
<style>
5+
@page {
6+
size: 400px;
7+
margin: 0;
8+
}
9+
body {
10+
margin: 0;
11+
}
12+
style>
13+
<div style="height:100px;">div>
14+
<div style="font:20px/20px Ahem; background:yellow;">
15+
xxx<br><br>
16+
<div style="height:400px;">div>
17+
<br>xxx<br><br>
18+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-002-print.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
5+
<meta name="assert" content="Test that normal text box trimming works inside of pagination, with trimming being applied far away from the page edges. How to treat trimming at page edges depends on the implementation.">
6+
<link rel="match" href="not-at-page-edges-002-print-ref.html">
7+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8+
<style>
9+
@page {
10+
size: 400px;
11+
margin: 0;
12+
}
13+
body {
14+
margin: 0;
15+
}
16+
style>
17+
<div style="height:100px;">div>
18+
<div style="text-box-trim:trim-start; font:20px/60px Ahem; background:yellow;">
19+
xxx
20+
<div style="height:400px;">div>
21+
xxx
22+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-003-print-ref.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
4+
<style>
5+
@page {
6+
size: 400px;
7+
margin: 0;
8+
}
9+
body {
10+
margin: 0;
11+
}
12+
style>
13+
<div style="height:100px;">div>
14+
<div style="font:20px/20px Ahem; background:yellow;">
15+
<br>xxx<br><br>
16+
<div style="height:400px;">div>
17+
<br>xxx
18+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/not-at-page-edges-003-print.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
>
2+
<link rel="author" title="Morten Stenshorne" href="mailto:[email protected]">
3+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
5+
<meta name="assert" content="Test that normal text box trimming works inside of pagination, with trimming being applied far away from the page edges. How to treat trimming at page edges depends on the implementation.">
6+
<link rel="match" href="not-at-page-edges-003-print-ref.html">
7+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8+
<style>
9+
@page {
10+
size: 400px;
11+
margin: 0;
12+
}
13+
body {
14+
margin: 0;
15+
}
16+
style>
17+
<div style="height:100px;">div>
18+
<div style="text-box-trim:trim-end; font:20px/60px Ahem; background:yellow;">
19+
xxx
20+
<div style="height:400px;">div>
21+
xxx
22+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001-ref.html

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,27 +4,22 @@
44
.spacer {
55
background: lightgray;
66
block-size: 100px;
7+
margin-block-start: 20px;
78
}
89
.multicol {
910
column-count: 3;
1011
column-fill: auto;
1112
border: 1px solid;
12-
height: 4lh;
13+
height: 290px;
1314
width: 20ch;
1415
font-family: Ahem;
1516
font-size: 40px;
16-
line-height: 2;
17-
}
18-
.up-half {
19-
position: relative;
20-
top: -20px;
17+
line-height: 1;
2118
}
2219
style>
2320
<div class="multicol">
24-
<span class="up-half">
25-
abc abc abc abc
26-
span>
27-
abc abc abc abc
28-
abc abc
29-
<div class="spacer">div>
21+
abc<br><br>abc<br><br>abc<br><br>abc<br>
22+
abc<br><br>abc<br><br>abc<br><br>abc<br>
23+
abc<br><br>abc<br>
24+
<div class="spacer">div>
3025
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-001.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<title>Test when a box with `text-box-trim` is multi-columntitle>
33
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
44
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-2380160677">
56
<link rel="match" href="text-box-trim-multicol-001-ref.html">
67
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
78
<style>
@@ -13,11 +14,13 @@
1314
column-count: 3;
1415
column-fill: auto;
1516
border: 1px solid;
16-
height: 4lh;
17+
height: 290px;
1718
width: 20ch;
1819
font-family: Ahem;
1920
font-size: 40px;
2021
line-height: 2;
22+
orphans: 1;
23+
widows: 1;
2124
}
2225
.trim {
2326
text-box-trim: trim-both;

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002-ref.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
column-count: 3;
1010
column-fill: auto;
1111
border: 1px solid;
12-
height: 4lh;
12+
height: 360px;
1313
width: 20ch;
1414
font-family: Ahem;
1515
font-size: 40px;

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-002.html

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
>
22
<title>Test when a box with `text-box-trim` is block fragmentedtitle>
3+
<meta name="assert" content="text-box-trim specified inside a fragmentation context does not trim at column boundaries unless box-decoration-break is 'clone'">
34
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
45
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
57
<link rel="match" href="text-box-trim-multicol-002-ref.html">
68
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
79
<style>
@@ -13,11 +15,13 @@
1315
column-count: 3;
1416
column-fill: auto;
1517
border: 1px solid;
16-
height: 4lh;
18+
height: 360px;
1719
width: 20ch;
1820
font-family: Ahem;
1921
font-size: 40px;
2022
line-height: 2;
23+
orphans: 1;
24+
widows: 1;
2125
}
2226
.trim {
2327
text-box-trim: trim-both;

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-003-ref.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
>
2+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
3+
<style>
4+
.spacer {
5+
background: lightgray;
6+
block-size: 100px;
7+
}
8+
.multicol {
9+
column-count: 3;
10+
column-fill: auto;
11+
border: 1px solid;
12+
height: 290px;
13+
width: 20ch;
14+
font-family: Ahem;
15+
font-size: 40px;
16+
line-height: 1;
17+
}
18+
style>
19+
<div class="multicol">
20+
abc<br><br>abc<br><br>abc<br><br>abc<br>
21+
abc<br><br>abc<br><br>abc<br><br>abc<br>
22+
abc<br><br>abc<br>
23+
<div class="spacer">div>
24+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-003.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
>
2+
<title>Test when a box with `text-box-trim` is block fragmentedtitle>
3+
<meta name="assert" content="text-box-trim specified inside a fragmentation context does not trim at column boundaries unless box-decoration-break is 'clone'">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
7+
<link rel="match" href="text-box-trim-multicol-003-ref.html">
8+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
9+
<style>
10+
.spacer {
11+
background: lightgray;
12+
block-size: 100px;
13+
}
14+
.multicol {
15+
column-count: 3;
16+
column-fill: auto;
17+
border: 1px solid;
18+
height: 290px;
19+
width: 20ch;
20+
font-family: Ahem;
21+
font-size: 40px;
22+
line-height: 2;
23+
orphans: 1;
24+
widows: 1;
25+
}
26+
.trim {
27+
text-box-trim: trim-both;
28+
text-box-edge: text;
29+
box-decoration-break: clone;
30+
}
31+
style>
32+
<div class="multicol">
33+
<div class="trim">
34+
abc abc abc abc
35+
abc abc abc abc
36+
abc abc
37+
div>
38+
<div class="spacer">div>
39+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-004-ref.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
>
2+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
3+
<style>
4+
.spacer {
5+
background: lightgray;
6+
block-size: 100px;
7+
}
8+
.multicol {
9+
column-count: 3;
10+
column-fill: auto;
11+
border: 1px solid;
12+
height: 290px;
13+
width: 20ch;
14+
font-family: Ahem;
15+
font-size: 40px;
16+
line-height: 1;
17+
}
18+
.down-half {
19+
position: relative;
20+
top: 20px;
21+
}
22+
style>
23+
<div class="multicol">
24+
abc<br><br>abc<br><br>abc<br><br>abc<br>
25+
<div class="down-half">
26+
abc<br><br>abc<br><br>abc<br><br><br>
27+
abc<br><br>abc<br><br>
28+
div>
29+
<div class="spacer">div>
30+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-004.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
>
2+
<title>Test when a box with `text-box-trim` is block fragmentedtitle>
3+
<meta name="assert" content="text-box-trim specified inside a fragmentation context does not trim at column boundaries unless box-decoration-break is 'clone'">
4+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-edge">
5+
<link rel="help" href="https://drafts.csswg.org/css-inline-3/#text-box-trim">
6+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5335#issuecomment-1908655635">
7+
<link rel="match" href="text-box-trim-multicol-004-ref.html">
8+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
9+
<style>
10+
.spacer {
11+
background: lightgray;
12+
block-size: 100px;
13+
}
14+
.multicol {
15+
column-count: 3;
16+
column-fill: auto;
17+
border: 1px solid;
18+
height: 290px;
19+
width: 20ch;
20+
text-box-trim: trim-both;
21+
font-family: Ahem;
22+
font-size: 40px;
23+
line-height: 2;
24+
orphans: 1;
25+
widows: 1;
26+
}
27+
.trim {
28+
text-box-trim: trim-start;
29+
text-box-edge: text;
30+
}
31+
style>
32+
<div class="multicol">
33+
<div class="trim">
34+
abc abc abc abc
35+
abc abc abc abc
36+
abc
37+
div>
38+
<div class="spacer">div>
39+
div>

‎testing/web-platform/tests/css/css-inline/text-box-trim/text-box-trim-multicol-005-ref.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
>
2+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
3+
<style>
4+
.spacer {
5+
background: lightgray;
6+
block-size: 100px;
7+
}
8+
.multicol {
9+
column-count: 3;
10+
column-fill: auto;
11+
border: 1px solid;
12+
height: 290px;
13+
width: 20ch;
14+
font-family: Ahem;
15+
font-size: 40px;
16+
line-height: 1;
17+
}
18+
style>
19+
<div class="multicol">
20+
abc<br><br>abc<br><br>abc<br><br><br>
21+
abc<br><br>abc<br><br>abc<br><br><br>
22+
abc<br><br>abc
23+
<div class="spacer">div>
24+
div>

0 commit comments

Comments
 (0)