tor-browser

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

sibling-index-keyframe-palette-mix-dynamic.html (1504B)

      1 <!DOCTYPE html>
      2 <title>CSS Values and Units Test: sibling-index() changing font-palette during @keyframes animation</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7  @font-face {
      8    font-family: "COLR-test-font";
      9    src: url("resources/COLR-palettes-test-font.ttf") format("truetype");
     10  }
     11 
     12  @font-palette-values --MyFirstPalette {
     13    font-family: "COLR-test-font";
     14    base-palette: 1;
     15  }
     16 
     17  @font-palette-values --MySecondPalette {
     18    font-family: "COLR-test-font";
     19    base-palette: 2;
     20  }
     21 
     22  @keyframes --anim {
     23    from {
     24      font-palette: palette-mix(in lch, --MyFirstPalette calc(5% * sibling-index()), --MySecondPalette 80%);
     25    }
     26    to {
     27      font-palette: palette-mix(in lch, --MyFirstPalette 90%, --MySecondPalette 10%);
     28    }
     29  }
     30  #target {
     31    animation: --anim 1000s step-end;
     32  }
     33 </style>
     34 <div>
     35  <div id="rm"></div>
     36  <div></div>
     37  <div></div>
     38  <div id="target"></div>
     39 </div>
     40 <script>
     41  test(() => {
     42    assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in lch, --MyFirstPalette 20%, --MySecondPalette)");
     43  }, "Initially, the sibling-index() is 4 for #target");
     44 
     45  test(() => {
     46    rm.remove();
     47    assert_equals(getComputedStyle(target).fontPalette, "palette-mix(in lch, --MyFirstPalette 15%, --MySecondPalette 80%)");
     48  }, "Removing a preceding sibling of #target reduces the sibling-index()");
     49 </script>