third_party/WebKit/LayoutTests/web-animations-api/start-time-grouping.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4 <style>
   5 div {
   6   width: 50px;
   7   height: 50px;
   8   background: green;
   9 }
  10 </style>
  11 <div id=target1></div>
  12 <div id=target2></div>
  13 <script>
  14 var anim1, anim2;
  15 anim1 = target1.animate([
  16   {transform: 'none'},
  17   {transform: 'translateX(500px)'},
  18 ], 1000);
  19
  20 function awaitFrame(frameTest) {
  21   return new Promise(resolve => {
  22     requestAnimationFrame(() => {
  23       if (frameTest()) {
  24         resolve();
  25       } else {
  26         awaitFrame(frameTest).then(resolve);
  27       }
  28     });
  29   });
  30 }
  31
  32 awaitFrame(() => anim1.currentTime > 100).then(() => {
  33   requestAnimationFrame(t => {
  34     // Testing a regression where scheduling anim1 and anim2 together caused anim2
  35     // to get anim1's start time.
  36     anim1.startTime = t - 100;
  37     anim2 = target2.animate([
  38       {transform: 'none'},
  39       {transform: 'translateX(500px)'},
  40     ], 200);
  41   });
  42 });
  43
  44 async_test(t => {
  45   awaitFrame(() => anim2 && anim2.startTime != null).then(() => {
  46     t.step(() => assert_not_equals(Math.round(anim1.startTime), Math.round(anim2.startTime)));
  47     t.done();
  48   });
  49 });
  50 </script>