LayoutTests/transitions/matched-transform-functions.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2    "http://www.w3.org/TR/html4/loose.dtd">
   3
   4 <html lang="en">
   5 <head>
   6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   7   <title>Matched Transform Functions</title>
   8   <style type="text/css" media="screen">
   9     #box {
  10       height: 100px;
  11       width: 100px;
  12       background-color: blue;
  13       -webkit-transition-property: -webkit-transform;
  14       -webkit-transition-duration: 3s;
  15       -webkit-transform: translate(0, 0) rotate(0);
  16     }
  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 last value from the matrix()
  29       var lastValueRE = /(\d+)\)$/;
  30       var yTranslate = parseInt(lastValueRE.exec(t));
  31
  32       var result = (yTranslate < 200) ? 'PASS' : 'FAIL: transition should still be running, so y < 200';
  33       document.getElementById('result').innerHTML = result;
  34
  35       if (window.layoutTestController)
  36           layoutTestController.notifyDone();
  37     }
  38
  39     function startTest()
  40     {
  41       var box = document.getElementById('box');
  42       box.style.webkitTransform = 'translate(100px, 0) rotate(0)';
  43
  44       window.setTimeout(function() {
  45         box.style.webkitTransform = 'translate(0, 200px) rotate(10deg)';
  46         window.setTimeout(function() {
  47           test();
  48         }, 200);
  49       }, 300);
  50     }
  51     window.addEventListener('load', startTest, false)
  52   </script>
  53 </head>
  54 <body>
  55 <p>Box should start moving right, then move down</p>
  56 <div id="box">
  57 </div>
  58
  59 <div id="result">
  60 </div>
  61 </body>
  62 </html>