Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/cjk-kerning.html - WPT Dashboard Interop Dashboard
<!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://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>