<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-spacing-trim-property">
<!--
Test patterns are from "Fullwidth Punctuation Collapsing":
https://drafts.csswg.org/css-text-4/#fullwidth-collapsing
-->
<meta name="variant" content="?class=htb&test=CC:HF">
<meta name="variant" content="?class=htb&test=CM:HF">
<meta name="variant" content="?class=htb&test=CO:FH">
<meta name="variant" content="?class=htb&test=MO:FH">
<meta name="variant" content="?class=htb&test=OO:FH">
<meta name="variant" content="?class=vrl&test=CC:HF">
<meta name="variant" content="?class=vrl&test=CM:HF">
<meta name="variant" content="?class=vrl&test=CO:FH">
<meta name="variant" content="?class=vrl&test=MO:FH">
<meta name="variant" content="?class=vrl&test=OO:FH">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/variant-class.js"></script>
<script src="../support/get-char-advances.js"></script>
<style>
@font-face {
font-family: halt-font;
src: url('/fonts/noto/cjk/NotoSansCJKjp-Regular-subset-halt.otf');
}
#container {
font-family: halt-font;
font-size: 20px;
}
.vrl #container {
writing-mode: vertical-rl;
}
</style>
<div id="log"></div>
<div id="container"></div>
<script>
const classes = {
// Open. Noto CJK doesn't have these glyphs or `halt`/`valt`:
// \u3008\u301A\u3010\uFF3B
'O': '\u300A\u300C\u300E\u3014\u3016\u3018\u301D' +
'\uFF08\uFF5B\uFF5F',
// Close. Noto CJK doesn't have these glyphs or `halt`/`valt`:
// \u3009\u301B\u3011\u301E\uFF3D
'C': '\u300B\u300D\u300F\u3015\u3017\u3019\u301F' +
'\uFF09\uFF5D\uFF60',
// Open Quotes.
'Q': '\u2018\u201C',
// Close quotes.
'R': '\u2019\u201D',
// Middle and ideographic space.
'M': '\u30FB\u3000',
// Dot (comma and full stops.)
'D': '\u3001\u3002\uFF0C\uFF0E',
// Colon.
'L': '\uFF1A',
// Semicolon. Colon and Semicolon may be different in vertical flow.
'S': '\uFF1B',
// Exclamation marks.
'E': '\uFF01\uFF1F',
};
const container = document.getElementById('container');
const em = parseInt(getComputedStyle(container).fontSize);
const threshold = em * .8;
// Generate a list of text from a pattern.
// For example, a pattern 'OC' generates all combinations from
// characters in `classes['O']` and `classes['C']`.
function* textFromPattern(pattern, prefix = '') {
const key = pattern[0];
const rest = pattern.substr(1);
for (const ch of classes[key]) {
if (!rest) {
yield prefix + ch;
continue;
}
yield *textFromPattern(rest, prefix + ch);
}
}
class TestData {
constructor(text, expect) {
const element = document.createElement('div');
element.textContent = text;
this.text = text;
this.element = element;
this.expect = expect;
}
static all = [];
static generate(pattern, expect, container) {
for (const text of textFromPattern(pattern)) {
const data = new TestData(text, expect);
container.appendChild(data.element);
TestData.all.push(data);
}
}
static runAll(indices) {
if (indices && indices.length) {
for (const index of indices) {
TestData.all[index].run(index);
}
return;
}
TestData.all.forEach((data, i) => {
data.run(i);
})
}
run(index) {
const advances = getCharAdvances(this.element);
const results = advances.map(advance => advance >= threshold ? 'F' : 'H');
const result = results.join('');
test(() => {
assert_equals(result, this.expect);
}, `${index}: ${this.text}`);
}
}
setup(() => {
assert_implements(CSS.supports('text-spacing-trim', 'initial'));
}, {explicit_done: true});
(async function () {
const params = new URLSearchParams(window.location.search);
const style= getComputedStyle(container);
const is_vertical = style.writingMode.startsWith('vertical');
// Assign dots and colons using the Noto's Japanese convention.
classes['C'] += classes['D'];
classes['M'] += classes['L'];
if (!is_vertical) classes['M'] += classes['S'];
const args = params.getAll('test').flatMap(i => i.split(','));
for (const arg of args) {
const [pattern, expect] = arg.split(':');
TestData.generate(pattern, expect, container);
}
await document.fonts.ready;
const indices = params.getAll('i').flatMap(i => i.split(','))
.map(i => parseInt(i));
TestData.runAll(indices);
done();
})();
</script>
Codebase Browser
chromium