LayoutTests/transitions/transition-timing-function.html

   1 <html>
   2 <head>
   3   <title>Transitions</title>
   4   <style type="text/css" media="screen">
   5     .box {
   6       position: relative;
   7       left: 0;
   8       height: 100px;
   9       width: 100px;
  10       margin: 10px;
  11       background-color: blue;
  12       -webkit-transition-duration: 5s;
  13       -webkit-transition-timing-function: linear;
  14     }
  15   </style>
  16   <script type="text/javascript" charset="utf-8">
  17     if (window.layoutTestController) {
  18         layoutTestController.dumpAsText();
  19         layoutTestController.waitUntilDone();
  20     }
  21
  22     var kExpecteds = {
  23       'box1' : 200,
  24       'box2' : 320,
  25       'box3' : 125,
  26       'box4' : 272,
  27       'box5' : 200
  28     }
  29
  30     function measurePosition()
  31     {
  32       var boxes = document.body.getElementsByClassName('box');
  33
  34       var result = '';
  35       for (var i = 0; i < boxes.length; ++i)
  36       {
  37         var curBox = boxes[i];
  38         var curLeft = parseInt(window.getComputedStyle(curBox).left);
  39
  40         var expected = kExpecteds[curBox.id];
  41         var passed = (Math.abs(curLeft - expected) / expected) < 0.05;
  42         var thisResult;
  43         if (passed)
  44           thisResult = curBox.id + ': within 5% of ' + expected + ': PASSED';
  45         else
  46           thisResult = curBox.id + ': expected ' + expected + ', got ' + curLeft + '; outside 5%: FAIL';
  47
  48         result += thisResult + '<br>';
  49       }
  50
  51       document.body.removeChild(document.getElementById('container'));
  52
  53       document.getElementById('result').innerHTML = result;
  54
  55       if (window.layoutTestController)
  56           layoutTestController.notifyDone();
  57     }
  58
  59     function startTransition()
  60     {
  61       var boxes = document.body.getElementsByClassName('box');
  62       for (var i = 0; i < boxes.length; ++i)
  63         boxes[i].style.left = '400px';
  64
  65       window.setTimeout(measurePosition, 2500);
  66     }
  67     window.addEventListener('load', startTransition, false);
  68   </script>
  69 </head>
  70 <body>
  71
  72 <div id="container">
  73   <div id="box1" class="box" style="-webkit-transition-timing-function: linear;"></div>
  74   <div id="box2" class="box" style="-webkit-transition-timing-function: ease;"></div>
  75   <div id="box3" class="box" style="-webkit-transition-timing-function: ease-in;"></div>
  76   <div id="box4" class="box" style="-webkit-transition-timing-function: ease-out;"></div>
  77   <div id="box5" class="box" style="-webkit-transition-timing-function: ease-in-out;"></div>
  78 </div>
  79
  80 <div id="result"></div>
  81
  82 </body>
  83 </html>