CSSAnimation-startTime.tentative.html (2115B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSSAnimation.startTime</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 11 .animated-div { 12 margin-left: 10px; 13 /* Make it easier to calculate expected values: */ 14 animation-timing-function: linear ! important; 15 } 16 17 @keyframes anim { 18 from { margin-left: 100px; } 19 to { margin-left: 200px; } 20 } 21 22 </style> 23 <div id="log"></div> 24 <script type="text/javascript"> 25 26 'use strict'; 27 28 test(t => { 29 const div = addDiv(t, { 'class': 'animated-div' }); 30 div.style.animation = 'anim 100s 100s'; 31 const animation = div.getAnimations()[0]; 32 33 const timelineTime = animation.timeline.currentTime; 34 animation.startTime = timelineTime; 35 36 assert_times_equal(animation.startTime, timelineTime, 37 'Check setting of startTime actually works'); 38 }, 'The start time of a CSS animation can be set'); 39 40 promise_test(async t => { 41 const div = addDiv(t, { 'class': 'animated-div' }); 42 div.style.animation = 'anim 100s 100s'; 43 const animation = div.getAnimations()[0]; 44 45 // Seek to the half-way point 46 animation.startTime = animation.timeline.currentTime - 150 * MS_PER_SEC; 47 48 assert_equals(getComputedStyle(div).marginLeft, '150px'); 49 }, 'The start time can be set to seek a CSS animation'); 50 51 promise_test(async t => { 52 const div = addDiv(t, { class: 'animated-div' }); 53 const eventWatcher = new EventWatcher(t, div, [ 54 'animationstart', 55 'animationend', 56 ]); 57 div.style.animation = 'anim 100s 100s'; 58 const animation = div.getAnimations()[0]; 59 60 await animation.ready; 61 62 animation.startTime = animation.timeline.currentTime - 100 * MS_PER_SEC; 63 await eventWatcher.wait_for('animationstart'); 64 65 animation.startTime = animation.timeline.currentTime - 200 * MS_PER_SEC; 66 await eventWatcher.wait_for('animationend'); 67 }, 'Seeking a CSS animation using the start time dispatches animation events'); 68 69 </script>