2008-08-25 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / transitions / inherit-other-props.html
1 <html>
2 <head>
3   <title>Testing inherit 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     }
13     .transition {
14       -webkit-transition-property: left;
15       -webkit-transition-duration: 2s;
16       -webkit-transition-timing-function: linear;
17     }
18     #box4 {
19       -webkit-transition-property: inherit;
20       -webkit-transition-duration: inherit;
21       -webkit-transition-timing-function: inherit;
22     }
23   </style>
24   <script type="text/javascript" charset="utf-8">
25     if (window.layoutTestController) {
26         layoutTestController.dumpAsText();
27         layoutTestController.waitUntilDone();
28     }
29
30     var kExpectedProp = [
31       'all', /* box1 */
32       'left', /* box2 */
33       'left', /* box3 */
34       'left', /* box4 */ /* inherits from box3 */
35       'left', /* box5 */
36       'all', /* box6 */ /* does NOT inherit */
37     ];
38
39     var kExpectedDuration = [
40       '0s', /* box1 */
41       '2s', /* box2 */
42       '2s', /* box3 */
43       '2s', /* box4 */ /* inherits from box3 */
44       '2s', /* box5 */
45       '0s', /* box6 */ /* does NOT inherit */
46     ];
47
48     var kExpectedTimingFunction = [
49       'cubic-bezier(0.25, 0.1, 0.25, 1)', /* box1 */
50       'cubic-bezier(0, 0, 0, 0)', /* box2 */
51       'cubic-bezier(0, 0, 0, 0)', /* box3 */
52       'cubic-bezier(0, 0, 0, 0)', /* box4 */ /* inherits from box3 */
53       'cubic-bezier(0, 0, 0, 0)', /* box5 */
54       'cubic-bezier(0.25, 0.1, 0.25, 1)', /* box6 */ /* does NOT inherit */
55     ];
56
57     var result = '';
58
59     function testValue(index, name, actual, expected) {
60       if (actual == expected)
61         result += "PASS -- ";
62       else
63         result += "FAIL -- ";
64       result += "Box " + index + " computed transition " + name + ": " + actual + " expected: " + expected + "<br>";
65     }
66     
67     function testProperties()
68     {
69
70       var boxes = document.body.getElementsByClassName('box');
71       for (var i = 0; i < boxes.length; ++i) {
72         var curBox = boxes[i];
73         testValue(i+1, "property", window.getComputedStyle(curBox).webkitTransitionProperty, kExpectedProp[i]);
74         testValue(i+1, "duration", window.getComputedStyle(curBox).webkitTransitionDuration, kExpectedDuration[i]);
75         testValue(i+1, "timing function", window.getComputedStyle(curBox).webkitTransitionTimingFunction, kExpectedTimingFunction[i]);
76       }
77
78       document.body.removeChild(document.getElementById('container'));
79       document.getElementById('result').innerHTML = result;
80       if (window.layoutTestController)
81           layoutTestController.notifyDone();
82
83     }
84
85     window.addEventListener('load', testProperties, false);
86   </script>
87 </head>
88 <body>
89
90 <div id="container">
91   <div id="box1" class="box"></div>
92   <div id="box2" class="box transition"></div>
93   <div id="box3" class="box transition">
94     <div id="box4" class="box"></div>
95   </div>
96   <div id="box5" class="box transition">
97     <div id="box6" class="box"></div>
98   </div>
99 </div>
100
101 <div id="result"></div>
102
103 </body>
104 </html>