Blitz - WPT: font-display-preload.html

wpt / css / css-fonts / font-display / font-display-preload.html

/css/css-fonts/font-display/font-display-preload.html

<!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>

/css/css-fonts/font-display/font-display-preload-ref.html

<!DOCTYPE html>
<html>
<title>font-display should work for preloaded fonts</title>
<style>
  .arial {
    height: 20px;
    font-family: Arial;
  }
</style>
<div id="container">
  <div class="arial"></div>
  <div class="arial"></div>
  <div class="arial">Swap</div>
  <div class="arial">Fallback</div>
  <div class="arial">Optional</div>
</div>
</html>