font-variation-settings-serialization-002.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/font-variation-settings-serialization-002.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html lang="en">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>CSS Test: font-variation-settings serialization</title>

<link rel="author" title="Sejal Anand" href="mailto:sejalanand@microsoft.com">

<link rel="help" href="https://drafts.csswg.org/css-fonts-4/#font-rend-desc">

<meta name="description" content="Font variation settings should be serialized in sorted order.">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

  @font-face {

    font-family: "Roboto";

    src: url('support/fonts/RobotoExtremo-VF.subset.ttf') format('truetype');

  .test1 {

    font-family: "Roboto";

    font-variation-settings: 'wdth' 125, 'wght' 400, 'opsz' 144;

</style>

<body>

  <p>Test passes if font variation settings are correctly sorted in serialization.</p>

  <div class="test1">Sample text</div>

  <script>

   test(function() {

      const computedSettings = getComputedStyle(document.querySelector('.test1')).fontVariationSettings;

      const expectedSettings = '"opsz" 144, "wdth" 125, "wght" 400';

      assert_equals(computedSettings, expectedSettings,

                    "Font variation settings should be sorted when serialized.");

    }, "Check if font variation settings serialization is sorted.");

  </script>

</body>

</html>