Rubber-stamped by Brady Eidson.
[webbrowser.git] / LayoutTests / transitions / inherit-other-props.html
bloba75a5b80743ebe4f266076a84a791b426f52482e
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;
13 .transition {
14 -webkit-transition-property: left;
15 -webkit-transition-duration: 2s;
16 -webkit-transition-timing-function: linear;
18 #box4 {
19 -webkit-transition-property: inherit;
20 -webkit-transition-duration: inherit;
21 -webkit-transition-timing-function: inherit;
23 </style>
24 <script type="text/javascript" charset="utf-8">
25 if (window.layoutTestController) {
26 layoutTestController.dumpAsText();
27 layoutTestController.waitUntilDone();
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 */
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 */
48 var kExpectedTimingFunction = [
49 'cubic-bezier(0.25, 0.1, 0.25, 1)', /* box1 */
50 'cubic-bezier(0, 0, 1, 1)', /* box2 */
51 'cubic-bezier(0, 0, 1, 1)', /* box3 */
52 'cubic-bezier(0, 0, 1, 1)', /* box4 */ /* inherits from box3 */
53 'cubic-bezier(0, 0, 1, 1)', /* box5 */
54 'cubic-bezier(0.25, 0.1, 0.25, 1)', /* box6 */ /* does NOT inherit */
57 var result = '';
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>";
67 function testProperties()
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]);
78 document.body.removeChild(document.getElementById('container'));
79 document.getElementById('result').innerHTML = result;
80 if (window.layoutTestController)
81 layoutTestController.notifyDone();
85 window.addEventListener('load', testProperties, false);
86 </script>
87 </head>
88 <body>
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>
101 <div id="result"></div>
103 </body>
104 </html>