tor-browser

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

setting-the-target-effect-of-an-animation.html (4361B)

      1 <!DOCTYPE html>
      2 <meta charset=utf-8>
      3 <title>Setting the target effect of an animation</title>
      4 <link rel='help' href='https://drafts.csswg.org/web-animations/#setting-the-target-effect'>
      5 <script src='/resources/testharness.js'></script>
      6 <script src='/resources/testharnessreport.js'></script>
      7 <script src='../../testcommon.js'></script>
      8 <body>
      9 <div id='log'></div>
     10 <script>
     11 'use strict';
     12 
     13 promise_test(t => {
     14  const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
     15                                    100 * MS_PER_SEC);
     16  assert_true(anim.pending);
     17 
     18  const originalReadyPromise = anim.ready.catch(err => {
     19    assert_unreached('Original ready promise should not be rejected');
     20  });
     21 
     22  anim.effect = null;
     23  assert_equals(anim.playState, 'finished');
     24  assert_true(anim.pending);
     25 
     26  return originalReadyPromise;
     27 }, 'If new effect is null and old effect is not null the animation becomes'
     28   + ' finish-pending');
     29 
     30 promise_test(async t => {
     31  const anim = new Animation();
     32  anim.pause();
     33  assert_true(anim.pending);
     34 
     35  anim.effect = new KeyframeEffect(createDiv(t),
     36                                   { marginLeft: [ '0px', '100px' ] },
     37                                   100 * MS_PER_SEC);
     38  assert_true(anim.pending);
     39  await anim.ready;
     40 
     41  assert_false(anim.pending);
     42  assert_equals(anim.playState, 'paused');
     43 }, 'If animation has a pending pause task, reschedule that task to run ' +
     44   'as soon as animation is ready.');
     45 
     46 promise_test(async t => {
     47  const anim = new Animation();
     48  anim.play();
     49  assert_true(anim.pending);
     50 
     51  anim.effect = new KeyframeEffect(createDiv(t),
     52                                   { marginLeft: [ '0px', '100px' ] },
     53                                   100 * MS_PER_SEC);
     54  assert_true(anim.pending);
     55  await anim.ready;
     56 
     57  assert_false(anim.pending);
     58  assert_equals(anim.playState, 'running');
     59 }, 'If animation has a pending play task, reschedule that task to run ' +
     60   'as soon as animation is ready to play new effect.');
     61 
     62 promise_test(async t => {
     63  const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
     64                                    100 * MS_PER_SEC);
     65  assert_equals(anim.playState, 'running');
     66  assert_true(anim.pending);
     67 
     68  const originalEffect = anim.effect;
     69  const originalReadyPromise = anim.ready;
     70 
     71  anim.effect = null;
     72  assert_equals(anim.playState, 'finished');
     73  assert_true(anim.pending);
     74 
     75  anim.effect = originalEffect;
     76  assert_equals(anim.playState, 'running');
     77  assert_true(anim.pending);
     78 
     79  await originalReadyPromise;
     80 
     81  assert_equals(anim.playState, 'running');
     82  assert_false(anim.pending);
     83 }, 'The pending play task should be rescheduled even after temporarily setting'
     84   + ' the effect to null');
     85 
     86 promise_test(async t => {
     87  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
     88                                     100 * MS_PER_SEC);
     89  const animB = new Animation();
     90 
     91  await animA.ready;
     92 
     93  animB.effect = animA.effect;
     94  assert_equals(animA.effect, null);
     95  assert_equals(animA.playState, 'finished');
     96 }, 'When setting the effect of an animation to the effect of an existing ' +
     97   'animation, the existing animation\'s target effect should be set to null.');
     98 
     99 test(t => {
    100  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
    101                                     100 * MS_PER_SEC);
    102  const animB = new Animation();
    103  const effect = animA.effect;
    104  animA.currentTime = 50 * MS_PER_SEC;
    105  animB.currentTime = 20 * MS_PER_SEC;
    106  assert_equals(effect.getComputedTiming().progress, 0.5,
    107                'Original timing comes from first animation');
    108  animB.effect = effect;
    109  assert_equals(effect.getComputedTiming().progress, 0.2,
    110                'After setting the effect on a different animation, ' +
    111                'it uses the new animation\'s timing');
    112 }, 'After setting the target effect of animation to the target effect of an ' +
    113   'existing animation, the target effect\'s timing is updated to reflect ' +
    114   'the current time of the new animation.');
    115 
    116 promise_test(async t => {
    117  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
    118  anim.updatePlaybackRate(2);
    119  assert_equals(anim.playbackRate, 1);
    120 
    121  anim.effect = null;
    122  await anim.ready;
    123 
    124  assert_equals(anim.playbackRate, 2);
    125 }, 'Setting the target effect to null causes a pending playback rate to be'
    126   + ' applied');
    127 
    128 </script>
    129 </body>