Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-text/text-autospace/text-autospace-ligature-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@font-face {
font-family: ligature-font;
src: url('../../css-fonts/support/fonts/Lato-Medium-Liga.ttf');
}
#test-container {
font-family: ligature-font;
font-size: 40px;
}
.base {
text-autospace: no-autospace;
}
</style>
<div id="test-container">
<div id="test1">国fi</div>
<div id="test2">fi国</div>
<div id="test3">国fi国</div>
</div>
<script>
function getAdvance(node, start, end) {
const range = document.createRange();
range.setStart(node, start);
range.setEnd(node, end);
const bounds = range.getBoundingClientRect();
return bounds.width;
}
class AutoSpaceTest {
constructor(id) {
const element = document.getElementById(id);
// Create a base element with the `base` class.
const baseElement = element.cloneNode(true);
baseElement.removeAttribute('id');
baseElement.classList.add('base');
element.after(baseElement);
this.element = element;
this.baseElement = baseElement;
}
assert(start, end, spacing) {
const node = this.element.firstChild;
const advance = getAdvance(node, start, end);
const baseNode = this.baseElement.firstChild;
const baseAdvance = getAdvance(baseNode, start, end);
assert_approx_equals(advance, baseAdvance + spacing, 0.001);
}
}
const test1 = new AutoSpaceTest('test1');
const test2 = new AutoSpaceTest('test2');
const test3 = new AutoSpaceTest('test3');
function run() {
if (!CSS.supports('text-autospace', 'no-autospace')) {
test(() => assert_true(false), 'text-autospace not implemented');
return;
}
// The `getBoundingClientRect()` for the middle of a ligature isn't
// well-defined. Ensure ligatures are measured as a range.
const spacing = 5;
test(() => test1.assert(0, 1, spacing));
test(() => test1.assert(1, 3, 0));
test(() => test2.assert(0, 2, spacing));
test(() => test2.assert(2, 3, 0));
test(() => test3.assert(0, 1, spacing));
test(() => test3.assert(1, 3, spacing));
test(() => test3.assert(3, 4, 0));
}
setup({explicit_done: true});
window.addEventListener('load', () => {
document.fonts.ready.then(() => {
run();
done();
});
});
</script>