blob: 14c36cee5fe6f627bec53f935183d56319cb7de3 [file] [log] [blame]
dino@apple.com1baeea62008-08-25 21:06:21 +00001<html>
2<head>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +00003 <style>
dino@apple.com1baeea62008-08-25 21:06:21 +00004 .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 }
16 #box4 {
17 -webkit-transition-property: inherit;
18 }
19 </style>
simon.fraser@apple.com4803cdd2011-04-26 03:25:14 +000020 <script>
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000021 if (window.testRunner) {
22 testRunner.dumpAsText();
23 testRunner.waitUntilDone();
dino@apple.com1baeea62008-08-25 21:06:21 +000024 }
25
26 var kExpecteds = [
27 'all', /* box1 */
28 'left', /* box2 */
29 'left', /* box3 */
30 'left', /* box4 */ /* inherits from box3 */
31 'left', /* box5 */
32 'all', /* box6 */ /* does NOT inherit */
33 ];
34
35 function testProperties()
36 {
37 var result = '';
38
39 var boxes = document.body.getElementsByClassName('box');
40 for (var i = 0; i < boxes.length; ++i) {
41 var curBox = boxes[i];
42 var curProp = window.getComputedStyle(curBox).webkitTransitionProperty;
43 if (curProp == kExpecteds[i])
44 result += "PASS -- ";
45 else
46 result += "FAIL -- ";
47 result += "Box " + (i+1) + " computed transition property: " + curProp + " expected: " + kExpecteds[i] + "<br>";
48 }
49
50 document.body.removeChild(document.getElementById('container'));
51 document.getElementById('result').innerHTML = result;
rniwa@webkit.orgcc082ecd2012-06-16 03:42:58 +000052 if (window.testRunner)
53 testRunner.notifyDone();
dino@apple.com1baeea62008-08-25 21:06:21 +000054
55 }
56
57 window.addEventListener('load', testProperties, false);
58 </script>
59</head>
60<body>
61
62<div id="container">
63 <div id="box1" class="box"></div>
64 <div id="box2" class="box transition"></div>
65 <div id="box3" class="box transition">
66 <div id="box4" class="box"></div>
67 </div>
68 <div id="box5" class="box transition">
69 <div id="box6" class="box"></div>
70 </div>
71</div>
72
73<div id="result"></div>
74
75</body>
76</html>