third_party/WebKit/ManualTests/animation/transition-during-transition-with-load.html

   1 <html>
   2 <style>
   3   #box {
   4     position: absolute;
   5     height: 100px;
   6     width: 100px;
   7     background: blue;
   8     left: 0px;
   9     -webkit-transform: translate3d(0px, 0px, 0px);
  10     -webkit-transition-duration: 1s;
  11     -webkit-transition-timing-function: linear;
  12     -webkit-transition-property: -webkit-transform;
  13   }
  14 </style>
  15 <body>
  16 <p>
  17 The blue box should only animate to the right.
  18 </p><p>
  19 This test is successful if the box animates to the right without
  20 jumping to the left.  Jumping to the right is ok.
  21 </p>
  22 <hr>
  23
  24 <br>
  25 <div id="box"></div>
  26
  27 <script>
  28   window.onload = function() {
  29     var starTime;
  30
  31     function transitionAgain() {
  32       box.style.webkitTransform = "translate3d(200px, 0px, 0px)";
  33     }
  34
  35     var animate = function() {
  36       var curTime = window.performance.now();
  37       if (curTime > startTime + 500) {
  38         transitionAgain();
  39         while (window.performance.now() < curTime + 300) {}
  40       } else {
  41         window.requestAnimationFrame(animate);
  42       }
  43     }
  44
  45     window.requestAnimationFrame(animate);
  46
  47     requestAnimationFrame(animate);
  48
  49     startTime = window.performance.now();
  50     box.style.webkitTransform = "translate3d(100px, 0px, 0px)";
  51   }
  52 </script>
  53
  54 </body>
  55 </html>