animation-restarted-after-changing-iteration-count-after-completion.html (1247B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Setting 'animation-iteration-count: infinite' after a CSS Animation is completed restarts the animation</title> 6 <link rel="help" href="https://www.w3.org/TR/css-animations-1/#animation-iteration-count"> 7 <style> 8 9 @keyframes anim { 10 to { margin-left: 100px } 11 } 12 13 </style> 14 </head> 15 <body> 16 <script src=/resources/testharness.js></script> 17 <script src=/resources/testharnessreport.js></script> 18 <div id="target"></div> 19 <script> 20 21 promise_test(async test => { 22 const target = document.getElementById("target"); 23 target.style.animation = "anim 0.1s linear"; 24 25 const initialAnimations = target.getAnimations(); 26 assert_equals(initialAnimations.length, 1, "An animation runs initially."); 27 28 await initialAnimations[0].finished; 29 assert_equals(target.getAnimations().length, 0, "An animation no longer runs after its completion."); 30 31 await new Promise(setTimeout); 32 target.style.animationIterationCount = "infinite"; 33 assert_equals(target.getAnimations().length, 1, "An animation runs again once animation-iteration-count is set."); 34 }, "Setting 'animation-iteration-count: infinite' after a CSS Animation is completed restarts the animation."); 35 36 </script> 37 </body> 38 </html>