font-display-preload.html (1731B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>font-display should work for preloaded fonts</title> 4 <link id="link" href="/fonts/Ahem.ttf?pipe=trickle(d5)" as="font" type="font/ttf" crossorigin> 5 <link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-display-desc"> 6 <link rel="match" href="font-display-preload-ref.html"> 7 <style> 8 @font-face { 9 font-family: 'Auto'; 10 src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); 11 font-display: auto; 12 } 13 @font-face { 14 font-family: 'Block'; 15 src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); 16 font-display: block; 17 } 18 @font-face { 19 font-family: 'Swap'; 20 src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); 21 font-display: swap; 22 } 23 @font-face { 24 font-family: 'Fallback'; 25 src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); 26 font-display: fallback; 27 } 28 @font-face { 29 font-family: 'Optional'; 30 src: url('/fonts/Ahem.ttf?pipe=trickle(d5)'); 31 font-display: optional; 32 } 33 </style> 34 <div id="container" hidden> 35 <div style="height: 20px; font-family: 'Auto', Arial">Auto</div> 36 <div style="height: 20px; font-family: 'Block', Arial">Block</div> 37 <div style="height: 20px; font-family: 'Swap', Arial">Swap</div> 38 <div style="height: 20px; font-family: 'Fallback', Arial">Fallback</div> 39 <div style="height: 20px; font-family: 'Optional', Arial">Optional</div> 40 </div> 41 <script> 42 window.onload = () => { 43 document.getElementById('link').rel = 'preload'; 44 document.getElementById('container').hidden = false; 45 const timeoutMsec = 200; // Between the short limit and the long limit 46 setTimeout(() => { 47 document.documentElement.classList.remove("reftest-wait"); 48 }, timeoutMsec); 49 }; 50 </script> 51 </html>