src/third_party/WebKit/LayoutTests/transitions/start-transform-transition.html

   1 <html>
   2 <head>
   3   <style>
   4     .box {
   5       position: relative;
   6       width: 100px;
   7       height: 100px;
   8       background-color: blue;
   9       -webkit-transition-property: -webkit-transform;
  10       -webkit-transition-duration: 5s;
  11       -webkit-transform: translate(0, 0);
  12     }
  13
  14     .moved {
  15       -webkit-transform: translateX(300px);
  16     }
  17   </style>
  18   <script>
  19     if (window.testRunner) {
  20       testRunner.dumpAsText();
  21       testRunner.waitUntilDone();
  22     }
  23
  24     function test()
  25     {
  26       var t = window.getComputedStyle(document.getElementById('box')).webkitTransform;
  27       // grab the x value from the matrix()
  28       var lastValueRE = /([\.\d]+),[^,]+\)$/;
  29       var xTranslate = lastValueRE.exec(t)[1];
  30       var result = (xTranslate > 0) ? 'PASS' : 'FAIL: transition should be running, so x > 0';
  31       document.getElementById('result').innerHTML = result;
  32
  33       if (window.testRunner)
  34           testRunner.notifyDone();
  35     }
  36
  37     function startTest()
  38     {
  39       window.setTimeout(function() {
  40         document.getElementById('box').className = 'moved box';
  41         window.setTimeout(test, 200);
  42       }, 200);
  43     }
  44   </script>
  45 </head>
  46 <body onload="startTest()">
  47   <p>Box should start transition from style change on timer</p>
  48   <div id="container">
  49     <div id="box" class="box" onclick="this.className='redirected box'">
  50     </div>
  51   </div>
  52   <div id="result">
  53   </div>
  54 </body>
  55 </html>