Skip to content

Commit 48a216f

Browse files
frivoalfrivoal
committed
Tests for block-ellipsis and nowrap
Correct tentative tests that went against what the spec eventually settled on, and add a couple more. See w3c/csswg-drafts#12811
1 parent 06c2e15 commit 48a216f

10 files changed

Lines changed: 82 additions & 41 deletions

css/css-overflow/line-clamp/block-ellipsis-013.tentative.html renamed to css/css-overflow/line-clamp/block-ellipsis-013.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Overflow: block-ellipsis are placed at soft wrap opportunities, even if the line would not break</title>
3+
<title>CSS Overflow: block-ellipsis are placed at soft wrap opportunities, those inside nowrap don't count</title>
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
56
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6-
<link rel="match" href="reference/block-ellipsis-001-ref.html">
7-
<meta name="assert" content="The block-ellipsis is placed after the last soft wrap opportunity in the line box that fits the ellipsis. This happens even with text-wrap: nowrap, since that only prevents line wrapping, rather than removing wrap opportunities.">
7+
<link rel="match" href="reference/block-ellipsis-013-ref.html">
8+
<meta name="assert" content="The block-ellipsis is placed after the last soft wrap opportunity in the line box that fits the ellipsis. Within text-wrap: nowrap, wrap opportunities are not considered.">
89
<style>
910
.clamp {
1011
line-clamp: 2;

css/css-overflow/line-clamp/block-ellipsis-014.tentative.html renamed to css/css-overflow/line-clamp/block-ellipsis-014.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Overflow: the block-ellipsis can be placed at hyphenation opportunities, even if the line would not break</title>
3+
<title>CSS Overflow: the block-ellipsis cannot be placed at hyphenation opportunities if the line would not break</title>
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
56
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6-
<link rel="match" href="reference/block-ellipsis-014-ref.html">
7-
<meta name="assert" content="The block-ellipsis is placed after the last soft wrap opportunity in the line box that fits the ellipsis. This happens even with text-wrap: nowrap, since that only prevents line wrapping, rather than removing wrap opportunities.">
7+
<link rel="match" href="reference/block-ellipsis-013-ref.html">
8+
<meta name="assert" content="The block-ellipsis is not placed after the last soft wrap opportunity in a line with text-wrap: nowrap.">
89
<style>
910
.clamp {
1011
line-clamp: 2;

css/css-overflow/line-clamp/block-ellipsis-015.tentative.html renamed to css/css-overflow/line-clamp/block-ellipsis-015.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Overflow: the block-ellipsis can be inserted at wbr, even if the line would not break there</title>
3+
<title>CSS Overflow: the block-ellipsis cannot be inserted at wbr if the line would not break there</title>
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
56
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6-
<link rel="match" href="reference/block-ellipsis-015-ref.html">
7-
<meta name="assert" content="The block-ellipsis is placed after the last soft wrap opportunity in the line box that fits the ellipsis. This happens even with text-wrap: nowrap, since that only prevents line wrapping, rather than removing wrap opportunities.">
7+
<link rel="match" href="reference/block-ellipsis-013-ref.html">
8+
<meta name="assert" content="The block-ellipsis is not placed after the last soft wrap opportunity in a line box with text-wrap: nowrap.">
89
<style>
910
.clamp {
1011
line-clamp: 2;

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Overflow: soft wrap opportunities created by word-break are not ignored for inserting block-ellipsis</title>
3+
<title>CSS Overflow: soft wrap opportunities created by word-break are ignored for inserting block-ellipsis when nowrap applies</title>
44
<link rel="author" title="Andreu Botella" href="mailto:[email protected]">
5+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
56
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6-
<link rel="match" href="reference/block-ellipsis-017-ref.html">
7-
<meta name="assert" content="The block-ellipsis is placed after the last soft wrap opportunity in the line box that fits the ellipsis. This happens even with text-wrap: nowrap, since that only prevents line wrapping, rather than removing wrap opportunities.">
7+
<link rel="match" href="reference/block-ellipsis-013-ref.html">
8+
<meta name="assert" content="The block-ellipsis is not placed after the last soft wrap opportunity in the line box with text-wrap: nowrap.">
89
<style>
910
.clamp {
1011
line-clamp: 2;

‎css/css-overflow/line-clamp/block-ellipsis-026.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: block-ellipsis at the end of a non-wrappable line</title>
4+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6+
<link rel="match" href="reference/block-ellipsis-026-ref.html">
7+
<meta name="assert" content="The block-ellipsis is placed at the end of a non wrappable line if there is sufficient room.">
8+
<style>
9+
.clamp {
10+
line-clamp: 2;
11+
width: 63.1ch;
12+
border: 1px solid black;
13+
font-family: monospace;
14+
white-space: pre;
15+
}
16+
</style>
17+
<p>Test passes if there are two lines below, and if there is an ellipsis (“…”) after the word “walked” at the end of the second line.
18+
19+
<div class="clamp">This time, Mark, who had always been the center of attention in
20+
any social gathering, walked
21+
into the room uncharacteristically quietly, barely speaking as he settled into a chair.
22+
When asked, he said that he was fine, when he wasn't really fine.</div>

‎css/css-overflow/line-clamp/block-ellipsis-027.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: block-ellipsis and "nowrap" inlines</title>
4+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5+
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#block-ellipsis">
6+
<link rel="match" href="reference/block-ellipsis-026-ref.html">
7+
<meta name="assert" content="The block-ellipsis displaces entire sequences of nowrap content if it needs to make room, regardless of internal wrap opportunities.">
8+
<style>
9+
.clamp {
10+
line-clamp: 2;
11+
width: 63.1ch;
12+
border: 1px solid black;
13+
font-family: monospace;
14+
}
15+
span {
16+
white-space: nowrap;
17+
}
18+
</style>
19+
<p>Test passes if there are two lines below, and if there is an ellipsis (“…”) after the word “walked” at the end of the second line.
20+
21+
<div class="clamp">This time, Mark, who had always been the center of attention in
22+
any social gathering, walked <span>into the room uncharacteristically</span>
23+
quietly, barely speaking as he settled into a chair.
24+
When asked, he said that he was fine, when he wasn't really fine.</div>

css/css-overflow/line-clamp/reference/block-ellipsis-014-ref.html renamed to css/css-overflow/line-clamp/reference/block-ellipsis-013-ref.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<!DOCTYPE html>
22
<meta charset="utf-8">
3-
<title>CSS Reference</title>
3+
<title>CSS Overflow: test reference</title>
4+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
45
<style>
56
.clamp {
67
width: 63.1ch;
78
border: 1px solid black;
89
font-family: monospace;
9-
white-space: pre
10+
white-space: pre;
1011
}
1112
</style>
1213
<div class="clamp">This time, Mark, who had always been the center of attention in
13-
any social gathering, walked into the room uncharacteristi-…</div>
14+
…</div>

‎css/css-overflow/line-clamp/reference/block-ellipsis-015-ref.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎css/css-overflow/line-clamp/reference/block-ellipsis-017-ref.html‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎css/css-overflow/line-clamp/reference/block-ellipsis-026-ref.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow: test reference</title>
4+
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
5+
<style>
6+
.clamp {
7+
width: 63.1ch;
8+
border: 1px solid black;
9+
font-family: monospace;
10+
white-space: pre;
11+
}
12+
</style>
13+
<p>Test passes if there are two lines below, and if there is an ellipsis (“…”) after the word “walked” at the end of the second line.
14+
15+
<div class="clamp">This time, Mark, who had always been the center of attention in
16+
any social gathering, walked…</div>

0 commit comments

Comments
 (0)