| <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> |
