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