src/third_party/WebKit/LayoutTests/transitions/retargetted-transition.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   6     #box {
   7       height: 100px;
   8       width: 100px;
   9       background-color: blue;
  10       -webkit-transition-duration: 2s;
  11       transform: translate(0, 0);
  12     }
  13
  14   </style>
  15   <script>
  16     if (window.testRunner) {
  17       testRunner.dumpAsText();
  18       testRunner.waitUntilDone();
  19     }
  20
  21     function test()
  22     {
  23       var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).webkitTransform);
  24       var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
  25       document.getElementById('result').innerHTML = result;
  26
  27       if (window.testRunner)
  28           testRunner.notifyDone();
  29     }
  30
  31     function startTest()
  32     {
  33       var box = document.getElementById('box');
  34       box.style.webkitTransform = 'translate(100px, 0)';
  35
  36       window.setTimeout(function() {
  37         box.style.webkitTransform = 'translate(0, 200px)';
  38         window.setTimeout(function() {
  39           test();
  40         }, 200);
  41       }, 300);
  42     }
  43     window.addEventListener('load', startTest, false)
  44   </script>
  45 </head>
  46 <body>
  47 <p>Box should start moving right, then move down</p>
  48 <div id="box">
  49 </div>
  50
  51 <div id="result">
  52 </div>
  53 </body>
  54 </html>