AnimationEffect-getComputedTiming.tentative.html (10267B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>AnimationEffect.getComputedTiming() for CSS transitions</title> 4 <!-- TODO: Add a more specific link for this once it is specified. --> 5 <link rel="help" href="https://drafts.csswg.org/css-transitions-2/#csstransition"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <script src="support/helper.js"></script> 9 <script src="/web-animations/testcommon.js"></script> 10 <style> 11 12 .animated-div { 13 margin-left: 100px; 14 } 15 16 </style> 17 <div id="log"></div> 18 <script> 19 20 'use strict'; 21 22 23 // -------------------- 24 // delay 25 // -------------------- 26 27 test(t => { 28 const div = addDiv(t, { class: 'animated-div' }); 29 div.style.transition = 'margin-left 10s'; 30 getComputedStyle(div).marginLeft; 31 div.style.marginLeft = '10px'; 32 33 const effect = div.getAnimations()[0].effect; 34 assert_equals(effect.getComputedTiming().delay, 0, 'Initial value of delay'); 35 }, 'delay of a new tranisition'); 36 37 test(t => { 38 const div = addDiv(t, { class: 'animated-div' }); 39 div.style.transition = 'margin-left 10s 10s'; 40 getComputedStyle(div).marginLeft; 41 div.style.marginLeft = '10px'; 42 43 const effect = div.getAnimations()[0].effect; 44 assert_equals(effect.getComputedTiming().delay, 10000, 45 'Initial value of delay'); 46 }, 'Positive delay of a new transition'); 47 48 test(t => { 49 const div = addDiv(t, { class: 'animated-div' }); 50 div.style.transition = 'margin-left 10s -5s'; 51 getComputedStyle(div).marginLeft; 52 div.style.marginLeft = '10px'; 53 54 const effect = div.getAnimations()[0].effect; 55 assert_equals(effect.getComputedTiming().delay, -5000, 56 'Initial value of delay'); 57 }, 'Negative delay of a new transition'); 58 59 60 // -------------------- 61 // endDelay 62 // -------------------- 63 64 test(t => { 65 const div = addDiv(t, { class: 'animated-div' }); 66 div.style.transition = 'margin-left 10s'; 67 getComputedStyle(div).marginLeft; 68 div.style.marginLeft = '10px'; 69 70 const effect = div.getAnimations()[0].effect; 71 assert_equals(effect.getComputedTiming().endDelay, 0, 72 'Initial value of endDelay'); 73 }, 'endDelay of a new transition'); 74 75 76 // -------------------- 77 // fill 78 // -------------------- 79 80 test(t => { 81 const div = addDiv(t, { class: 'animated-div' }); 82 div.style.transition = 'margin-left 10s'; 83 getComputedStyle(div).marginLeft; 84 div.style.marginLeft = '10px'; 85 86 const effect = div.getAnimations()[0].effect; 87 assert_equals(effect.getComputedTiming().fill, 'backwards', 'Fill backwards'); 88 }, 'fill of a new transition'); 89 90 91 // -------------------- 92 // iterationStart 93 // -------------------- 94 95 test(t => { 96 const div = addDiv(t, { class: 'animated-div' }); 97 div.style.transition = 'margin-left 10s'; 98 getComputedStyle(div).marginLeft; 99 div.style.marginLeft = '10px'; 100 101 const effect = div.getAnimations()[0].effect; 102 assert_equals(effect.getComputedTiming().iterationStart, 0, 103 'Initial value of iterationStart'); 104 }, 'iterationStart of a new transition'); 105 106 107 // -------------------- 108 // iterations 109 // -------------------- 110 111 test(t => { 112 const div = addDiv(t, { class: 'animated-div' }); 113 div.style.transition = 'margin-left 10s'; 114 getComputedStyle(div).marginLeft; 115 div.style.marginLeft = '10px'; 116 117 const effect = div.getAnimations()[0].effect; 118 assert_equals(effect.getComputedTiming().iterations, 1, 119 'Initial value of iterations'); 120 }, 'iterations of a new transition'); 121 122 123 // -------------------- 124 // duration 125 // -------------------- 126 127 test(t => { 128 const div = addDiv(t, { class: 'animated-div' }); 129 div.style.transition = 'margin-left 10s'; 130 getComputedStyle(div).marginLeft; 131 div.style.marginLeft = '10px'; 132 133 const effect = div.getAnimations()[0].effect; 134 assert_equals(effect.getComputedTiming().duration, 10000, 135 'Initial value of duration'); 136 }, 'duration of a new transition'); 137 138 139 // -------------------- 140 // direction 141 // -------------------- 142 143 test(t => { 144 const div = addDiv(t, { class : 'animated-div' }); 145 div.style.transition = 'margin-left 10s'; 146 getComputedStyle(div).marginLeft; 147 div.style.marginLeft = '10px'; 148 149 const effect = div.getAnimations()[0].effect; 150 assert_equals(effect.getComputedTiming().direction, 'normal', 151 'Initial value of direction'); 152 }, 'direction of a new transition'); 153 154 155 // -------------------- 156 // easing 157 // -------------------- 158 159 test(t => { 160 const div = addDiv(t, { class: 'animated-div' }); 161 div.style.transition = 'margin-left 10s'; 162 getComputedStyle(div).marginLeft; 163 div.style.marginLeft = '10px'; 164 165 const effect = div.getAnimations()[0].effect; 166 assert_equals(effect.getComputedTiming().easing, 'ease', 167 'Initial value of easing'); 168 }, 'easing of a new transition'); 169 170 test(t => { 171 const div = addDiv(t, { class: 'animated-div' }); 172 div.style.transition = 'margin-left 10s steps(4)'; 173 getComputedStyle(div).marginLeft; 174 div.style.marginLeft = '10px'; 175 176 const effect = div.getAnimations()[0].effect; 177 assert_equals(effect.getComputedTiming().easing, 'steps(4)', 178 'Initial value of easing'); 179 }, 'non-default easing of a new transition'); 180 181 182 // ------------------------------ 183 // endTime 184 // = max(start delay + active duration + end delay, 0) 185 // -------------------- 186 187 test(t => { 188 const div = addDiv(t, { class: 'animated-div' }); 189 div.style.transition = 'margin-left 100s -5s'; 190 getComputedStyle(div).marginLeft; 191 div.style.marginLeft = '10px'; 192 193 const effect = div.getAnimations()[0].effect; 194 const answer = 100000 - 5000; // ms 195 assert_equals(effect.getComputedTiming().endTime, answer, 196 'Initial value of endTime'); 197 }, 'endTime of a new transition'); 198 199 200 // -------------------- 201 // activeDuration 202 // = iteration duration * iteration count(==1) 203 // -------------------- 204 205 test(t => { 206 const div = addDiv(t, { class: 'animated-div' }); 207 div.style.transition = 'margin-left 100s -5s'; 208 getComputedStyle(div).marginLeft; 209 div.style.marginLeft = '10px'; 210 211 const effect = div.getAnimations()[0].effect; 212 assert_equals(effect.getComputedTiming().activeDuration, 100000, 213 'Initial value of activeDuration'); 214 }, 'activeDuration of a new transition'); 215 216 217 // -------------------- 218 // localTime 219 // -------------------- 220 221 test(t => { 222 const div = addDiv(t, { class: 'animated-div' }); 223 div.style.transition = 'margin-left 100s'; 224 getComputedStyle(div).marginLeft; 225 div.style.marginLeft = '10px'; 226 227 const effect = div.getAnimations()[0].effect; 228 assert_equals(effect.getComputedTiming().localTime, 0, 229 'Initial value of localTime'); 230 }, 'localTime of a new transition'); 231 232 test(t => { 233 const div = addDiv(t, { class: 'animated-div' }); 234 div.style.transition = 'margin-left 100s'; 235 getComputedStyle(div).marginLeft; 236 div.style.marginLeft = '10px'; 237 238 const anim = div.getAnimations()[0]; 239 anim.currentTime = 5000; 240 assert_times_equal(anim.effect.getComputedTiming().localTime, 241 anim.currentTime, 242 'current localTime after setting currentTime'); 243 }, 'localTime is always equal to currentTime'); 244 245 promise_test(async t => { 246 const div = addDiv(t, { class: 'animated-div' }); 247 div.style.transition = 'margin-left 100s'; 248 getComputedStyle(div).marginLeft; 249 div.style.marginLeft = '10px'; 250 251 const anim = div.getAnimations()[0]; 252 anim.playbackRate = 2; // 2 times faster 253 254 await anim.ready; 255 256 assert_times_equal(anim.effect.getComputedTiming().localTime, 257 anim.currentTime, 258 'localTime is equal to currentTime'); 259 await waitForFrame(); 260 261 assert_times_equal(anim.effect.getComputedTiming().localTime, 262 anim.currentTime, 263 'localTime is equal to currentTime'); 264 }, 'localTime reflects playbackRate immediately'); 265 266 267 // -------------------- 268 // progress 269 // -------------------- 270 271 test(t => { 272 const div = addDiv(t, { class: 'animated-div' }); 273 div.style.transition = 'margin-left 10.5s'; 274 getComputedStyle(div).marginLeft; 275 div.style.marginLeft = '10px'; 276 277 const effect = div.getAnimations()[0].effect; 278 assert_equals(effect.getComputedTiming().progress, 0.0, 279 'Initial value of progress'); 280 }, 'progress of a new transition'); 281 282 test(t => { 283 const div = addDiv(t, { class: 'animated-div' }); 284 div.style.transition = 'margin-left 10.5s 2s'; 285 getComputedStyle(div).marginLeft; 286 div.style.marginLeft = '10px'; 287 288 const effect = div.getAnimations()[0].effect; 289 assert_equals(effect.getComputedTiming().progress, 0.0, 290 'Initial value of progress'); 291 }, 'progress of a new transition with positive delay in before phase'); 292 293 test(t => { 294 const div = addDiv(t, { class: 'animated-div' }); 295 div.style.transition = 'margin-left 10.5s'; 296 getComputedStyle(div).marginLeft; 297 div.style.marginLeft = '10px'; 298 299 const anim = div.getAnimations()[0]; 300 anim.finish(); 301 assert_equals(anim.effect.getComputedTiming().progress, null, 302 'finished progress'); 303 }, 'progress of a finished transition'); 304 305 306 // -------------------- 307 // currentIteration 308 // -------------------- 309 310 test(t => { 311 const div = addDiv(t, { class: 'animated-div' }); 312 div.style.transition = 'margin-left 10s'; 313 getComputedStyle(div).marginLeft; 314 div.style.marginLeft = '10px'; 315 316 const effect = div.getAnimations()[0].effect; 317 assert_equals(effect.getComputedTiming().currentIteration, 0, 318 'Initial value of currentIteration'); 319 }, 'currentIteration of a new transition'); 320 321 test(t => { 322 const div = addDiv(t, { class: 'animated-div' }); 323 div.style.transition = 'margin-left 10s 2s'; 324 getComputedStyle(div).marginLeft; 325 div.style.marginLeft = '10px'; 326 327 const effect = div.getAnimations()[0].effect; 328 assert_equals(effect.getComputedTiming().currentIteration, 0, 329 'Initial value of currentIteration'); 330 }, 'currentIteration of a new transition with positive delay in before phase'); 331 332 test(t => { 333 const div = addDiv(t, { class: 'animated-div' }); 334 div.style.transition = 'margin-left 10s'; 335 getComputedStyle(div).marginLeft; 336 div.style.marginLeft = '10px'; 337 338 const anim = div.getAnimations()[0]; 339 anim.finish(); 340 assert_equals(anim.effect.getComputedTiming().currentIteration, null, 341 'finished currentIteration'); 342 }, 'currentIteration of a finished transition'); 343 344 </script>