<!doctype html>
<meta charset=utf-8>
<script src="../testcommon.js"></script>
<body>
<script>
'use strict';

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

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

  // This should be assert_not_own_property but our local copy of testharness.js
  // is old.
  assert_equals(
    animA.replaceState,
    undefined,
    'Should not have a replaceState member'
  );

  animA.addEventListener(
    'remove',
    t.step_func(() => {
      assert_unreached('Should not fire a remove event');
    })
  );

  // Allow a chance for the remove event to be fired

  await animA.finished;
  await waitForNextFrame();
}, 'Remove events should not be fired if the pref is not set');

promise_test(async t => {
  const div = addDiv(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_approx_equals(
    parseFloat(getComputedStyle(div).opacity),
    0.5,
    0.0001,
    'Covered animation should still contribute to effect stack when adding'
  );

  animB.cancel();

  assert_approx_equals(
    parseFloat(getComputedStyle(div).opacity),
    0.2,
    0.0001,
    'Covered animation should still contribute to animated style when replacing'
  );
}, 'Covered animations should still affect style if the pref is not set');

done();
</script>
</body>
