tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

multiple-elements-font-palette-animation.html (1799B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>Font-palette animation of multiple elements</title>
      4 <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#propdef-font-palette">
      5 <meta name="assert" content="Animating font-palette CSS property of multiple elements.">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <style>
     10  @font-face {
     11    font-family: "COLR-test-font";
     12    src: url("../resources/COLR-palettes-test-font.ttf") format("truetype");
     13  }
     14  @font-palette-values --custom {
     15    font-family: "COLR-test-font";
     16    base-palette: 3;
     17  }
     18  @keyframes anim {
     19    from {
     20      font-palette: normal;
     21    }
     22    to {
     23      font-palette: --custom;
     24    }
     25  }
     26  .demo {
     27    font-family: "COLR-test-font";
     28    font-size: 130px;
     29  }
     30  .anim {
     31    animation: anim 0.1s forwards;
     32  }
     33 </style>
     34 
     35 <body>
     36  <div class="demo">
     37    <div id="a" class="anim">A</div><div id="b" class="anim">A</div>
     38  </div>
     39 </body>
     40 
     41 <script>
     42  var afterPaletteAnimationTest1 = async_test(
     43    "Verify font-palette value of the first element after animation"
     44  );
     45  document.getElementById("a").addEventListener("animationend",
     46    afterPaletteAnimationTest1.step_func_done(function() {
     47        assert_equals(window.getComputedStyle(
     48                document.getElementById("a"))
     49            .getPropertyValue('font-palette'), "--custom");
     50    }));
     51 
     52  var afterPaletteAnimationTest2 = async_test(
     53    "Verify font-palette value of the second element after animation"
     54  );
     55  document.getElementById("b").addEventListener("animationend",
     56    afterPaletteAnimationTest2.step_func_done(function() {
     57        assert_equals(window.getComputedStyle(
     58                document.getElementById("b"))
     59            .getPropertyValue('font-palette'), "--custom");
     60    }));
     61 </script>