| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Animating transform on large tiled layer.</title> |
| <style type="text/css"> |
| #box { |
| display: block; |
| width: 1000px; |
| height: 2000px; |
| background-color: green; |
| transition: -webkit-transform 0.2s step-end; |
| } |
| |
| #sandbox { |
| height: 1000px; |
| width: 1000px; |
| background-color: red; |
| overflow: hidden; |
| } |
| |
| .end { |
| -webkit-transform: translate3d(0, -1000px, 0); |
| } |
| |
| .start { |
| -webkit-transform: translate3d(0, 100%, 0); |
| } |
| </style> |
| <script> |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function run() |
| { |
| var box = document.getElementById('box'); |
| box.addEventListener('transitionend', function() { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }, false); |
| |
| box.className = 'end'; |
| } |
| </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> |
