<!doctype html>
<meta charset=utf-8>
<title>Update animations and send events (replacement)</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#update-animations-and-send-events">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../testcommon.js"></script>
<style>
@keyframes opacity-animation {
  to { opacity: 1 }
}
</style>
<div id="log"></div>
<script>
'use strict';

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation when another covers the same properties');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after another animation finishes');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1, width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  const animB = div.animate(
    { width: '200px' },
    { duration: 1, fill: 'forwards' }
  );
  await animB.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  const animC = div.animate(
    { opacity: 0.5 },
    { duration: 1, fill: 'forwards' }
  );
  await animC.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
  assert_equals(animC.replaceState, 'active');
}, 'Removes an animation after multiple other animations finish');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animB.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  // Seek animA to just before it finishes since we want to test the behavior
  // when the animation finishes by the ticking of the timeline, not by seeking
  // (that is covered in a separate test).

  animA.currentTime = 99.99 * MS_PER_SEC;
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after it finishes');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.finish();

  // Replacement should not happen until the next time the "update animations
  // and send events" procedure runs.

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after seeking another animation');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.finish();

  // Replacement should not happen until the next time the "update animations
  // and send events" procedure runs.

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after seeking it');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, 1);
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect.updateTiming({ fill: 'forwards' });

  // Replacement should not happen until the next time the "update animations
  // and send events" procedure runs.

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating the fill mode of another animation');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, 1);
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect.updateTiming({ fill: 'forwards' });

  // Replacement should not happen until the next time the "update animations
  // and send events" procedure runs.

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating its fill mode');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, 1);
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect = new KeyframeEffect(
    div,
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's effect to one with different timing");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, 1);
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect = new KeyframeEffect(
    div,
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating its effect to one with different timing');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );

  await animA.finished;

  // Set up a timeline that makes animB finished
  animB.timeline = new DocumentTimeline({
    originTime:
      document.timeline.currentTime - 100 * MS_PER_SEC - animB.startTime,
  });

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's timeline");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  await animB.finished;

  // Set up a timeline that makes animA finished
  animA.timeline = new DocumentTimeline({
    originTime:
      document.timeline.currentTime - 100 * MS_PER_SEC - animA.startTime,
  });

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating its timeline');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect.setKeyframes({ width: '100px', opacity: 1 });

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's effect's properties");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1, width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { width: '200px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect.setKeyframes({ width: '100px' });

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating its effect's properties");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect = new KeyframeEffect(
    div,
    { width: '100px', opacity: 1 },
    { duration: 1, fill: 'forwards' }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's effect to one with different properties");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1, width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { width: '200px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect = new KeyframeEffect(
    div,
    { width: '100px' },
    {
      duration: 1,
      fill: 'forwards',
    }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating its effect to one with different properties');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { marginLeft: '10px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { margin: '20px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation when another animation uses a shorthand');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { margin: '10px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    {
      marginLeft: '10px',
      marginTop: '20px',
      marginRight: '30px',
      marginBottom: '40px',
    },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation that uses a shorthand');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { marginLeft: '10px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { marginInlineStart: '20px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation by another animation using logical properties');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { marginInlineStart: '10px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { marginLeft: '20px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation using logical properties');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { marginTop: '10px' },
    { duration: 1, fill: 'forwards' }
  );
  const animB = div.animate(
    { marginInlineStart: '20px' },
    { duration: 1, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  div.style.writingMode = 'vertical-rl';

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation by another animation using logical properties after updating the context');

promise_test(async t => {
  const divA = createDiv(t);
  const divB = createDiv(t);

  const animA = divA.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = divB.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect.target = divA;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's effect's target");

promise_test(async t => {
  const divA = createDiv(t);
  const divB = createDiv(t);

  const animA = divA.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = divB.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect.target = divB;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating its effect's target");

promise_test(async t => {
  const divA = createDiv(t);
  const divB = createDiv(t);

  const animA = divA.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = divB.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animB.effect = new KeyframeEffect(
    divA,
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, "Removes an animation after updating another animation's effect to one with a different target");

promise_test(async t => {
  const divA = createDiv(t);
  const divB = createDiv(t);

  const animA = divA.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = divB.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  animA.effect = new KeyframeEffect(
    divB,
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );

  assert_equals(animA.replaceState, 'active');
  assert_equals(animB.replaceState, 'active');

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Removes an animation after updating its effect to one with a different target');

promise_test(async t => {
  const div = createDiv(t);
  div.style.animation = 'opacity-animation 1ms forwards';
  const cssAnimation = div.getAnimations()[0];

  const scriptAnimation = div.animate(
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  await scriptAnimation.finished;

  assert_equals(cssAnimation.replaceState, 'active');
  assert_equals(scriptAnimation.replaceState, 'active');
}, 'Does NOT remove a CSS animation tied to markup');

promise_test(async t => {
  const div = createDiv(t);
  div.style.animation = 'opacity-animation 1ms forwards';
  const cssAnimation = div.getAnimations()[0];

  // Break tie to markup
  div.style.animationName = 'none';
  assert_equals(cssAnimation.playState, 'idle');

  // Restart animation
  cssAnimation.play();

  const scriptAnimation = div.animate(
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  await scriptAnimation.finished;

  assert_equals(cssAnimation.replaceState, 'removed');
  assert_equals(scriptAnimation.replaceState, 'active');
}, 'Removes a CSS animation no longer tied to markup');

promise_test(async t => {
  // Setup transition
  const div = createDiv(t);
  div.style.opacity = '0';
  div.style.transition = 'opacity 1ms';
  getComputedStyle(div).opacity;
  div.style.opacity = '1';
  const cssTransition = div.getAnimations()[0];
  cssTransition.effect.updateTiming({ fill: 'forwards' });

  const scriptAnimation = div.animate(
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  await scriptAnimation.finished;

  assert_equals(cssTransition.replaceState, 'active');
  assert_equals(scriptAnimation.replaceState, 'active');
}, 'Does NOT remove a CSS transition tied to markup');

promise_test(async t => {
  // Setup transition
  const div = createDiv(t);
  div.style.opacity = '0';
  div.style.transition = 'opacity 1ms';
  getComputedStyle(div).opacity;
  div.style.opacity = '1';
  const cssTransition = div.getAnimations()[0];
  cssTransition.effect.updateTiming({ fill: 'forwards' });

  // Break tie to markup
  div.style.transitionProperty = 'none';
  assert_equals(cssTransition.playState, 'idle');

  // Restart transition
  cssTransition.play();

  const scriptAnimation = div.animate(
    { opacity: 1 },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  await scriptAnimation.finished;

  assert_equals(cssTransition.replaceState, 'removed');
  assert_equals(scriptAnimation.replaceState, 'active');
}, 'Removes a CSS transition no longer tied to markup');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const eventWatcher = new EventWatcher(t, animA, 'remove');

  const event = await eventWatcher.wait_for('remove');

  assert_equals(event.timelineTime, document.timeline.currentTime);
  assert_equals(event.currentTime, 1);
}, 'Dispatches an event when removing');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const eventWatcher = new EventWatcher(t, animA, 'remove');

  await eventWatcher.wait_for('remove');

  // Check we don't get another event
  animA.addEventListener(
    'remove',
    t.step_func(() => {
      assert_unreached('remove event should not be fired a second time');
    })
  );

  // Restart animation
  animA.play();

  await waitForNextFrame();

  // Finish animation
  animA.finish();

  await waitForNextFrame();
}, 'Does NOT dispatch a remove event twice');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  animB.finish();
  animB.currentTime = 0;

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, "Does NOT remove an animation after making a redundant change to another animation's current time");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animA.replaceState, 'active');

  animA.finish();
  animA.currentTime = 0;

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, 'Does NOT remove an animation after making a redundant change to its current time');

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  // Set up a timeline that makes animB finished but then restore it
  animB.timeline = new DocumentTimeline({
    originTime:
      document.timeline.currentTime - 100 * MS_PER_SEC - animB.startTime,
  });
  animB.timeline = document.timeline;

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, "Does NOT remove an animation after making a redundant change to another animation's timeline");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate(
    { opacity: 1 },
    { duration: 100 * MS_PER_SEC, fill: 'forwards' }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animB.finished;

  assert_equals(animA.replaceState, 'active');

  // Set up a timeline that makes animA finished but then restore it
  animA.timeline = new DocumentTimeline({
    originTime:
      document.timeline.currentTime - 100 * MS_PER_SEC - animA.startTime,
  });
  animA.timeline = document.timeline;

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, 'Does NOT remove an animation after making a redundant change to its timeline');

promise_test(async t => {
  const div = createDiv(t);
  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { marginLeft: '100px' },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  // Redundant change
  animB.effect.setKeyframes({ marginLeft: '100px', opacity: 1 });
  animB.effect.setKeyframes({ marginLeft: '100px' });

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, "Does NOT remove an animation after making a redundant change to another animation's effect's properties");

promise_test(async t => {
  const div = createDiv(t);
  const animA = div.animate(
    { marginLeft: '100px' },
    {
      duration: 1,
      fill: 'forwards',
    }
  );
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  await animA.finished;

  assert_equals(animA.replaceState, 'active');

  // Redundant change
  animA.effect.setKeyframes({ opacity: 1 });
  animA.effect.setKeyframes({ marginLeft: '100px' });

  await waitForNextFrame();

  assert_equals(animA.replaceState, 'active');
}, "Does NOT remove an animation after making a redundant change to its effect's properties");

promise_test(async t => {
  const div = createDiv(t);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  animB.timeline = new DocumentTimeline();

  await animA.finished;

  // If, for example, we only update the timeline for animA before checking
  // replacement state, then animB will not be finished and animA will not be
  // replaced.

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Updates ALL timelines before checking for replacement');

promise_test(async t => {
  const div = createDiv(t);
  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const events = [];
  const logEvent = (targetName, eventType) => {
    events.push(`${targetName}:${eventType}`);
  };

  animA.addEventListener('finish', () => logEvent('animA', 'finish'));
  animA.addEventListener('remove', () => logEvent('animA', 'remove'));
  animB.addEventListener('finish', () => logEvent('animB', 'finish'));
  animB.addEventListener('remove', () => logEvent('animB', 'remove'));

  await animA.finished;

  // Allow all events to be dispatched

  await waitForNextFrame();

  assert_array_equals(events, [
    'animA:finish',
    'animB:finish',
    'animA:remove',
  ]);
}, 'Dispatches remove events after finish events');

promise_test(async t => {
  const div = createDiv(t);
  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  const eventWatcher = new EventWatcher(t, animA, 'remove');

  await animA.finished;

  let rAFReceived = false;
  requestAnimationFrame(() => (rAFReceived = true));

  await eventWatcher.wait_for('remove');

  assert_false(
    rAFReceived,
    'remove event should be fired before requestAnimationFrame'
  );
}, 'Fires remove event before requestAnimationFrame');

promise_test(async t => {
  const div = createDiv(t);
  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate(
    { width: '100px' },
    { duration: 1, fill: 'forwards' }
  );
  const animC = div.animate(
    { opacity: 0.5, width: '200px' },
    { duration: 1, fill: 'forwards' }
  );

  // In the event handler for animA (which should be fired before that of animB)
  // we make a change to animC so that it no longer covers animB.
  //
  // If the remove event for animB is not already queued by this point, it will
  // fail to fire.
  animA.addEventListener('remove', () => {
    animC.effect.setKeyframes({
      opacity: 0.5,
    });
  });

  const eventWatcher = new EventWatcher(t, animB, 'remove');
  await eventWatcher.wait_for('remove');

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'removed');
  assert_equals(animC.replaceState, 'active');
}, 'Queues all remove events before running them');

promise_test(async t => {
  const outerIframe = document.createElement('iframe');
  outerIframe.width = 10;
  outerIframe.height = 10;
  await insertFrameAndAwaitLoad(t, outerIframe, document);

  const innerIframe = document.createElement('iframe');
  innerIframe.width = 10;
  innerIframe.height = 10;
  await insertFrameAndAwaitLoad(t, innerIframe, outerIframe.contentDocument);

  const div = createDiv(t, innerIframe.contentDocument);

  const animA = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });
  const animB = div.animate({ opacity: 1 }, { duration: 1, fill: 'forwards' });

  // Sanity check: The timeline for these animations should be the default
  // document timeline for div.
  assert_equals(animA.timeline, innerIframe.contentDocument.timeline);
  assert_equals(animB.timeline, innerIframe.contentDocument.timeline);

  await animA.finished;

  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');
}, 'Performs removal in deeply nested iframes');

</script>