Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / animations / fill-mode-multiple-keyframes.html
blob485c032e32ecaa2dd81c87e6f2e69c6935489100
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
4 <html lang="en">
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Test simple animation with fill modes</title>
8 <style type="text/css" media="screen">
9 .box {
10 position: relative;
11 left: 100px;
12 top: 10px;
13 height: 30px;
14 width: 200px;
15 -webkit-animation-delay: 0.1s;
16 -webkit-animation-duration: 0.1s;
17 -webkit-animation-timing-function: linear;
20 .two-keyframes {
21 -webkit-animation-name: anim1;
24 .three-keyframes {
25 -webkit-animation-name: anim2;
28 @-webkit-keyframes anim1 {
29 from { left: 200px; }
30 to { left: 300px; }
32 @-webkit-keyframes anim2 {
33 from { left: 200px; }
34 50% { left: 250px; }
35 to { left: 300px; }
38 #a, #f {
39 background-color: blue;
40 -webkit-animation-fill-mode: none;
42 #b, #g {
43 background-color: red;
44 -webkit-animation-fill-mode: backwards;
46 #c, #h {
47 background-color: green;
48 -webkit-animation-fill-mode: forwards;
50 #d, #i {
51 background-color: yellow;
52 -webkit-animation-fill-mode: both;
54 #e, #j {
55 background-color: #999;
56 -webkit-animation-fill-mode: both;
57 -webkit-animation-iteration-count: 2;
58 -webkit-animation-direction: alternate;
60 </style>
61 <script type="text/javascript" charset="utf-8">
62 const numAnims = 10;
63 var animsFinished = 0;
64 const allowance = 5;
65 const expectedValues = [
66 {id: "a", start: 100, end: 100},
67 {id: "b", start: 200, end: 100},
68 {id: "c", start: 100, end: 300},
69 {id: "d", start: 200, end: 300},
70 {id: "e", start: 200, end: 200},
71 {id: "f", start: 100, end: 100},
72 {id: "g", start: 200, end: 100},
73 {id: "h", start: 100, end: 300},
74 {id: "i", start: 200, end: 300},
75 {id: "j", start: 200, end: 200}
77 var result = "";
79 if (window.testRunner) {
80 testRunner.dumpAsText();
81 testRunner.waitUntilDone();
84 function animationEnded(event) {
85 if (++animsFinished == numAnims) {
86 setTimeout(endTest, 0); // this set timeout should be ok in the test environment
87 // since we're just giving style a chance to resolve
91 function endTest() {
93 for (var i=0; i < expectedValues.length; i++) {
94 var el = document.getElementById(expectedValues[i].id);
95 var expectedValue = expectedValues[i].end;
96 var realValue = parseFloat(window.getComputedStyle(el).left);
97 if (Math.abs(expectedValue - realValue) < allowance) {
98 result += "PASS";
99 } else {
100 result += "FAIL";
102 result += " - end of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
104 document.getElementById('result').innerHTML = result;
106 if (window.testRunner)
107 testRunner.notifyDone();
110 window.onload = function () {
111 for (var i=0; i < expectedValues.length; i++) {
112 var el = document.getElementById(expectedValues[i].id);
113 var expectedValue = expectedValues[i].start;
114 var realValue = parseFloat(window.getComputedStyle(el).left);
115 if (Math.abs(expectedValue - realValue) < allowance) {
116 result += "PASS";
117 } else {
118 result += "FAIL";
120 result += " - start of animation - id: " + expectedValues[i].id + " expected: " + expectedValue + " actual: " + realValue + "<br>";
122 document.addEventListener("webkitAnimationEnd", animationEnded, false);
125 </script>
126 </head>
127 <body>
128 This test performs an animation of the left property with four different
129 fill modes on two sets of objects. The first set has animations with
130 only from and to keyframes. The second set has animations with from, to and
131 a third keyframe at 50%. It animates over 0.1 second with a 0.1 second delay.
132 It takes snapshots at document load and the end of the animation.
134 <div id="a" class="box two-keyframes">
135 None - 2 keyframes
136 </div>
137 <div id="b" class="box two-keyframes">
138 Backwards - 2 keyframes
139 </div>
140 <div id="c" class="box two-keyframes">
141 Forwards - 2 keyframes
142 </div>
143 <div id="d" class="box two-keyframes">
144 Both - 2 keyframes
145 </div>
146 <div id="e" class="box two-keyframes">
147 Both iterating - 2 keyframes
148 </div>
150 <div id="f" class="box three-keyframes">
151 None - 3 keyframes
152 </div>
153 <div id="g" class="box three-keyframes">
154 Backwards - 3 keyframes
155 </div>
156 <div id="h" class="box three-keyframes">
157 Forwards - 3 keyframes
158 </div>
159 <div id="i" class="box three-keyframes">
160 Both - 3 keyframes
161 </div>
162 <div id="j" class="box three-keyframes">
163 Both iterating - 3 keyframes
164 </div>
166 <div id="result">
167 </div>
168 </body>
169 </html>