Skip to content

Commit d84b06c

Browse files
andreubotellaandreubotella
committed
Add BFC tests for (-webkit-)line-clamp
As was recently resolved in w3c/csswg-drafts#10323 and w3c/csswg-drafts#10324, `(-webkit-)line-clamp` should always create an independent formatting context whenever it applies. Furthermore, the `display: -webkit-box` property will not cause the box to become a flexbox, but it will be an independent block formatting context instead (even for `line-clamp`, which doesn't require `display: -webkit-box` to apply). This patch adds some tests for it, and makes some other tests no longer tentative.
1 parent 0905968 commit d84b06c

9 files changed

+150
-8
lines changed

‎css/css-overflow/line-clamp/line-clamp-016.tentative.html renamed to ‎css/css-overflow/line-clamp/line-clamp-016.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
55
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
66
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
7-
<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, it becomes a block container, and so line-clamp applies to that box.">
7+
<meta name="assert" content="If display: -webkit-box and -webkit-box-orient: vertical are present on the same box as line-clamp, line-clamp applies to that box.">
88
<style>
99
.clamp {
1010
display: -webkit-box;

‎css/css-overflow/line-clamp/line-clamp-017.tentative.html renamed to ‎css/css-overflow/line-clamp/line-clamp-017.html

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@
1515
padding: 0 4px;
1616
background-color: yellow;
1717

18-
/* These properties horizontally center the child, if this box is either a
19-
* -webkit-box or a regular flexbox. */
18+
/* If display: -webkit-box behaves the same as without line-clamp,
19+
* these properties would cause the anonymous inline box to be centered. */
2020
-webkit-box-align: center;
21+
-webkit-box-pack: center;
2122
align-items: center;
23+
justify-content: center;
2224
}
2325
</style>
2426
<div class="clamp"><div>Line 1

‎css/css-overflow/line-clamp/line-clamp-018.tentative.html renamed to ‎css/css-overflow/line-clamp/line-clamp-018.html

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@
1414
white-space: pre;
1515
background-color: yellow;
1616

17-
/* These properties horizontally center the child, if this box is either a
18-
* -webkit-box or a regular flexbox. */
19-
-webkit-box-align: center;
17+
/* If display: -webkit-box behaves the same as without line-clamp,
18+
* these properties would cause the anonymous inline box to be centered. */
19+
-webkit-box-align: center;
20+
-webkit-box-pack: center;
2021
align-items: center;
22+
justify-content: center;
2123
}
2224
</style>
2325
<div class="clamp"><div>Line 1

