2008-08-25 Dean Jackson <dino@apple.com>
[WebKit-https.git] / LayoutTests / transitions / inherit.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     }
17     #box4 {
18       -webkit-transition-property: inherit;
19     }
20   </style>
21   <script type="text/javascript" charset="utf-8">
22     if (window.layoutTestController) {
23         layoutTestController.dumpAsText();
24         layoutTestController.waitUntilDone();
25     }
26
27     var kExpecteds = [
28       'all', /* box1 */
29       'left', /* box2 */
30       'left', /* box3 */
31       'left', /* box4 */ /* inherits from box3 */
32       'left', /* box5 */
33       'all', /* box6 */ /* does NOT inherit */
34     ];
35     
36     function testProperties()
37     {
38       var result = '';
39
40       var boxes = document.body.getElementsByClassName('box');
41       for (var i = 0; i < boxes.length; ++i) {
42         var curBox = boxes[i];
43         var curProp = window.getComputedStyle(curBox).webkitTransitionProperty;
44         if (curProp == kExpecteds[i])
45           result += "PASS -- ";
46         else
47           result += "FAIL -- ";
48         result += "Box " + (i+1) + " computed transition property: " + curProp + " expected: " + kExpecteds[i] + "<br>";
49       }
50
51       document.body.removeChild(document.getElementById('container'));
52       document.getElementById('result').innerHTML = result;
53       if (window.layoutTestController)
54           layoutTestController.notifyDone();
55
56     }
57
58     window.addEventListener('load', testProperties, false);
59   </script>
60 </head>
61 <body>
62
63 <div id="container">
64   <div id="box1" class="box"></div>
65   <div id="box2" class="box transition"></div>
66   <div id="box3" class="box transition">
67     <div id="box4" class="box"></div>
68   </div>
69   <div id="box5" class="box transition">
70     <div id="box6" class="box"></div>
71   </div>
72 </div>
73
74 <div id="result"></div>
75
76 </body>
77 </html>