tor-browser

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

font-palette-modify.html (1275B)

      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="mismatch" href="font-palette-modify-notref.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    /* Glyph 'A' uses palette indices 3 and 7. */
     24    override-colors: 3 #00FF00;
     25 }
     26 </style>
     27 </head>
     28 <body>
     29 <div id="target" style="font: 48px 'COLR-test-font'; font-palette: --MyPalette;">A</div>
     30 <script>
     31 let count = 0;
     32 function tick() {
     33    if (count > 3) {
     34        document.getElementById("target").style.setProperty("font-palette", "--MyPalette2");
     35        document.documentElement.classList.remove("reftest-wait");
     36    } else {
     37        ++count;
     38        requestAnimationFrame(tick);
     39    }
     40 }
     41 [...document.fonts][0].load().then(tick);
     42 </script>
     43 </body>
     44 </html>