setting-the-current-time-of-an-animation.html (5708B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>Setting the current time of an animation</title> 4 <link rel="help" 5 href="https://drafts.csswg.org/web-animations-1/#setting-the-current-time-of-an-animation"> 6 <script src='/resources/testharness.js'></script> 7 <script src='/resources/testharnessreport.js'></script> 8 <script src='../../testcommon.js'></script> 9 <body> 10 <div id='log'></div> 11 <script> 12 'use strict'; 13 14 test(t => { 15 const anim = new Animation(); 16 assert_equals(anim.playState, 'idle'); 17 assert_equals(anim.currentTime, null); 18 19 // This should not throw because the currentTime is already null. 20 anim.currentTime = null; 21 }, 'Setting the current time of a pending animation to unresolved does not' 22 + ' throw a TypeError'); 23 24 promise_test(async t => { 25 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 26 await anim.ready; 27 28 assert_greater_than_equal(anim.currentTime, 0); 29 assert_throws_js(TypeError, () => { 30 anim.currentTime = null; 31 }); 32 }, 'Setting the current time of a playing animation to unresolved throws a' 33 + ' TypeError'); 34 35 promise_test(async t => { 36 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 37 await anim.ready; 38 anim.pause(); 39 40 assert_greater_than_equal(anim.currentTime, 0); 41 assert_throws_js(TypeError, () => { 42 anim.currentTime = null; 43 }); 44 }, 'Setting the current time of a paused animation to unresolved throws a' 45 + ' TypeError'); 46 47 48 promise_test(async t => { 49 const animation = createDiv(t).animate(null, 100 * MS_PER_SEC); 50 51 assert_throws_js(TypeError, () => { 52 animation.currentTime = CSSNumericValue.parse("30%"); 53 }); 54 assert_throws_js(TypeError, () => { 55 animation.currentTime = CSSNumericValue.parse("30deg"); 56 }); 57 58 animation.currentTime = 2000; 59 assert_equals(animation.currentTime, 2000, "Set current time using double"); 60 61 animation.currentTime = CSSNumericValue.parse("3000"); 62 assert_equals(animation.currentTime, 3000, "Set current time using " + 63 "CSSNumericValue number value"); 64 65 animation.currentTime = CSSNumericValue.parse("4000ms"); 66 assert_equals(animation.currentTime, 4000, "Set current time using " + 67 "CSSNumericValue milliseconds value"); 68 69 animation.currentTime = CSSNumericValue.parse("50s"); 70 assert_equals(animation.currentTime, 50000, "Set current time using " + 71 "CSSNumericValue seconds value"); 72 }, 'Validate different value types that can be used to set current time'); 73 74 promise_test(async t => { 75 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 76 await anim.ready; 77 anim.pause(); 78 79 // We should be pause-pending now 80 assert_true(anim.pending); 81 assert_equals(anim.playState, 'paused'); 82 83 // Apply a pending playback rate 84 anim.updatePlaybackRate(2); 85 assert_equals(anim.playbackRate, 1); 86 87 // Setting the current time should apply the pending playback rate 88 anim.currentTime = 50 * MS_PER_SEC; 89 assert_equals(anim.playbackRate, 2); 90 assert_false(anim.pending); 91 92 // Sanity check that the current time is preserved 93 assert_time_equals_literal(anim.currentTime, 50 * MS_PER_SEC); 94 }, 'Setting the current time of a pausing animation applies a pending playback' 95 + ' rate'); 96 97 98 // The following tests verify that currentTime can be set outside of the normal 99 // bounds of an animation. 100 101 promise_test(async t => { 102 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 103 await anim.ready; 104 105 anim.currentTime = 200 * MS_PER_SEC; 106 assert_equals(anim.playState, 'finished'); 107 assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC); 108 }, 'Setting the current time after the end with a positive playback rate'); 109 110 promise_test(async t => { 111 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 112 await anim.ready; 113 114 anim.currentTime = -100 * MS_PER_SEC; 115 assert_equals(anim.playState, 'running'); 116 assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC); 117 118 await waitForAnimationFrames(2); 119 assert_greater_than(anim.currentTime, -100 * MS_PER_SEC); 120 }, 'Setting a negative current time with a positive playback rate'); 121 122 promise_test(async t => { 123 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 124 anim.updatePlaybackRate(-1); 125 await anim.ready; 126 127 anim.currentTime = 200 * MS_PER_SEC; 128 assert_equals(anim.playState, 'running'); 129 assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC); 130 131 await waitForAnimationFrames(2); 132 assert_less_than(anim.currentTime, 200 * MS_PER_SEC); 133 }, 'Setting the current time after the end with a negative playback rate'); 134 135 promise_test(async t => { 136 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 137 anim.updatePlaybackRate(-1); 138 await anim.ready; 139 140 anim.currentTime = -100 * MS_PER_SEC; 141 assert_equals(anim.playState, 'finished'); 142 assert_time_equals_literal(anim.currentTime, -100 * MS_PER_SEC); 143 }, 'Setting a negative current time with a negative playback rate'); 144 145 promise_test(async t => { 146 const anim = createDiv(t).animate(null, 100 * MS_PER_SEC); 147 anim.updatePlaybackRate(0); 148 await anim.ready; 149 150 // An animation with a playback rate of zero is never in the finished state 151 // even if currentTime is outside the normal range of [0, effect end]. 152 anim.currentTime = 200 * MS_PER_SEC; 153 assert_equals(anim.playState, 'running'); 154 assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC); 155 await waitForAnimationFrames(2); 156 assert_time_equals_literal(anim.currentTime, 200 * MS_PER_SEC); 157 158 anim.currentTime = -200 * MS_PER_SEC; 159 assert_equals(anim.playState, 'running'); 160 assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC); 161 await waitForAnimationFrames(2); 162 assert_time_equals_literal(anim.currentTime, -200 * MS_PER_SEC); 163 164 }, 'Setting the current time on an animation with a zero playback rate'); 165 166 </script> 167 </body>