setting-the-target-effect-of-an-animation.html

<!DOCTYPE html>
<meta charset=utf-8>
<title>Setting the target effect of an animation</title>
<link rel='help' href='https://drafts.csswg.org/web-animations/#setting-the-target-effect'>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='../../testcommon.js'></script>
<body>
<div id='log'></div>
<script>
'use strict';

promise_test(t => {
  const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
                                    100 * MS_PER_SEC);
  assert_true(anim.pending);

  const originalReadyPromise = anim.ready.catch(err => {
    assert_unreached('Original ready promise should not be rejected');
  });

  anim.effect = null;
  assert_equals(anim.playState, 'finished');
  assert_true(anim.pending);

  return originalReadyPromise;
}, 'If new effect is null and old effect is not null the animation becomes'
   + ' finish-pending');

promise_test(async t => {
  const anim = new Animation();
  anim.pause();
  assert_true(anim.pending);

  anim.effect = new KeyframeEffect(createDiv(t),
                                   { marginLeft: [ '0px', '100px' ] },
                                   100 * MS_PER_SEC);
  assert_true(anim.pending);
  await anim.ready;

  assert_false(anim.pending);
  assert_equals(anim.playState, 'paused');
}, 'If animation has a pending pause task, reschedule that task to run ' +
   'as soon as animation is ready.');

promise_test(async t => {
  const anim = new Animation();
  anim.play();
  assert_true(anim.pending);

  anim.effect = new KeyframeEffect(createDiv(t),
                                   { marginLeft: [ '0px', '100px' ] },
                                   100 * MS_PER_SEC);
  assert_true(anim.pending);
  await anim.ready;

  assert_false(anim.pending);
  assert_equals(anim.playState, 'running');
}, 'If animation has a pending play task, reschedule that task to run ' +
   'as soon as animation is ready to play new effect.');

promise_test(async t => {
  const anim = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
                                    100 * MS_PER_SEC);
  assert_equals(anim.playState, 'running');
  assert_true(anim.pending);

  const originalEffect = anim.effect;
  const originalReadyPromise = anim.ready;

  anim.effect = null;
  assert_equals(anim.playState, 'finished');
  assert_true(anim.pending);

  anim.effect = originalEffect;
  assert_equals(anim.playState, 'running');
  assert_true(anim.pending);

  await originalReadyPromise;

  assert_equals(anim.playState, 'running');
  assert_false(anim.pending);
}, 'The pending play task should be rescheduled even after temporarily setting'
   + ' the effect to null');

promise_test(async t => {
  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
                                     100 * MS_PER_SEC);
  const animB = new Animation();

  await animA.ready;

  animB.effect = animA.effect;
  assert_equals(animA.effect, null);
  assert_equals(animA.playState, 'finished');
}, 'When setting the effect of an animation to the effect of an existing ' +
   'animation, the existing animation\'s target effect should be set to null.');

test(t => {
  const animA = createDiv(t).animate({ marginLeft: [ '0px', '100px' ] },
                                     100 * MS_PER_SEC);
  const animB = new Animation();
  const effect = animA.effect;
  animA.currentTime = 50 * MS_PER_SEC;
  animB.currentTime = 20 * MS_PER_SEC;
  assert_equals(effect.getComputedTiming().progress, 0.5,
                'Original timing comes from first animation');
  animB.effect = effect;
  assert_equals(effect.getComputedTiming().progress, 0.2,
                'After setting the effect on a different animation, ' +
                'it uses the new animation\'s timing');
}, 'After setting the target effect of animation to the target effect of an ' +
   'existing animation, the target effect\'s timing is updated to reflect ' +
   'the current time of the new animation.');

promise_test(async t => {
  const anim = createDiv(t).animate(null, 100 * MS_PER_SEC);
  anim.updatePlaybackRate(2);
  assert_equals(anim.playbackRate, 1);

  anim.effect = null;
  await anim.ready;

  assert_equals(anim.playbackRate, 2);
}, 'Setting the target effect to null causes a pending playback rate to be'
   + ' applied');

</script>
</body>
chromium/third_party/blink/web_tests/external/wpt/web-animations/timing-model/animations/setting-the-target-effect-of-an-animation.html
