src/third_party/WebKit/LayoutTests/transitions/matched-transform-functions.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-property: transform;
  11       -webkit-transition-duration: 3s;
  12       transform: translate(0, 0) rotate(0);
  13     }
  14
  15   </style>
  16   <script>
  17     if (window.testRunner) {
  18       testRunner.dumpAsText();
  19       testRunner.waitUntilDone();
  20     }
  21
  22     function test()
  23     {
  24       var c = new WebKitCSSMatrix(window.getComputedStyle(document.getElementById('box')).transform);
  25       var result = (c.f < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
  26       document.getElementById('result').innerHTML = result;
  27
  28       if (window.testRunner)
  29           testRunner.notifyDone();
  30     }
  31
  32     function startTest()
  33     {
  34       var box = document.getElementById('box');
  35       box.style.transform = 'translate(100px, 0) rotate(0)';
  36
  37       window.setTimeout(function() {
  38         box.style.transform = 'translate(0, 200px) rotate(10deg)';
  39         window.setTimeout(function() {
  40           test();
  41         }, 200);
  42       }, 300);
  43     }
  44     window.addEventListener('load', startTest, false)
  45   </script>
  46 </head>
  47 <body>
  48 <p>Box should start moving right, then move down</p>
  49 <div id="box">
  50 </div>
  51
  52 <div id="result">
  53 </div>
  54 </body>
  55 </html>