Blitz - WPT: variable-avar2-rvrn.html

wpt / css / css-fonts / variations / variable-avar2-rvrn.html

/css/css-fonts/variations/variable-avar2-rvrn.html

<!doctype html>
<html class="reftest-wait">
  <link rel="match" href="variable-avar2-rvrn-ref.html" />
  <link rel="mismatch" href="variable-avar2-rvrn-mismatch.html" />
  <link rel="help" href="https://www.iso.org/standard/87621.html" />
  <meta charset="utf-8" />
  <style>
    @font-face {
      font-family: avar2test_avar2substitution;
      src: url(../resources/avar/rvrnTestAvar2[opsz\,wdth\,wght].ttf);
    }

    body {
      font-family: avar2test_avar2substitution, sans-serif;
      font-size: 220px;
    }

    .variable-alternates {
      font-variation-settings:
        "wght" 1000,
        "wdth" 90;
    }

    .avar-alternates {
      font-variation-settings:
        "wght" 1000,
        "wdth" 75;
    }
  </style>
  <!-- The rvrnTestAvar2 re-implements the rvrnTestAvar1 font's
       warping of the design space using an avar2 item variation
       store and delta sets.
-->
  H
  <span class="variable-alternates">H</span>
  <span class="avar-alternates">H</span>
  <script>
    document.fonts.ready.then(() => {
      document.documentElement.classList.remove("reftest-wait");
    });
  </script>
</html>

/css/css-fonts/variations/variable-avar2-rvrn-ref.html

<!doctype html>
<html class="reftest-wait">
  <meta charset="utf-8" />
  <style>
    @font-face {
      font-family: avar2test_avar1substitution;
      src: url(../resources/avar/rvrnTestAvar1[opsz\,wdth\,wght].ttf);
    }

    body {
      font-family: avar2test_avar1substitution, sans-serif;
      font-size: 220px;
    }

    .variable-alternates {
      font-variation-settings:
        "wght" 1000,
        "wdth" 90;
    }

    .avar-alternates {
      font-variation-settings:
        "wght" 1000,
        "wdth" 75;
    }
  </style>
  <!-- The avar2test_avar1substitution font uses the rlig opentype feature
     to perform a glyph substitution at wdth 90.
     Using the avar1 table, the font distorts the designspace
     so that the substitution occurs at wdth 75 instead.
     By default, no substitutions occur at wdth 100.
-->
  H
  <span class="variable-alternates">H</span>
  <span class="avar-alternates">H</span>
  <script>
    document.fonts.ready.then(() => {
      document.documentElement.classList.remove("reftest-wait");
    });
  </script>
</html>