LayoutTests/transitions/start-transform-transition.html

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