src/third_party/WebKit/LayoutTests/compositing/transitions/transform-on-large-layer.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Animating transform on large tiled layer.</title>
   5     <style type="text/css">
   6         #box {
   7             -webkit-transition: -webkit-transform 1s step-end;
   8             display: block;
   9             width: 1000px;
  10             height: 2000px;
  11             background-color: green;
  12         }
  13
  14         #sandbox {
  15             height: 1000px;
  16             width: 1000px;
  17             background-color: red;
  18             overflow: hidden;
  19         }
  20
  21         .end {
  22             transform: translate3d(0, -1000px, 0);
  23         }
  24
  25         .start {
  26             transform: translate3d(0, 100%, 0);
  27         }
  28     </style>
  29     <script type="text/javascript">
  30         function run()
  31         {
  32             if (window.testRunner) {
  33                 testRunner.useUnfortunateSynchronousResizeMode();
  34                 testRunner.waitUntilDone();
  35                 window.setTimeout(notifyDone, 1200);
  36             }
  37             window.onresize = function() {
  38                 var box = document.getElementById("box");
  39                 box.className = "end";
  40             }
  41             window.resizeTo(1600,1200);
  42         }
  43         function notifyDone()
  44         {
  45             testRunner.notifyDone();
  46         }
  47     </script>
  48 </head>
  49 <body onload="run()">
  50     <div id=description>
  51         The test passes if the box below turns green.
  52     </div>
  53     <div id=sandbox>
  54         <div id="box" class="start"><font style="opacity:0">ABC</font></div>
  55     </div>
  56 </body>
  57 </html>