‎css/css-overflow/line-clamp/line-clamp-with-floats-008.tentative.html renamed to ‎css/css-overflow/line-clamp/line-clamp-with-floats-008.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
55
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
66
<link rel="match" href="reference/line-clamp-with-floats-008-ref.html">
7-
<meta name="assert" content="If the line-clamp container is an independent formatting context, it will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden.">
7+
<meta name="assert" content="Line-clamp containers create an independent formatting context, so they will clear contained floats before the clamp point, even if they extend beyond the last line. Lines past the clamp point will remain hidden.">
88
<style>
99
.clamp {
10-
display: flow-root;
1110
line-clamp: 4;
1211
font: 16px / 32px serif;
1312
padding: 0 4px;

‎css/css-overflow/line-clamp/reference/webkit-line-clamp-044-ref.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>CSS Test Reference</title>
4+
<style>
5+
.clamp {
6+
display: flow-root;
7+
background-color: yellow;
8+
padding: 0.5em;
9+
font-size: 16px / 32px serif;
10+
white-space: pre;
11+
}
12+
.float {
13+
float: left;
14+
background-color: orange;
15+
padding: 0.5em;
16+
height: 100px;
17+
width: 100px;
18+
}
19+
</style>
20+
21+
<div class="clamp">Line 1
22+
Line 2
23+
Line 3
24+
Line 4
25+
<div class="float"></div>Line 5</div>

‎css/css-overflow/line-clamp/reference/webkit-line-clamp-046-ref.html

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<meta charset="utf-8">
3+
<title>CSS Test Reference</title>
4+
<style>
5+
.clamp {
6+
display: flex;
7+
font: 16px / 32px serif;
8+
white-space: pre;
9+
background-color: yellow;
10+
padding: 0 4px;
11+
justify-content: center;
12+
}
13+
</style>
14+
15+
<div class="clamp">Line 1
16+
Line 2
17+
Line 3
18+
Line 4
19+
Line 5</div>

‎css/css-overflow/line-clamp/webkit-line-clamp-044.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Overflow: -webkit-line-clamp creates an IFC</title>
4+
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
6+
<link rel="match" href="reference/webkit-line-clamp-044-ref.html">
7+
<meta name="assert" content="-webkit-line-clamp always creates an independent formatting context, even without overflow: hidden, which causes the height to grow to the clearance of floats.">
8+
<style>
9+
.clamp {
10+
display: -webkit-box;
11+
-webkit-box-orient: vertical;
12+
-webkit-line-clamp: 5;
13+
/* no overflow: hidden */
14+
background-color: yellow;
15+
padding: 0.5em;
16+
font-size: 16px / 32px serif;
17+
white-space: pre;
18+
}
19+
.float {
20+
float: left;
21+
background-color: orange;
22+
padding: 0.5em;
23+
height: 100px;
24+
width: 100px;
25+
}
26+
</style>
27+
28+
<div class="clamp"><div>Line 1
29+
Line 2
30+
Line 3
31+
Line 4
32+
<div class="float"></div>Line 5</div></div>

‎css/css-overflow/line-clamp/webkit-line-clamp-045.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Overflow: -webkit-line-clamp causes display: -webkit-box to create a block formatting context</title>
4+
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
6+
<link rel="match" href="reference/webkit-line-clamp-005-ref.html">
7+
<meta name="assert" content="-webkit-line-clamp causes display: -webkit-box to create a block box, rather than to behave like display: flex as it would otherwise">
8+
<style>
9+
.clamp {
10+
display: -webkit-box;
11+
-webkit-box-orient: vertical;
12+
-webkit-line-clamp: 4;
13+
font: 16px / 32px serif;
14+
white-space: pre;
15+
background-color: yellow;
16+
padding: 0 4px;
17+
overflow: hidden; /* can be removed once implementations update their old -webkit-line-clamp implementations */
18+
19+
/* If display: -webkit-box behaves the same as without -webkit-line-clamp,
20+
* these properties would cause the anonymous inline box to be centered. */
21+
-webkit-box-align: center;
22+
-webkit-box-pack: center;
23+
align-items: center;
24+
justify-content: center;
25+
}
26+
</style>
27+
28+
<div class="clamp">Line 1
29+
Line 2
30+
Line 3
31+
Line 4
32+
Line 5</div>

‎css/css-overflow/line-clamp/webkit-line-clamp-046.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<meta charset="UTF-8">
3+
<title>CSS Overflow: -webkit-box-orient: vertical is needed for -webkit-line-clamp to create a block formatting context</title>
4+
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#line-clamp">
6+
<link rel="match" href="reference/webkit-line-clamp-046-ref.html">
7+
<meta name="assert" content="-webkit-line-clamp causes display: -webkit-box to create a block box, rather than to behave like display: flex as it would otherwise. However, this is only the case with -webkit-box-orient: vertical.">
8+
<style>
9+
.clamp {
10+
display: -webkit-box;
11+
/* no -webkit-box-orient: vertical; */
12+
-webkit-line-clamp: 4;
13+
font: 16px / 32px serif;
14+
white-space: pre;
15+
background-color: yellow;
16+
padding: 0 4px;
17+
18+
/* If display: -webkit-box behaves the same as without -webkit-line-clamp,
19+
* these properties would cause the anonymous inline box to be centered. */
20+
-webkit-box-align: center;
21+
-webkit-box-pack: center;
22+
align-items: center;
23+
justify-content: center;
24+
}
25+
</style>
26+
27+
<div class="clamp">Line 1
28+
Line 2
29+
Line 3
30+
Line 4
31+
Line 5</div>

0 commit comments

Comments
 (0)