css/css-fonts/cjk-kerning.html

<!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>