4 <title>Test of -webkit-animation-direction on composited elements (opacity)</title>
17 -webkit-animation-duration: 1s;
18 -webkit-animation-timing-function: linear;
19 -webkit-animation-iteration-count: 8;
23 -webkit-animation-name: fade1;
24 background-color: blue;
29 -webkit-animation-name: fade2;
30 background-color: orange;
34 -webkit-animation-direction: normal;
38 -webkit-animation-direction: alternate;
42 -webkit-animation-direction: reverse;
46 -webkit-animation-direction: alternate-reverse;
49 @-webkit-keyframes fade1 {
54 @-webkit-keyframes fade2 {
58 100% { opacity: 1.0; }
61 <script src="resources/animation-test-helpers.js"></script>
63 const expectedValues = [
64 // [animation-name, time, element-id, property, expected-value, tolerance]
65 ["fade1", 0.2, "box1", "opacity", 0.2, 0.15],
66 ["fade1", 0.2, "box2", "opacity", 0.2, 0.15],
67 ["fade1", 0.2, "box3", "opacity", 0.8, 0.15],
68 ["fade1", 0.2, "box4", "opacity", 0.8, 0.15],
69 ["fade1", 1.2, "box1", "opacity", 0.2, 0.15],
70 ["fade1", 1.2, "box2", "opacity", 0.8, 0.15],
71 ["fade1", 1.2, "box3", "opacity", 0.8, 0.15],
72 ["fade1", 1.2, "box4", "opacity", 0.2, 0.15],
73 ["fade2", 0.2, "box5", "opacity", 0.4, 0.15],
74 ["fade2", 0.2, "box6", "opacity", 0.4, 0.15],
75 ["fade2", 0.2, "box7", "opacity", 0.7, 0.15],
76 ["fade2", 0.2, "box8", "opacity", 0.7, 0.15],
77 ["fade2", 1.2, "box5", "opacity", 0.4, 0.15],
78 ["fade2", 1.2, "box6", "opacity", 0.7, 0.15],
79 ["fade2", 1.2, "box7", "opacity", 0.7, 0.15],
80 ["fade2", 1.2, "box8", "opacity", 0.4, 0.15],
83 runAnimationTest(expectedValues);
88 <div id="box1" class="box fade1 normal">2 keyframes: normal</div>
89 <div id="box2" class="box fade1 alternate">2 keyframes: alternate</div>
90 <div id="box3" class="box fade1 reverse">2 keyframes: reverse</div>
91 <div id="box4" class="box fade1 alternate-reverse">2 keyframes: alternate-reverse</div>
92 <div id="box5" class="box fade2 normal">4 keyframes: normal</div>
93 <div id="box6" class="box fade2 alternate">4 keyframes: alternate</div>
94 <div id="box7" class="box fade2 reverse">4 keyframes: reverse</div>
95 <div id="box8" class="box fade2 alternate-reverse">4 keyframes: alternate-reverse</div>
96 <div id="result"></div>