start-time-grouping.html | Explore in Territory

<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
div {
  width: 50px;
  height: 50px;
  background: green;
}
</style>
<div id=target1></div>
<div id=target2></div>
<script>
var anim1, anim2;
anim1 = target1.animate([
  {transform: 'none'},
  {transform: 'translateX(500px)'},
], 1000);

function awaitFrame(frameTest) {
  return new Promise(resolve => {
    requestAnimationFrame(() => {
      if (frameTest()) {
        resolve();
      } else {
        awaitFrame(frameTest).then(resolve);
      }
    });
  });
}

awaitFrame(() => anim1.currentTime > 100).then(() => {
  requestAnimationFrame(t => {
    // Testing a regression where scheduling anim1 and anim2 together caused anim2
    // to get anim1's start time.
    anim1.startTime = t - 100;
    anim2 = target2.animate([
      {transform: 'none'},
      {transform: 'translateX(500px)'},
    ], 200);
  });
});

async_test(t => {
  awaitFrame(() => anim2 && anim2.startTime != null).then(() => {
    t.step(() => assert_not_equals(Math.round(anim1.startTime), Math.round(anim2.startTime)));
    t.done();
  });
});
</script>
chromium/third_party/blink/web_tests/animations/start-time-grouping.html
