| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Animating transform on large tiled layer.</title> |
| <style type="text/css"> |
| #box { |
| -webkit-transition: -webkit-transform 1s step-end; |
| display: block; |
| width: 1000px; |
| height: 2000px; |
| background-color: green; |
| } |
| |
| #sandbox { |
| height: 1000px; |
| width: 1000px; |
| background-color: red; |
| overflow: hidden; |
| } |
| |
| .end { |
| transform: translate3d(0, -1000px, 0); |
| } |
| |
| .start { |
| transform: translate3d(0, 100%, 0); |
| } |
| </style> |
| <script type="text/javascript"> |
| function run() |
| { |
| if (window.testRunner) { |
| testRunner.useUnfortunateSynchronousResizeMode(); |
| testRunner.waitUntilDone(); |
| window.setTimeout(notifyDone, 1200); |
| } |
| window.onresize = function() { |
| var box = document.getElementById("box"); |
| box.className = "end"; |
| } |
| window.resizeTo(1600,1200); |
| } |
| function notifyDone() |
| { |
| testRunner.notifyDone(); |
| } |
| </script> |
| </head> |
| <body onload="run()"> |
| <div id=description> |
| The test passes if the box below turns green. |
| </div> |
| <div id=sandbox> |
| <div id="box" class="start"><font style="opacity:0">ABC</font></div> |
| </div> |
| </body> |
| </html> |
