Skip to content

Commit fb57afe

Browse files
frivoalfrivoal
committed
Tests for line breaking around atomic lines at element boundary
See w3c/csswg-drafts#9964
1 parent 754e9d6 commit fb57afe

File tree

4 files changed

+160
-0
lines changed

4 files changed

+160
-0
lines changed

‎css/css-text/line-breaking/line-breaking-030.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>CSS Text — line breaking at element boundary with atomic inlines</title>
5+
<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters or atomic inlines, the white-space property on the nearest common ancestor of the two characters controls breaking">
6+
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
7+
<link rel=match href="reference/line-breaking-030-ref.html">
8+
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
9+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
10+
<style>
11+
div {
12+
color:green;
13+
width: 1em;
14+
line-height: 1em;
15+
font-family: Ahem;
16+
white-space: normal;
17+
font-size: 60px;
18+
}
19+
span{
20+
white-space: pre;
21+
}
22+
img{
23+
vertical-align: bottom;
24+
}
25+
.container {
26+
position: relative;
27+
}
28+
.fail {
29+
color: red;
30+
position: absolute;
31+
left: 0;
32+
top: 1em;
33+
z-index: -1;
34+
}
35+
</style>
36+
37+
<p>Test passes is there is a green rectangle and no red.
38+
39+
<div class=container>
40+
<span><img src="../../support/60x60-green.png"></span><span><img src="../../support/60x60-green.png"></span>
41+
<div class=fail>X</div>
42+
</div>
43+

‎css/css-text/line-breaking/line-breaking-031.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>CSS Text — line breaking at element boundary with atomic inlines</title>
5+
<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters or atomic inlines, the white-space property on the nearest common ancestor of the two characters controls breaking">
6+
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
7+
<link rel=match href="reference/line-breaking-030-ref.html">
8+
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
9+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
10+
<style>
11+
div {
12+
color:green;
13+
width: 1em;
14+
line-height: 1em;
15+
font-family: Ahem;
16+
white-space: normal;
17+
font-size: 60px;
18+
}
19+
span{
20+
white-space: pre;
21+
}
22+
img{
23+
vertical-align: bottom;
24+
}
25+
.container {
26+
position: relative;
27+
}
28+
.fail {
29+
color: red;
30+
position: absolute;
31+
left: 0;
32+
top: 1em;
33+
z-index: -1;
34+
}
35+
</style>
36+
37+
<p>Test passes is there is a green rectangle and no red.
38+
39+
<div class=container>
40+
<span>X</span><span><img src="../../support/60x60-green.png"></span>
41+
<div class=fail>X</div>
42+
</div>
43+

‎css/css-text/line-breaking/line-breaking-032.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>CSS Text — line breaking at element boundary with atomic inlines</title>
5+
<meta name=assert content="For soft wrap opportunities defined by the boundary between two characters or atomic inlines, the white-space property on the nearest common ancestor of the two characters controls breaking">
6+
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
7+
<link rel=match href="reference/line-breaking-030-ref.html">
8+
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
9+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
10+
<style>
11+
div {
12+
color:green;
13+
width: 1em;
14+
line-height: 1em;
15+
font-family: Ahem;
16+
white-space: normal;
17+
font-size: 60px;
18+
}
19+
span{
20+
white-space: pre;
21+
}
22+
img{
23+
vertical-align: bottom;
24+
}
25+
.container {
26+
position: relative;
27+
}
28+
.fail {
29+
color: red;
30+
position: absolute;
31+
left: 0;
32+
top: 1em;
33+
z-index: -1;
34+
}
35+
</style>
36+
37+
<p>Test passes is there is a green rectangle and no red.
38+
39+
<div class=container>
40+
<span><img src="../../support/60x60-green.png"></span><span>X</span>
41+
<div class=fail>X</div>
42+
</div>
43+

‎css/css-text/line-breaking/reference/line-breaking-030-ref.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>Test reference</title>
5+
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
6+
<style>
7+
div {
8+
color:green;
9+
width: 1em;
10+
line-height: 1em;
11+
font-family: Ahem;
12+
font-size: 60px;
13+
}
14+
span{
15+
white-space: pre;
16+
}
17+
img{
18+
vertical-align: bottom;
19+
}
20+
.container {
21+
position: relative;
22+
}
23+
</style>
24+
25+
<p>Test passes is there is a green rectangle and no red.
26+
27+
<div class=container>
28+
<span><img src="../../support/60x60-green.png"></span>
29+
<span><img src="../../support/60x60-green.png"></span>
30+
</div>
31+

0 commit comments

Comments
 (0)