Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/font-display/font-display-preload.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<title>font-display should work for preloaded fonts</title>
<link id="link" href="/fonts/Ahem.ttf?pipe=trickle(d5)" as="font" type="font/ttf" crossorigin>
<link rel="match" href="font-display-preload-ref.html">
<style>
@font-face {
font-family: 'Auto';
src: url('/fonts/Ahem.ttf?pipe=trickle(d5)');
font-display: auto;
}
@font-face {
font-family: 'Block';
src: url('/fonts/Ahem.ttf?pipe=trickle(d5)');
font-display: block;
}
@font-face {
font-family: 'Swap';
src: url('/fonts/Ahem.ttf?pipe=trickle(d5)');
font-display: swap;
}
@font-face {
font-family: 'Fallback';
src: url('/fonts/Ahem.ttf?pipe=trickle(d5)');
font-display: fallback;
}
@font-face {
font-family: 'Optional';
src: url('/fonts/Ahem.ttf?pipe=trickle(d5)');
font-display: optional;
}
</style>
<div id="container" hidden>
<div style="height: 20px; font-family: 'Auto', Arial">Auto</div>
<div style="height: 20px; font-family: 'Block', Arial">Block</div>
<div style="height: 20px; font-family: 'Swap', Arial">Swap</div>
<div style="height: 20px; font-family: 'Fallback', Arial">Fallback</div>
<div style="height: 20px; font-family: 'Optional', Arial">Optional</div>
</div>
<script>
window.onload = () => {
document.getElementById('link').rel = 'preload';
document.getElementById('container').hidden = false;
const timeoutMsec = 200; // Between the short limit and the long limit
setTimeout(() => {
document.documentElement.classList.remove("reftest-wait");
}, timeoutMsec);
};
</script>
</html>