JS Test Harness: Remove more link tags
[WebKit-https.git] / LayoutTests / animations / animation-api-1.html
1 <html>
2 <head>
3 <style type="text/css" media="screen">
4   @-webkit-keyframes test1 {
5     from { left: 10px; }
6     to { left: 20px; }
7   }
8   @-webkit-keyframes test2 {
9     0% { left: 10px; }
10     50% { left: 30px; }
11     100% { left: 20px; }
12   }
13   #a {
14     -webkit-animation-name: test1;
15     -webkit-animation-duration: 1s;
16   }
17   #b {
18     -webkit-animation-name: test1;
19     -webkit-animation-duration: 2s;
20     -webkit-animation-delay: 3s;
21     -webkit-animation-iteration-count: 4;
22     -webkit-animation-direction: normal;
23     -webkit-animation-fill-mode: none;
24   }
25   #c {
26     -webkit-animation-name: test2;
27     -webkit-animation-duration: 5s;
28     -webkit-animation-delay: -1s;
29     -webkit-animation-iteration-count: infinite;
30     -webkit-animation-direction: alternate;
31     -webkit-animation-fill-mode: forwards;
32   }
33   #d {
34     -webkit-animation-name: test1, test2;
35     -webkit-animation-duration: 1s, 2s;
36     -webkit-animation-delay: 0s, 1s;
37     -webkit-animation-iteration-count: 10, infinite;
38     -webkit-animation-direction: normal, alternate;
39     -webkit-animation-fill-mode: backwards, both;
40   }
41 </style>
42 <script src="../fast/js/resources/js-test-pre.js"></script>
43 </head>
44 <body>
45 <div id="a"></div>
46 <div id="b"></div>
47 <div id="c"></div>
48 <div id="d"></div>
49 <p id="description"></p>
50 <div id="console"></div>
51 <script>
52
53 description("This tests the WebKitAnimation interface.");
54
55 shouldBeDefined("window.WebKitAnimation");
56 shouldBeDefined("window.WebKitAnimationList");
57
58 /* *********************************************** */
59
60 debug("");
61 debug("Test an almost-default animation");
62
63 var a = document.getElementById("a");
64 var a_animations = a.webkitGetAnimations();
65
66 shouldBe("a_animations.length", "1");
67
68 var a_animation_0 = a_animations[0];
69
70 shouldBeDefined("a_animation_0");
71 debug("");
72
73 shouldBe("a_animation_0.name", "'test1'");
74 shouldBe("a_animation_0.duration", "1");
75 shouldBe("a_animation_0.delay", "0");
76 shouldBe("a_animation_0.iterationCount", "1");
77 shouldBe("a_animation_0.paused", "false");
78 shouldBe("a_animation_0.ended", "false");
79 shouldBe("a_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
80 shouldBe("a_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE");
81
82 /* *********************************************** */
83
84 debug("");
85 debug("Test a specified animation");
86
87 var b = document.getElementById("b");
88 var b_animations = b.webkitGetAnimations();
89
90 shouldBe("b_animations.length", "1");
91
92 var b_animation_0 = b_animations[0];
93
94 shouldBeDefined("b_animation_0");
95 debug("");
96
97 shouldBe("b_animation_0.name", "'test1'");
98 shouldBe("b_animation_0.duration", "2");
99 shouldBe("b_animation_0.delay", "3");
100 shouldBe("b_animation_0.iterationCount", "4");
101 shouldBe("b_animation_0.paused", "false");
102 shouldBe("b_animation_0.ended", "false");
103 shouldBe("b_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
104 shouldBe("b_animation_0.fillMode", "window.WebKitAnimation.FILL_NONE");
105
106 /* *********************************************** */
107
108 debug("");
109 debug("Test negative delay, fill mode, direction and infinite iterations");
110
111 var c = document.getElementById("c");
112 var c_animations = c.webkitGetAnimations();
113
114 shouldBe("c_animations.length", "1");
115
116 var c_animation_0 = c_animations[0];
117
118 shouldBeDefined("c_animation_0");
119 debug("");
120
121 shouldBe("c_animation_0.name", "'test2'");
122 shouldBe("c_animation_0.duration", "5");
123 shouldBe("c_animation_0.delay", "-1");
124 shouldBe("c_animation_0.iterationCount", "Number.POSITIVE_INFINITY");
125 shouldBe("c_animation_0.paused", "false");
126 shouldBe("c_animation_0.ended", "false");
127 shouldBe("c_animation_0.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE");
128 shouldBe("c_animation_0.fillMode", "window.WebKitAnimation.FILL_FORWARDS");
129
130 /* *********************************************** */
131
132 debug("");
133 debug("Test multiple animations");
134
135 var d = document.getElementById("d");
136 var d_animations = d.webkitGetAnimations();
137
138 shouldBe("d_animations.length", "2");
139
140 var d_animation_0 = d_animations[0];
141
142 shouldBeDefined("d_animation_0");
143 debug("");
144
145 shouldBe("d_animation_0.name", "'test1'");
146 shouldBe("d_animation_0.duration", "1");
147 shouldBe("d_animation_0.delay", "0");
148 shouldBe("d_animation_0.iterationCount", "10");
149 shouldBe("d_animation_0.paused", "false");
150 shouldBe("d_animation_0.ended", "false");
151 shouldBe("d_animation_0.direction", "window.WebKitAnimation.DIRECTION_NORMAL");
152 shouldBe("d_animation_0.fillMode", "window.WebKitAnimation.FILL_BACKWARDS");
153
154 var d_animation_1 = d_animations[1];
155
156 shouldBeDefined("d_animation_1");
157 debug("");
158
159 shouldBe("d_animation_1.name", "'test2'");
160 shouldBe("d_animation_1.duration", "2");
161 shouldBe("d_animation_1.delay", "1");
162 shouldBe("d_animation_1.iterationCount", "Number.POSITIVE_INFINITY");
163 shouldBe("d_animation_1.paused", "false");
164 shouldBe("d_animation_1.ended", "false");
165 shouldBe("d_animation_1.direction", "window.WebKitAnimation.DIRECTION_ALTERNATE");
166 shouldBe("d_animation_1.fillMode", "window.WebKitAnimation.FILL_BOTH");
167
168 /* *********************************************** */
169
170 debug("");
171 debug("Test element with no animations");
172
173 var e = document.getElementById("description");
174 var e_animations = e.webkitGetAnimations();
175
176 shouldBeNull("e_animations");
177
178 debug("");
179 successfullyParsed = true;
180
181 </script>
182 <script src="../fast/js/resources/js-test-post.js"></script>
183 </body>
184 </html>