copy-constructor.html (4860B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>KeyframeEffect copy constructor</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-keyframeeffect-source"> 6 <link rel="help" 7 href="https://drafts.csswg.org/web-animations/#dom-keyframeeffectreadonly-keyframeeffectreadonly-source"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../../testcommon.js"></script> 11 <body> 12 <div id="log"></div> 13 <script> 14 'use strict'; 15 16 test(t => { 17 const effect = new KeyframeEffect(createDiv(t), null); 18 const copiedEffect = new KeyframeEffect(effect); 19 assert_equals(copiedEffect.target, effect.target, 'same target'); 20 }, 'Copied KeyframeEffect has the same target'); 21 22 test(t => { 23 const target = createElement(t, 'input'); 24 target.setAttribute('type', 'input'); 25 target.setAttribute('placeholder', "hello"); 26 let effect = undefined; 27 try { 28 // Pseudo-elements for which the user agent has no usable level of support 29 // are deemed invalid. Test passes if no effect is generated. 30 effect = new KeyframeEffect(target, [], { pseudoElement: '::placeholder' }); 31 } catch (e) {} 32 if (effect) { 33 // If an effect is generated (UA supports the pseudo), then the copy 34 // constructor is to retain the correct target. 35 const copy = new KeyframeEffect(effect); 36 assert_equals(copy.target, target); 37 } 38 }, 'Copied KeyframeEffect does not expose UA-shadow DOM'); 39 40 test(t => { 41 const effect = 42 new KeyframeEffect(null, 43 [ { marginLeft: '0px' }, 44 { marginLeft: '-20px', easing: 'ease-in', 45 offset: 0.1 }, 46 { marginLeft: '100px', easing: 'ease-out' }, 47 { marginLeft: '50px' } ]); 48 49 const copiedEffect = new KeyframeEffect(effect); 50 const keyframesA = effect.getKeyframes(); 51 const keyframesB = copiedEffect.getKeyframes(); 52 assert_equals(keyframesA.length, keyframesB.length, 'same keyframes length'); 53 54 for (let i = 0; i < keyframesA.length; ++i) { 55 assert_equals(keyframesA[i].offset, keyframesB[i].offset, 56 `Keyframe ${i} has the same offset`); 57 assert_equals(keyframesA[i].computedOffset, keyframesB[i].computedOffset, 58 `Keyframe ${i} has the same computedOffset`); 59 assert_equals(keyframesA[i].easing, keyframesB[i].easing, 60 `Keyframe ${i} has the same easing`); 61 assert_equals(keyframesA[i].composite, keyframesB[i].composite, 62 `Keyframe ${i} has the same composite`); 63 64 assert_true(!!keyframesA[i].marginLeft, 65 `Original keyframe ${i} has a valid property value`); 66 assert_true(!!keyframesB[i].marginLeft, 67 `New keyframe ${i} has a valid property value`); 68 assert_equals(keyframesA[i].marginLeft, keyframesB[i].marginLeft, 69 `Keyframe ${i} has the same property value pair`); 70 } 71 }, 'Copied KeyframeEffect has the same keyframes'); 72 73 test(t => { 74 const effect = 75 new KeyframeEffect(null, null, { iterationComposite: 'accumulate' }); 76 77 const copiedEffect = new KeyframeEffect(effect); 78 assert_equals(copiedEffect.iterationComposite, effect.iterationComposite, 79 'same iterationCompositeOperation'); 80 assert_equals(copiedEffect.composite, effect.composite, 81 'same compositeOperation'); 82 }, 'Copied KeyframeEffect has the same KeyframeEffectOptions'); 83 84 test(t => { 85 const effect = new KeyframeEffect(null, null, 86 { duration: 100 * MS_PER_SEC, 87 delay: -1 * MS_PER_SEC, 88 endDelay: 2 * MS_PER_SEC, 89 fill: 'forwards', 90 iterationStart: 2, 91 iterations: 20, 92 easing: 'ease-out', 93 direction: 'alternate' } ); 94 95 const copiedEffect = new KeyframeEffect(effect); 96 const timingA = effect.getTiming(); 97 const timingB = copiedEffect.getTiming(); 98 assert_not_equals(timingA, timingB, 'different timing objects'); 99 assert_equals(timingA.delay, timingB.delay, 'same delay'); 100 assert_equals(timingA.endDelay, timingB.endDelay, 'same endDelay'); 101 assert_equals(timingA.fill, timingB.fill, 'same fill'); 102 assert_equals(timingA.iterationStart, timingB.iterationStart, 103 'same iterationStart'); 104 assert_equals(timingA.iterations, timingB.iterations, 'same iterations'); 105 assert_equals(timingA.duration, timingB.duration, 'same duration'); 106 assert_equals(timingA.direction, timingB.direction, 'same direction'); 107 assert_equals(timingA.easing, timingB.easing, 'same easing'); 108 }, 'Copied KeyframeEffect has the same timing content'); 109 110 </script> 111 </body>