copy-constructor.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /web-animations/interfaces/KeyframeEffect/copy-constructor.html - WPT Dashboard Interop Dashboard

<!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>