[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / transitions / inherit-other-props.html
1 <html>
2 <head>
3   <style>
4     .box {
5       position: relative;
6       left: 0;
7       height: 100px;
8       width: 100px;
9       margin: 10px;
10       background-color: blue;
11     }
12     .transition {
13       -webkit-transition-property: left;
14       -webkit-transition-duration: 2s;
15       -webkit-transition-timing-function: linear;
16     }
17     #box4 {
18       -webkit-transition-property: inherit;
19       -webkit-transition-duration: inherit;
20       -webkit-transition-timing-function: inherit;
21     }
22   </style>
23   <script>
24     if (window.testRunner) {
25         testRunner.dumpAsText();
26         testRunner.waitUntilDone();
27     }
28
29     var kExpectedProp = [
30       'all', /* box1 */
31       'left', /* box2 */
32       'left', /* box3 */
33       'left', /* box4 */ /* inherits from box3 */
34       'left', /* box5 */
35       'all', /* box6 */ /* does NOT inherit */
36     ];
37
38     var kExpectedDuration = [
39       '0s', /* box1 */
40       '2s', /* box2 */
41       '2s', /* box3 */
42       '2s', /* box4 */ /* inherits from box3 */
43       '2s', /* box5 */
44       '0s', /* box6 */ /* does NOT inherit */
45     ];
46
47     var kExpectedTimingFunction = [
48       'ease', /* box1 */
49       'linear', /* box2 */
50       'linear', /* box3 */
51       'linear', /* box4 */ /* inherits from box3 */
52       'linear', /* box5 */
53       'ease', /* box6 */ /* does NOT inherit */
54     ];
55
56     var result = '';
57
58     function testValue(index, name, actual, expected) {
59       if (actual == expected)
60         result += "PASS -- ";
61       else
62         result += "FAIL -- ";
63       result += "Box " + index + " computed transition " + name + ": " + actual + " expected: " + expected + "<br>";
64     }
65     
66     function testProperties()
67     {
68       var boxes = document.body.getElementsByClassName('box');
69       for (var i = 0; i < boxes.length; ++i) {
70         var curBox = boxes[i];
71         testValue(i+1, "property", window.getComputedStyle(curBox).webkitTransitionProperty, kExpectedProp[i]);
72         testValue(i+1, "duration", window.getComputedStyle(curBox).webkitTransitionDuration, kExpectedDuration[i]);
73         testValue(i+1, "timing function", window.getComputedStyle(curBox).webkitTransitionTimingFunction, kExpectedTimingFunction[i]);
74       }
75
76       document.body.removeChild(document.getElementById('container'));
77       document.getElementById('result').innerHTML = result;
78       if (window.testRunner)
79           testRunner.notifyDone();
80     }
81
82     window.addEventListener('load', testProperties, false);
83   </script>
84 </head>
85 <body>
86
87 <div id="container">
88   <div id="box1" class="box"></div>
89   <div id="box2" class="box transition"></div>
90   <div id="box3" class="box transition">
91     <div id="box4" class="box"></div>
92   </div>
93   <div id="box5" class="box transition">
94     <div id="box6" class="box"></div>
95   </div>
96 </div>
97
98 <div id="result"></div>
99
100 </body>
101 </html>