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
120
121
122
123
124
125
126
127
128
129
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Coordination of kern and palt features for CJK kerning</title>
<link rel="help" href="https://drafts.csswg.org/css-fonts/#font-kerning-prop" />
<link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_ko#tag-kern" />
<link rel="help" href="https://learn.microsoft.com/en-gb/typography/opentype/spec/features_pt#palt" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {
font-family: test;
src: url('resources/NotoSansJP-Regular.subset.otf') format('opentype');
}
h1 {
font: bold 1.5em/1 sans-serif;
}
h2 {
font: 1em/1 sans-serif;
margin-bottom: .25em;
}
.test {
font-family: test, sans-serif;
font-size: 3em;
}
.latin {
background: yellow;
}
.cjk {
background: cyan;
}
.paltOFFkernON {
font-feature-settings: "palt" 0;
font-kerning: normal;
}
.kernOFF {
font-kerning: none;
}
.kernON {
font-kerning: normal;
}
.paltONkernON {
font-feature-settings: "palt" 1;
font-kerning: normal;
}
.paltONkernOFF {
font-feature-settings: "palt" 1;
font-kerning: none;
}
</style>
<body>
<h1>Testing application of kerning to CJK text</h1>
<h2>default</h2>
<div class="test default">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<h2>font-kerning: none;</h2>
<div class="test kernOFF">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<h2>font-kerning: normal;</h2>
<div class="test kernON">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<h2>font-feature-settings:"palt" 0; font-kerning: normal;</h2>
<div class="test paltOFFkernON">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<h2>font-feature-settings:"palt" 1; font-kerning: normal;</h2>
<div class="test paltONkernON">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<h2>font-feature-settings:"palt" 1; font-kerning: none;</h2>
<div class="test paltONkernOFF">
<span class=latin>YeYeYeYe</span><span class=cjk>ティティティティ</span>
</div>
<script>
const expectMatch = [
[ ".kernON .latin", ".paltOFFkernON .latin" ],
[ ".kernON .latin", ".paltONkernON .latin" ],
[ ".kernOFF .latin", ".paltONkernOFF .latin" ],
[ ".kernON .cjk", ".paltONkernON .cjk" ],
[ ".default .cjk", ".kernOFF .cjk" ],
];
const expectMismatch = [
[ ".kernOFF .latin", ".kernON .latin" ],
[ ".kernOFF .cjk", ".kernON .cjk" ],
[ ".paltOFFkernON .cjk", ".paltONkernON .cjk" ],
];
const expectMatchOneOf = [
[ ".default .latin", [".kernON .latin", ".kernOFF .latin"] ],
];
expectMatch.forEach((t) => {
test(() => {
let w1 = document.querySelector(t[0]).offsetWidth;
let w2 = document.querySelector(t[1]).offsetWidth;
assert_equals(w1, w2);
}, "expected match: " + t[0] + " vs " + t[1]);
});
expectMismatch.forEach((t) => {
test(() => {
let w1 = document.querySelector(t[0]).offsetWidth;
let w2 = document.querySelector(t[1]).offsetWidth;
assert_not_equals(w1, w2);
}, "expected mismatch: " + t[0] + " vs " + t[1]);
});
expectMatchOneOf.forEach((t) => {
test(() => {
let w1 = document.querySelector(t[0]).offsetWidth;
let matched = false;
t[1].forEach((t2) => {
let w2 = document.querySelector(t2).offsetWidth;
if (w1 == w2) {
matched = true;
}
});
assert_true(matched);
}, t[0] + " matches one of [" + t[1].join(", ") + "]");
});
</script>
</body>
</head>
|
