1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!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="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc">
<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>
|
