transition-during-transition-with-load.html

<html>
<style>
  #box {
    position: absolute;
    height: 100px;
    width: 100px;
    background: blue;
    left: 0px;
    transform: translate3d(0px, 0px, 0px);
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-property: transform;
  }
</style>
<body>
<p>
The blue box should only animate to the right.
</p><p>
This test is successful if the box animates to the right without
jumping to the left.  Jumping to the right is ok.
</p>
<hr>

<br>
<div id="box"></div>

<script>
  window.onload = function() {
    var starTime;

    function transitionAgain() {
      box.style.transform = "translate3d(200px, 0px, 0px)";
    }

    var animate = function() {
      var curTime = window.performance.now();
      if (curTime > startTime + 500) {
        transitionAgain();
        while (window.performance.now() < curTime + 300) {}
      } else {
        window.requestAnimationFrame(animate);
      }
    }

    window.requestAnimationFrame(animate);

    requestAnimationFrame(animate);

    startTime = window.performance.now();
    box.style.transform = "translate3d(100px, 0px, 0px)";
  }
</script>

</body>
</html>

chromium/third_party/blink/manual_tests/animation/transition-during-transition-with-load.html