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

test(t => {
  const anim = addDiv(t).animate(
    { marginLeft: ['0px', '10px'] },
    {
      duration: 100 * MS_PER_SEC,
      iterations: 10,
      iterationComposite: 'accumulate',
      composite: 'add',
    }
  );
  assert_false(
    'iterationComposite' in anim.effect,
    'The KeyframeEffect.iterationComposite member is not present'
  );
  assert_false(
    'composite' in anim.effect,
    'The KeyframeEffect.composite member is not present'
  );
}, 'The iterationComposite and composite members are not present on Animation'
   + ' when the compositing pref is disabled');

test(t => {
  const div = addDiv(t);
  const anim = div.animate(
    { marginLeft: ['0px', '10px'] },
    {
      duration: 100 * MS_PER_SEC,
      iterations: 10,
      iterationComposite: 'accumulate',
    }
  );
  anim.pause();
  anim.currentTime = 200 * MS_PER_SEC;

  assert_equals(
    getComputedStyle(div).marginLeft,
    '0px',
    'Animated style should NOT accumulate'
  );
}, 'KeyframeEffectOptions.iterationComposite should be ignored if the'
   + ' compositing pref is disabled');

test(t => {
  const div = addDiv(t);
  const anim1 = div.animate(
    { marginLeft: ['0px', '100px'] },
    { duration: 100 * MS_PER_SEC }
  );
  anim1.pause();
  anim1.currentTime = 50 * MS_PER_SEC;

  const anim2 = div.animate(
    { marginLeft: ['0px', '100px'] },
    { duration: 100 * MS_PER_SEC, composite: 'add' }
  );
  anim2.pause();
  anim2.currentTime = 50 * MS_PER_SEC;

  assert_equals(
    getComputedStyle(div).marginLeft,
    '50px',
    'Animations should NOT add together'
  );
}, 'KeyframeEffectOptions.composite should be ignored if the'
   + ' compositing pref is disabled');

test(t => {
  const div = addDiv(t);
  const anim1 = div.animate({ marginLeft: ['0px', '100px'] }, 100 * MS_PER_SEC);
  anim1.pause();
  anim1.currentTime = 50 * MS_PER_SEC;

  const anim2 = div.animate(
    [
      { marginLeft: '0px', composite: 'add' },
      { marginLeft: '100px', composite: 'add' },
    ],
    100 * MS_PER_SEC
  );
  anim2.pause();
  anim2.currentTime = 50 * MS_PER_SEC;

  assert_equals(
    getComputedStyle(div).marginLeft,
    '50px',
    'Animations should NOT add together'
  );
}, 'composite member is ignored on keyframes when using array notation');

test(t => {
  const div = addDiv(t);
  const anim1 = div.animate(
    { marginLeft: ['0px', '100px'] },
    100 * MS_PER_SEC
  );
  anim1.pause();
  anim1.currentTime = 50 * MS_PER_SEC;

  const anim2 = div.animate(
    { marginLeft: ['0px', '100px'], composite: ['add', 'add'] },
    100 * MS_PER_SEC
  );
  anim2.pause();
  anim2.currentTime = 50 * MS_PER_SEC;

  assert_equals(
    getComputedStyle(div).marginLeft,
    '50px',
    'Animations should NOT add together'
  );
}, 'composite member is ignored on keyframes when using object notation');

test(t => {
  const anim = addDiv(t).animate(
    { marginLeft: ['0px', '10px'] },
    100 * MS_PER_SEC
  );

  for (let frame of anim.effect.getKeyframes()) {
    assert_false(
      'composite' in frame,
      'The BaseComputedKeyframe.composite member is not present'
    );
  }
}, 'composite member is hidden from the result of ' +
   'KeyframeEffect::getKeyframes()');

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