animation-play-state-005.tentative.html (1630B)
1 <!DOCTYPE html> 2 <meta charset=utf-8> 3 <title>CSS animations shouldn't restart after resetting its play state</title> 4 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#animation-play-state"> 5 <link rel="help" href="https://drafts.csswg.org/web-animations-1/#playing-an-animation-section"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7145"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/testcommon.js"></script> 10 <style> 11 @keyframes anim { 12 from { transform: translateX(100px); } 13 to { transform: translateX(200px); } 14 } 15 </style> 16 <body> 17 <div id="log"></div> 18 <script> 19 'use strict'; 20 21 // Check that the auto-rewind flag is set to false when playing an animation in 22 // response to a change in animation-play-state. 23 promise_test(async t => { 24 const div = addDiv(t, { style: 'animation: anim 100ms' }); 25 26 await new Promise(function (resolve) { 27 div.addEventListener('animationend', () => { 28 // After the animation ends, change animation-play-state to paused, flush, 29 // then change it back to running to trigger the re-start. 30 div.style.animationPlayState = 'paused'; 31 getComputedStyle(div).animationPlayState; 32 div.style.animationPlayState = 'running'; 33 getComputedStyle(div).animationPlayState; 34 resolve(); 35 }); 36 }); 37 38 // Check the animation has not restarted. 39 assert_equals(div.getAnimations().length, 0); 40 assert_equals(getComputedStyle(div).transform, 'none'); 41 }, 'CSS animation should not restart after resetting its animation-play-state'); 42 43 </script> 44 </body>