Skip to content

Commit 32d52d8

Browse files
frivoalfrivoal
committed
[css-text] line-breaking for atomic/replaced elements and punctuation
Part of w3c/csswg-drafts#4576 (comment)
1 parent 1017e28 commit 32d52d8

File tree

4 files changed

+80
-0
lines changed

4 files changed

+80
-0
lines changed

‎css/css-text/line-breaking/line-breaking-atomic-009.html

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>CSS Text — atomic inline and punctuation</title>
5+
<meta name=assert content="There's a soft wrap opportunity between an atomic inline following punctuation">
6+
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
7+
<link rel=match href="reference/line-breaking-atomic-009-ref.html">
8+
<link rel=author title="Florian Rivoal" href="https://florian.rivoal.net">
9+
<style>
10+
div {
11+
font-size: 4em;
12+
width: 0;
13+
}
14+
span {
15+
display: inline-block;
16+
}
17+
</style>
18+
19+
<p>Test passes if there the “:” is under the “A” in the text below.
20+
21+
<div><span>A</span>:</div>

‎css/css-text/line-breaking/line-breaking-replaced-006.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!doctype html>
2+
<html>
3+
<meta charset="utf-8">
4+
<title>CSS Text — replaced element and punctuation</title>
5+
<meta name=assert content="There's a soft wrap opportunity between a replaced element punctuation">
6+
<link rel=help href="https://www.w3.org/TR/css-text-3/#line-break-details">
7+
<link rel=match href="reference/line-breaking-replaced-006-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+
font: 50px/1 Ahem;
13+
}
14+
.red {
15+
position: absolute;
16+
z-index: -1;
17+
color: red;
18+
white-space: pre;
19+
}
20+
.test {
21+
color: green;
22+
width: 0;
23+
}
24+
</style>
25+
26+
<p>Test passes if there is a filled green square and <strong>no red</strong>.
27+
28+
<div class=red><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50>:</div>
29+
<div class=test><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50>:</div>

‎css/css-text/line-breaking/reference/line-breaking-atomic-009-ref.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
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+
font-size: 4em;
9+
}
10+
</style>
11+
12+
<p>Test passes if there the “:” is under the “A” in the text below.
13+
14+
<div>A<br>:</div>

‎css/css-text/line-breaking/reference/line-breaking-replaced-006-ref.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
7+
<style>
8+
div {
9+
font: 50px/1 Ahem;
10+
color: green;
11+
}
12+
</style>
13+
14+
<p>Test passes if there is a filled green square and <strong>no red</strong>.
15+
16+
<div><img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width=50>:</div>

0 commit comments

Comments
 (0)