3 <title>Testing inherit transitions
</title>
4 <style type=
"text/css" media=
"screen">
11 background-color: blue;
14 -webkit-transition-property: left;
15 -webkit-transition-duration:
2s;
16 -webkit-transition-timing-function: linear;
19 -webkit-transition-property: inherit;
20 -webkit-transition-duration: inherit;
21 -webkit-transition-timing-function: inherit;
24 <script type=
"text/javascript" charset=
"utf-8">
25 if (window.layoutTestController) {
26 layoutTestController.dumpAsText();
27 layoutTestController.waitUntilDone();
34 'left', /* box4 */ /* inherits from box3 */
36 'all', /* box6 */ /* does NOT inherit */
39 var kExpectedDuration = [
43 '
2s', /* box4 */ /* inherits from box3 */
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 */
59 function testValue(index, name, actual, expected) {
60 if (actual == expected)
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);
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>
96 <div id=
"box5" class=
"box transition">
97 <div id=
"box6" class=
"box"></div>
101 <div id=
"result"></div>