Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
  • Loading branch information
vitorroriz authored Nov 15, 2024
1 parent 9c91835 commit 9d26d70
Show file tree
Hide file tree
Showing 2 changed files with 37 additions and 69 deletions.
29 changes: 29 additions & 0 deletions css/css-text/text-autospace/text-autospace-ligature-001-ref.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
<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;
text-autospace: no-autospace;
}
.spacing-right {
margin-right: 0.125em;
}
.spacing-left {
margin-left: 0.125em;
}

</style>
<div id="test-container">
<div><span class="spacing-left">fi</span></div>
<div>国fi</div>
<div><span class="spacing-right">fi</span></div>
<div><span>fi</span></div>
<div><span class="spacing-left spacing-right">fi</span></div>
<div><span>fi</span></div>
</div>
77 changes: 8 additions & 69 deletions css/css-text/text-autospace/text-autospace-ligature-001.html
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="match" href="text-autospace-ligature-001-ref.html">
<style>
@font-face {
font-family: ligature-font;
Expand All @@ -11,77 +10,17 @@
#test-container {
font-family: ligature-font;
font-size: 40px;
text-autospace: normal;
}
.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>国fi</div>
<div class="base">国fi</div>
<div>fi国</div>
<div class="base">fi国</div>
<div>国fi国</div>
<div class="base">国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>

0 comments on commit 9d26d70

Please sign in to comment.