tor-browser

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

function-shadow-animations.html (4276B)

      1 <!DOCTYPE html>
      2 <title>Custom Functions: ShadowDOM (animations)</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#using-custom-functions">
      4 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="resources/utils.js"></script>
      8 
      9 <style>
     10  @property --length {
     11    syntax: "<length>";
     12    inherits: false;
     13    initial-value: 0px;
     14  }
     15 
     16  @function --from() { result: 1000px; }
     17  @function --to() { result: 2000px; }
     18 </style>
     19 
     20 <div id=can_animate_standard_property_in_shadow>
     21  <template shadowrootmode=open>
     22    <style>
     23      @keyframes --anim {
     24        from { width: --from(); }
     25        to { width: --to(); }
     26      }
     27      @function --from() { result: 0px; }
     28      @function --to() { result: 100px; }
     29      div {
     30        animation: --anim 1000s linear paused forwards;
     31      }
     32      #t00 { animation-delay: 0s; }
     33      #t04 { animation-delay: -400s; }
     34      #t05 { animation-delay: -500s; }
     35      #t06 { animation-delay: -600s; }
     36      #t10 { animation-delay: -1000s; }
     37    </style>
     38    <div id=t00></div>
     39    <div id=t04></div>
     40    <div id=t05></div>
     41    <div id=t06></div>
     42    <div id=t10></div>
     43  </template>
     44 </div>
     45 <script>
     46  test(() => {
     47    let sr = can_animate_standard_property_in_shadow.shadowRoot;
     48    let gCS = (id) => getComputedStyle(sr.querySelector(id))
     49    assert_equals(gCS('#t00').width, '0px');
     50    assert_equals(gCS('#t04').width, '40px');
     51    assert_equals(gCS('#t05').width, '50px');
     52    assert_equals(gCS('#t06').width, '60px');
     53    assert_equals(gCS('#t10').width, '100px');
     54  }, 'Can animate standard property in shadow');
     55 </script>
     56 
     57 <div id=can_animate_typed_custom_property_in_shadow>
     58  <template shadowrootmode=open>
     59    <style>
     60      @keyframes --anim {
     61        from { --length: --from(); }
     62        to { --length: --to(); }
     63      }
     64      @function --from() { result: 0px; }
     65      @function --to() { result: 100px; }
     66      div {
     67        animation: --anim 1000s linear paused forwards;
     68      }
     69      #t00 { animation-delay: 0s; }
     70      #t04 { animation-delay: -400s; }
     71      #t05 { animation-delay: -500s; }
     72      #t06 { animation-delay: -600s; }
     73      #t10 { animation-delay: -1000s; }
     74    </style>
     75    <div id=t00></div>
     76    <div id=t04></div>
     77    <div id=t05></div>
     78    <div id=t06></div>
     79    <div id=t10></div>
     80  </template>
     81 </div>
     82 <script>
     83  test(() => {
     84    let sr = can_animate_typed_custom_property_in_shadow.shadowRoot;
     85    let gCS = (id) => getComputedStyle(sr.querySelector(id))
     86    assert_equals(gCS('#t00').getPropertyValue('--length'), '0px');
     87    assert_equals(gCS('#t04').getPropertyValue('--length'), '40px');
     88    assert_equals(gCS('#t05').getPropertyValue('--length'), '50px');
     89    assert_equals(gCS('#t06').getPropertyValue('--length'), '60px');
     90    assert_equals(gCS('#t10').getPropertyValue('--length'), '100px');
     91  }, 'Can animate typed custom property in shadow');
     92 </script>
     93 
     94 <div id=can_animate_untyped_custom_property_in_shadow>
     95  <template shadowrootmode=open>
     96    <style>
     97      @keyframes --anim {
     98        from { --untyped: --from(); }
     99        to { --untyped: --to(); }
    100      }
    101      @function --from() { result: 0px; }
    102      @function --to() { result: 100px; }
    103      div {
    104        animation: --anim 1000s linear paused forwards;
    105      }
    106      #t00 { animation-delay: 0s; }
    107      #t04 { animation-delay: -400s; }
    108      #t05 { animation-delay: -500s; }
    109      #t06 { animation-delay: -600s; }
    110      #t10 { animation-delay: -1000s; }
    111    </style>
    112    <div id=t00></div>
    113    <div id=t04></div>
    114    <div id=t05></div>
    115    <div id=t06></div>
    116    <div id=t10></div>
    117  </template>
    118 </div>
    119 <script>
    120  test(() => {
    121    let sr = can_animate_untyped_custom_property_in_shadow.shadowRoot;
    122    let gCS = (id) => getComputedStyle(sr.querySelector(id))
    123    assert_equals(gCS('#t00').getPropertyValue('--untyped'), '0px');
    124    assert_equals(gCS('#t04').getPropertyValue('--untyped'), '0px');
    125    assert_equals(gCS('#t05').getPropertyValue('--untyped'), '100px');
    126    assert_equals(gCS('#t06').getPropertyValue('--untyped'), '100px');
    127    assert_equals(gCS('#t10').getPropertyValue('--untyped'), '100px');
    128  }, 'Can animate untyped custom property in shadow');
    129 </script>