tor-browser

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

font-palette-modify-2.html (1221B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3 <head>
      4 <meta charset="utf-8">
      5 <title>Tests that dynamically modifying font-palette causes the necessary rendering update</title>
      6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-prop">
      7 <link rel="author" title="Myles C. Maxfield" href="mailto:mmaxfield@apple.com">
      8 <link rel="match" href="font-palette-modify-2-ref.html">
      9 <style>
     10 @font-face {
     11    font-family: "COLR-test-font";
     12    src: url("resources/COLR-palettes-test-font.ttf") format("truetype");
     13 }
     14 
     15 @font-palette-values --MyPalette {
     16    font-family: "COLR-test-font";
     17    base-palette: 1;
     18 }
     19 
     20 @font-palette-values --MyPalette2 {
     21    font-family: "COLR-test-font";
     22    base-palette: 0;
     23    override-colors: 1 #00FF00;
     24 }
     25 </style>
     26 </head>
     27 <body>
     28 <div id="target" style="font: 48px 'COLR-test-font'; font-palette: --MyPalette;">A</div>
     29 <script>
     30 let count = 0;
     31 function tick() {
     32    if (count > 3) {
     33        document.getElementById("target").style.setProperty("font-palette", "--MyPalette2");
     34        document.documentElement.classList.remove("reftest-wait");
     35    } else {
     36        ++count;
     37        requestAnimationFrame(tick);
     38    }
     39 }
     40 [...document.fonts][0].load().then(tick);
     41 </script>
     42 </body>
     43 </html>