CSSAnimation-playState.tentative.html (1988B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSSAnimation.playState</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-animations-2/#cssanimation"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/testcommon.js"></script> 9 <style> 10 @keyframes anim { } 11 </style> 12 <div id="log"></div> 13 <script> 14 'use strict'; 15 16 test(t => { 17 const div = addDiv(t, { 'style': 'animation: anim 100s' }); 18 const animation = div.getAnimations()[0]; 19 assert_true(animation.pending); 20 assert_equals(animation.playState, 'running'); 21 assert_equals(animation.startTime, null); 22 }, 'A new CSS animation is initially play-pending'); 23 24 test(t => { 25 const div = addDiv(t, { 'style': 'animation: anim 1000s paused' }); 26 const animation = div.getAnimations()[0]; 27 assert_equals(animation.playState, 'paused'); 28 }, 'Animation returns correct playState when paused'); 29 30 test(t => { 31 const div = addDiv(t, { 'style': 'animation: anim 1000s' }); 32 const animation = div.getAnimations()[0]; 33 animation.pause(); 34 assert_equals(animation.playState, 'paused'); 35 }, 'Animation.playState updates when paused by script'); 36 37 test(t => { 38 const div = addDiv(t, { 'style': 'animation: anim 1000s paused' }); 39 const animation = div.getAnimations()[0]; 40 div.style.animationPlayState = 'running'; 41 42 // This test also checks that calling playState flushes style 43 assert_equals(animation.playState, 'running', 44 'Animation.playState reports running after updating' 45 + ' animation-play-state (got: ' + animation.playState + ')'); 46 }, 'Animation.playState updates when resumed by setting style'); 47 48 test(t => { 49 const div = addDiv(t, { 'style': 'animation: anim 1000s' }); 50 const animation = div.getAnimations()[0]; 51 animation.cancel(); 52 assert_equals(animation.playState, 'idle'); 53 }, 'Animation returns correct playState when canceled'); 54 55 </script>