2008-12-18 Pierre-Olivier Latour <pol@apple.com>
[WebKit-https.git] / 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>