<!doctype html>
<meta charset=utf-8>
<title>The effect value of a keyframe effect: Overlapping keyframes</title>
<link rel="help" href="https://drafts.csswg.org/web-animations/#the-effect-value-of-a-keyframe-animation-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';

function assert_opacity_value(opacity, expected, description) {
  return assert_approx_equals(
    parseFloat(opacity),
    expected,
    0.0001,
    description
  );
}

promise_test(async t => {
  const div = createDiv(t);
  div.style.opacity = '0.1';

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

  // Sanity check
  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');

  // animA is now removed so if we cancel animB, we should go back to the
  // underlying value
  animB.cancel();
  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.1,
    'Opacity should be the un-animated value'
  );
}, 'Removed animations do not contribute to animated style');

promise_test(async t => {
  const div = createDiv(t);
  div.style.opacity = '0.1';

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

  // Sanity check
  assert_equals(animA.replaceState, 'removed');
  assert_equals(animB.replaceState, 'active');

  // animA has been removed so the final result should be 0.1 + 0.3 = 0.4.
  // (If animA were not removed it would be 0.2 + 0.3 = 0.5.)
  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.4,
    'Opacity value should not include the removed animation'
  );
}, 'Removed animations do not contribute to the effect stack');

promise_test(async t => {
  const div = createDiv(t);
  div.style.opacity = '0.1';

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

  await animA.finished;

  animA.persist();

  animB.cancel();
  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.2,
    "Opacity should be the persisted animation's value"
  );
}, 'Persisted animations contribute to animated style');

promise_test(async t => {
  const div = createDiv(t);
  div.style.opacity = '0.1';

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

  await animA.finished;

  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.4,
    'Opacity value should NOT include the contribution of the removed animation'
  );

  animA.persist();

  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.5,
    'Opacity value should include the contribution of the persisted animation'
  );
}, 'Persisted animations contribute to the effect stack');

promise_test(async t => {
  const div = createDiv(t);
  div.style.opacity = '0.1';

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

  // Persist the animation before it finishes (and before it would otherwise be
  // removed).
  animA.persist();

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

  await animA.finished;

  assert_opacity_value(
    getComputedStyle(div).opacity,
    0.5,
    'Opacity value should include the contribution of the persisted animation'
  );
}, 'Animations persisted before they would be removed contribute to the'
   + ' effect stack');

</script>
</body>