2026-04-01 13:01:14 -03:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<script src="../include.js"></script>
|
|
|
|
|
<script>
|
|
|
|
|
promiseTest(async () => {
|
|
|
|
|
const fontData = await fetch("../../../Assets/HashSans.woff").then(
|
|
|
|
|
response => response.arrayBuffer());
|
|
|
|
|
|
|
|
|
|
const face = new FontFace("TestFont", fontData);
|
|
|
|
|
document.fonts.add(face);
|
|
|
|
|
|
|
|
|
|
await face.loaded;
|
|
|
|
|
|
|
|
|
|
const element = document.createElement("span");
|
|
|
|
|
element.style.fontFamily = "TestFont, serif";
|
|
|
|
|
element.style.fontSize = "20px";
|
2026-04-05 04:01:17 -03:00
|
|
|
// We use a deliberately long string and a wide glyph here to ensure the width of the test font and the fallback
|
|
|
|
|
// font will be different.
|
|
|
|
|
const testString = "WWWWWWWWWWWWWWWWWWWW"
|
|
|
|
|
element.textContent = testString;
|
2026-04-01 13:01:14 -03:00
|
|
|
document.body.appendChild(element);
|
|
|
|
|
|
|
|
|
|
const fallbackElement = document.createElement("span");
|
|
|
|
|
fallbackElement.style.fontFamily = "serif";
|
|
|
|
|
fallbackElement.style.fontSize = "20px";
|
2026-04-05 04:01:17 -03:00
|
|
|
fallbackElement.textContent = testString;
|
2026-04-01 13:01:14 -03:00
|
|
|
document.body.appendChild(fallbackElement);
|
|
|
|
|
|
|
|
|
|
// Force layout
|
|
|
|
|
document.body.offsetHeight;
|
|
|
|
|
|
|
|
|
|
const testWidth = element.offsetWidth;
|
|
|
|
|
const fallbackWidth = fallbackElement.offsetWidth;
|
|
|
|
|
|
|
|
|
|
println(`face.status: ${face.status}`);
|
|
|
|
|
println(`font matched: ${testWidth !== fallbackWidth}`);
|
|
|
|
|
|
|
|
|
|
document.fonts.delete(face);
|
|
|
|
|
|
|
|
|
|
// Force layout after removal
|
|
|
|
|
document.body.offsetHeight;
|
|
|
|
|
|
|
|
|
|
const afterDeleteWidth = element.offsetWidth;
|
|
|
|
|
println(`font unmatched after delete: ${afterDeleteWidth === fallbackWidth}`);
|
|
|
|
|
});
|
|
|
|
|
</script>
|
