LayoutTests/imported/w3c/web-platform-tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html

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