-
Notifications
You must be signed in to change notification settings - Fork 3.3k
/
Copy pathcss-text-line-break-zh-cj-loose.html
119 lines (115 loc) · 4.28 KB
/
css-text-line-break-zh-cj-loose.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8"/>
<title>Line-break:loose, Conditional Japanese Starter (CJ) (zh)</title>
<link rel="author" title="Richard Ishida" href="mailto:ishida@w3.org">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="The browser allows a conditional Japanese starter at the beginning of a line; the langauge being chinese makes no difference.">
<style type="text/css">
@font-face {
font-family: 'mplus-1p-regular';
src: url('/fonts/mplus-1p-regular.woff') format('woff');
}
#wrapper { position: relative; }
.test { color: red; }
.test, .ref { font-size: 30px; font-family: mplus-1p-regular, sans-serif; width: 185px; padding: 0; border: 1px solid orange; line-height: 1em; }
</style>
<style>
.test { line-break: loose; }
</style>
<script>
var charlist = `3041 HIRAGANA LETTER SMALL A
3043 HIRAGANA LETTER SMALL I
3045 HIRAGANA LETTER SMALL U
3047 HIRAGANA LETTER SMALL E
3049 HIRAGANA LETTER SMALL O
3063 HIRAGANA LETTER SMALL TU
3083 HIRAGANA LETTER SMALL YA
3085 HIRAGANA LETTER SMALL YU
3087 HIRAGANA LETTER SMALL YO
308E HIRAGANA LETTER SMALL WA
3095 HIRAGANA LETTER SMALL KA
3096 HIRAGANA LETTER SMALL KE
30A1 KATAKANA LETTER SMALL A
30A3 KATAKANA LETTER SMALL I
30A5 KATAKANA LETTER SMALL U
30A7 KATAKANA LETTER SMALL E
30A9 KATAKANA LETTER SMALL O
30C3 KATAKANA LETTER SMALL TU
30E3 KATAKANA LETTER SMALL YA
30E5 KATAKANA LETTER SMALL YU
30E7 KATAKANA LETTER SMALL YO
30EE KATAKANA LETTER SMALL WA
30F5 KATAKANA LETTER SMALL KA
30F6 KATAKANA LETTER SMALL KE
30FC KATAKANA-HIRAGANA PROLONGED SOUND MARK
31F0 KATAKANA LETTER SMALL KU
31F1 KATAKANA LETTER SMALL SI
31F2 KATAKANA LETTER SMALL SU
31F3 KATAKANA LETTER SMALL TO
31F4 KATAKANA LETTER SMALL NU
31F5 KATAKANA LETTER SMALL HA
31F6 KATAKANA LETTER SMALL HI
31F7 KATAKANA LETTER SMALL HU
31F8 KATAKANA LETTER SMALL HE
31F9 KATAKANA LETTER SMALL HO
31FA KATAKANA LETTER SMALL MU
31FB KATAKANA LETTER SMALL RA
31FC KATAKANA LETTER SMALL RI
31FD KATAKANA LETTER SMALL RU
31FE KATAKANA LETTER SMALL RE
31FF KATAKANA LETTER SMALL RO
FF67 HALFWIDTH KATAKANA LETTER SMALL A
FF68 HALFWIDTH KATAKANA LETTER SMALL I
FF69 HALFWIDTH KATAKANA LETTER SMALL U
FF6A HALFWIDTH KATAKANA LETTER SMALL E
FF6B HALFWIDTH KATAKANA LETTER SMALL O
FF6C HALFWIDTH KATAKANA LETTER SMALL YA
FF6D HALFWIDTH KATAKANA LETTER SMALL YU
FF6E HALFWIDTH KATAKANA LETTER SMALL YO
FF6F HALFWIDTH KATAKANA LETTER SMALL TU
FF70 HALFWIDTH KATAKANA-HIRAGANA PROLONGED SOUND MARK`
</script>
</head>
<body>
<script>
var lines = charlist.split('\n')
var out = '<div id="log"></div>\n'
for (var i=0;i<lines.length;i++) {
// get the data
var firstSpace = lines[i].indexOf(' ')
var hex = lines[i].substr(0,firstSpace)
var name = lines[i].substr(firstSpace)
// make a test
out += '<div class="wrapper"><div>'+hex+'</div>' +
'<div class="test" id="test'+i+'" lang="zh">文文文文文文&#x'+hex+';字<span id="testSpan'+i+'">字</span></div>' +
'<div class="ref" id="ref'+i+'" lang="zh">文文文文文文<br/>&#x'+hex+';字<span id="refSpan'+i+'">字</span></div>' +
'</div>'
}
function spansNearEnough(counter) {
return Math.abs( document.getElementById('testSpan'+counter).getBoundingClientRect().left
- document.getElementById('refSpan'+counter).getBoundingClientRect().left ) < 1;
}
document.querySelector('body').innerHTML = out
setup({explicit_done: true});
document.fonts.ready.then(validate);
function validate() {
for (i=0;i<lines.length;i++) {
test(function() {
assert_true(spansNearEnough(i));
}, lines[i]+' may appear at line start if zh and loose');
// Hide successful tests.
if (spansNearEnough(i)) document.getElementById('test'+i).parentNode.style.display = 'none'
}
done();
}
</script>
<!--Notes:
The test creates a box with room for 6 characters, causing wrapping to occur either between the 6th and the 7th character, or before the 6th if the breaks after the 6th or before the 7th are prohibited.
It also creates the expected behaviour with a ref instance, using <br/>. Each line ends with a span. The test then checks whether the left edge of the span is in the same place in test and ref instance.
-->
</body>
</html>