tor-browser

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

KeyframeEffect-setKeyframes.tentative.html (3650B)

      1 <!doctype html>
      2 <meta charset=utf-8>
      3 <title>KeyframeEffect.setKeyframes() for CSS animations</title>
      4 <!-- TODO: Add a more specific link for this once it is specified. -->
      5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/">
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="support/testcommon.js"></script>
      9 <style>
     10 @keyframes anim-simple {
     11  from { left: 0px }
     12  to   { left: 100px }
     13 }
     14 </style>
     15 <body>
     16 <div id="log"></div>
     17 <script>
     18 "use strict";
     19 
     20 // Note that the sanity check that getKeyframes() normally DOES return the
     21 // updated keyframes is contained in KeyframeEffect-getKeyframes.html.
     22 test(t => {
     23  const div = addDiv(t);
     24 
     25  // Add custom @keyframes rule
     26  const stylesheet = document.styleSheets[0];
     27  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
     28  const ruleIndex = stylesheet.insertRule(keyframes, 0);
     29  const keyframesRule = stylesheet.cssRules[ruleIndex];
     30 
     31  t.add_cleanup(function() {
     32    stylesheet.deleteRule(ruleIndex);
     33  });
     34 
     35  div.style.animation = 'anim-custom 100s';
     36 
     37  // Update the keyframes via the API
     38  const animation = div.getAnimations()[0];
     39  animation.effect.setKeyframes({ left: '200px' });
     40 
     41  // Then update them via style
     42  keyframesRule.deleteRule(0);
     43  keyframesRule.appendRule('to { left: 300px }');
     44 
     45  // The result should be the keyframes as set by the API, not via style.
     46  const frames = animation.effect.getKeyframes();
     47  assert_frames_equal(
     48    frames[frames.length - 1],
     49    {
     50      offset: null,
     51      computedOffset: 1,
     52      easing: 'linear',
     53      composite: 'auto',
     54      left: '200px',
     55    },
     56    'Keyframes reflect the value set via setKeyframes'
     57  );
     58 }, 'KeyframeEffect.setKeyframes() causes subsequent changes to @keyframes'
     59   + ' rules to be ignored');
     60 
     61 test(t => {
     62  const div = addDiv(t);
     63  div.style.animation = 'anim-simple 100s';
     64 
     65  const animation = div.getAnimations()[0];
     66  assert_equals(animation.effect.getKeyframes()[0].easing, 'ease');
     67 
     68  animation.effect.setKeyframes({ left: ['200px', '300px'] });
     69  assert_equals(animation.effect.getKeyframes()[0].easing, 'linear');
     70 
     71  div.style.animationTimingFunction = 'ease-in';
     72  getComputedStyle(div).animationTimingFunction;
     73 
     74  assert_equals(
     75    animation.effect.getKeyframes()[0].easing,
     76    'linear',
     77    'Easing should be the easing set by the API'
     78  );
     79 }, 'KeyframeEffect.setKeyframes() causes subsequent changes to'
     80   + ' animation-timing-function to be ignored');
     81 
     82 test(t => {
     83  const div = addDiv(t);
     84 
     85  const stylesheet = document.styleSheets[0];
     86  const keyframes = '@keyframes anim-custom { to { left: 100px } }';
     87  const ruleIndex = stylesheet.insertRule(keyframes, 0);
     88  const keyframesRule = stylesheet.cssRules[ruleIndex];
     89 
     90  t.add_cleanup(function() {
     91    stylesheet.deleteRule(ruleIndex);
     92  });
     93 
     94  div.style.animation = 'anim-custom 100s';
     95 
     96  // Try updating in a way that throws an error
     97  const animation = div.getAnimations()[0];
     98  assert_throws_js(TypeError, () => {
     99    animation.effect.setKeyframes({ left: '200px', offset: 'yer' });
    100  });
    101 
    102  keyframesRule.deleteRule(0);
    103  keyframesRule.appendRule('to { left: 300px }');
    104 
    105  // The result should be the keyframes as set via style.
    106  const frames = animation.effect.getKeyframes();
    107  assert_frames_equal(
    108    frames[frames.length - 1],
    109    {
    110      offset: 1,
    111      computedOffset: 1,
    112      easing: 'ease',
    113      composite: 'auto',
    114      left: '300px',
    115    },
    116    'Keyframes reflect the value set via style'
    117  );
    118 }, 'KeyframeEffect.setKeyframes() should NOT cause subsequent changes to'
    119   + ' @keyframes rules to be ignored if it threw');
    120 
    121 </script>
    122 </body>