iterationComposite.html (1350B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>KeyframeEffect.iterationComposite</title> 4 <link rel="help" href="https://drafts.csswg.org/web-animations/#dom-keyframeeffect-iterationcomposite"> 5 <script src=/resources/testharness.js></script> 6 <script src=/resources/testharnessreport.js></script> 7 <script src="../../testcommon.js"></script> 8 <div id="log"></div> 9 <script> 10 'use strict'; 11 12 test(t => { 13 const div = createDiv(t); 14 const anim = div.animate({ marginLeft: ['0px', '10px'] }, 15 { duration: 100 * MS_PER_SEC, 16 easing: 'linear', 17 iterations: 10, 18 iterationComposite: 'accumulate' }); 19 anim.pause(); 20 21 anim.currentTime = 22 anim.effect.getComputedTiming().duration * 2 + 23 anim.effect.getComputedTiming().duration / 2; 24 assert_equals(getComputedStyle(div).marginLeft, '25px', 25 'Animated style at 50s of the third iteration'); 26 27 anim.effect.iterationComposite = 'replace'; 28 assert_equals(getComputedStyle(div).marginLeft, '5px', 29 'Animated style at 50s of the third iteration'); 30 31 anim.effect.iterationComposite = 'accumulate'; 32 assert_equals(getComputedStyle(div).marginLeft, '25px', 33 'Animated style at 50s of the third iteration'); 34 }, 'iterationComposite can be updated while an animation is in progress'); 35 36 </script>