<!DOCTYPE html>
<meta charset=utf-8>
<title>KeyframeEffect copy constructor</title>
<link rel="help"
      href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect-source">
<link rel="help"
      href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source">
<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';

test(t => {
  const effect = new KeyframeEffect(createDiv(t), null);
  const copiedEffect = new KeyframeEffect(effect);
  assert_equals(copiedEffect.target, effect.target, 'same target');
}, 'Copied KeyframeEffect has the same target');

test(t => {
  const effect =
    new KeyframeEffect(null,
                       [ { marginLeft: '0px' },
                         { marginLeft: '-20px', easing: 'ease-in',
                           offset: 0.1 },
                         { marginLeft: '100px', easing: 'ease-out' },
                         { marginLeft: '50px' } ]);

  const copiedEffect = new KeyframeEffect(effect);
  const keyframesA = effect.getKeyframes();
  const keyframesB = copiedEffect.getKeyframes();
  assert_equals(keyframesA.length, keyframesB.length, 'same keyframes length');

  for (let i = 0; i < keyframesA.length; ++i) {
    assert_equals(keyframesA[i].offset, keyframesB[i].offset,
                  `Keyframe ${i} has the same offset`);
    assert_equals(keyframesA[i].computedOffset, keyframesB[i].computedOffset,
                  `Keyframe ${i} has the same computedOffset`);
    assert_equals(keyframesA[i].easing, keyframesB[i].easing,
                  `Keyframe ${i} has the same easing`);
    assert_equals(keyframesA[i].composite, keyframesB[i].composite,
                  `Keyframe ${i} has the same composite`);

    assert_true(!!keyframesA[i].marginLeft,
                `Original keyframe ${i} has a valid property value`);
    assert_true(!!keyframesB[i].marginLeft,
                `New keyframe ${i} has a valid property value`);
    assert_equals(keyframesA[i].marginLeft, keyframesB[i].marginLeft,
                  `Keyframe ${i} has the same property value pair`);
  }
}, 'Copied KeyframeEffect has the same keyframes');

test(t => {
  const effect =
    new KeyframeEffect(null, null, { iterationComposite: 'accumulate' });

  const copiedEffect = new KeyframeEffect(effect);
  assert_equals(copiedEffect.iterationComposite, effect.iterationComposite,
                'same iterationCompositeOperation');
  assert_equals(copiedEffect.composite, effect.composite,
                'same compositeOperation');
}, 'Copied KeyframeEffect has the same KeyframeEffectOptions');

test(t => {
  const effect = new KeyframeEffect(null, null,
                                    { duration: 100 * MS_PER_SEC,
                                      delay: -1 * MS_PER_SEC,
                                      endDelay: 2 * MS_PER_SEC,
                                      fill: 'forwards',
                                      iterationStart: 2,
                                      iterations: 20,
                                      easing: 'ease-out',
                                      direction: 'alternate' } );

  const copiedEffect = new KeyframeEffect(effect);
  const timingA = effect.getTiming();
  const timingB = copiedEffect.getTiming();
  assert_not_equals(timingA, timingB, 'different timing objects');
  assert_equals(timingA.delay, timingB.delay, 'same delay');
  assert_equals(timingA.endDelay, timingB.endDelay, 'same endDelay');
  assert_equals(timingA.fill, timingB.fill, 'same fill');
  assert_equals(timingA.iterationStart, timingB.iterationStart,
                'same iterationStart');
  assert_equals(timingA.iterations, timingB.iterations, 'same iterations');
  assert_equals(timingA.duration, timingB.duration, 'same duration');
  assert_equals(timingA.direction, timingB.direction, 'same direction');
  assert_equals(timingA.easing, timingB.easing, 'same easing');
}, 'Copied KeyframeEffect has the same timing content');

</script>
</body>