File tree Expand file tree Collapse file tree 4 files changed +160
-0
lines changed
css/css-text/line-breaking Expand file tree Collapse file tree 4 files changed +160
-0
lines changed Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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
+
Original file line number Diff line number Diff line change
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
+
You can’t perform that action at this time.
0 commit comments