OLD | NEW |
| (Empty) |
1 <!-- | |
2 Copyright 2012 Google Inc. All Rights Reserved. | |
3 | |
4 Licensed under the Apache License, Version 2.0 (the "License"); | |
5 you may not use this file except in compliance with the License. | |
6 You may obtain a copy of the License at | |
7 | |
8 http://www.apache.org/licenses/LICENSE-2.0 | |
9 | |
10 Unless required by applicable law or agreed to in writing, software | |
11 distributed under the License is distributed on an "AS IS" BASIS, | |
12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
13 See the License for the specific language governing permissions and | |
14 limitations under the License. | |
15 --> | |
16 | |
17 <!DOCTYPE html><meta charset="UTF-8"> | |
18 <style> | |
19 td.anim { | |
20 height: 200px; | |
21 width: 200px; | |
22 } | |
23 </style> | |
24 <table> | |
25 <tr><td id="a" class="anim"></td><td id="b" class="anim"></td><td id="c" class="
anim"></td></tr> | |
26 <tr><td id="d" class="anim"></td><td id="e" class="anim"></td><td id="f" class="
anim"></td></tr> | |
27 <tr><td id="g" class="anim"></td><td id="h" class="anim"></td><td id="i" class="
anim"></td></tr> | |
28 </table> | |
29 | |
30 <script> | |
31 var expected_failures = [ | |
32 { | |
33 browser_configurations: [{ msie: true }], | |
34 tests: ['Auto.*'], | |
35 message: 'IE returns rgba always.', | |
36 } | |
37 ]; | |
38 </script> | |
39 <script src="../bootstrap.js"></script> | |
40 <script> | |
41 "use strict"; | |
42 | |
43 var colors = [ | |
44 'aliceblue', | |
45 'antiquewhite', | |
46 'aqua', | |
47 'aquamarine', | |
48 'azure', | |
49 'beige', | |
50 'bisque', | |
51 'black', | |
52 'blanchedalmond', | |
53 'blue', | |
54 'blueviolet', | |
55 'brown', | |
56 'burlywood', | |
57 'cadetblue', | |
58 'chartreuse', | |
59 'chocolate', | |
60 'coral', | |
61 'cornflowerblue', | |
62 'cornsilk', | |
63 'crimson', | |
64 'cyan', | |
65 'darkblue', | |
66 'darkcyan', | |
67 'darkgoldenrod', | |
68 'darkgray', | |
69 'darkgreen', | |
70 'darkgrey', | |
71 'darkkhaki', | |
72 'darkmagenta', | |
73 'darkolivegreen', | |
74 'darkorange', | |
75 'darkorchid', | |
76 'darkred', | |
77 'darksalmon', | |
78 'darkseagreen', | |
79 'darkslateblue', | |
80 'darkslategray', | |
81 'darkslategrey', | |
82 'darkturquoise', | |
83 'darkviolet', | |
84 'deeppink', | |
85 'deepskyblue', | |
86 'dimgray', | |
87 'dimgrey', | |
88 'dodgerblue', | |
89 'firebrick', | |
90 'floralwhite', | |
91 'forestgreen', | |
92 'fuchsia', | |
93 'gainsboro', | |
94 'ghostwhite', | |
95 'gold', | |
96 'goldenrod', | |
97 'gray', | |
98 'green', | |
99 'greenyellow', | |
100 'grey', | |
101 'honeydew', | |
102 'hotpink', | |
103 'indianred', | |
104 'indigo', | |
105 'ivory', | |
106 'khaki', | |
107 'lavender', | |
108 'lavenderblush', | |
109 'lawngreen', | |
110 'lemonchiffon', | |
111 'lightblue', | |
112 'lightcoral', | |
113 'lightcyan', | |
114 'lightgoldenrodyellow', | |
115 'lightgray', | |
116 'lightgreen', | |
117 'lightgrey', | |
118 'lightpink', | |
119 'lightsalmon', | |
120 'lightseagreen', | |
121 'lightskyblue', | |
122 'lightslategray', | |
123 'lightslategrey', | |
124 'lightsteelblue', | |
125 'lightyellow', | |
126 'lime', | |
127 'limegreen', | |
128 'linen', | |
129 'magenta', | |
130 'maroon', | |
131 'mediumaquamarine', | |
132 'mediumblue', | |
133 'mediumorchid', | |
134 'mediumpurple', | |
135 'mediumseagreen', | |
136 'mediumslateblue', | |
137 'mediumspringgreen', | |
138 'mediumturquoise', | |
139 'mediumvioletred', | |
140 'midnightblue', | |
141 'mintcream', | |
142 'mistyrose', | |
143 'moccasin', | |
144 'navajowhite', | |
145 'navy', | |
146 'oldlace', | |
147 'olive', | |
148 'olivedrab', | |
149 'orange', | |
150 'orangered', | |
151 'orchid', | |
152 'palegoldenrod', | |
153 'palegreen', | |
154 'paleturquoise', | |
155 'palevioletred', | |
156 'papayawhip', | |
157 'peachpuff', | |
158 'peru', | |
159 'pink', | |
160 'plum', | |
161 'powderblue', | |
162 'purple', | |
163 'red', | |
164 'rosybrown', | |
165 'royalblue', | |
166 'saddlebrown', | |
167 'salmon', | |
168 'sandybrown', | |
169 'seagreen', | |
170 'seashell', | |
171 'sienna', | |
172 'silver', | |
173 'skyblue', | |
174 'slateblue', | |
175 'slategray', | |
176 'slategrey', | |
177 'snow', | |
178 'springgreen', | |
179 'steelblue', | |
180 'tan', | |
181 'teal', | |
182 'thistle', | |
183 'tomato', | |
184 'turquoise', | |
185 'violet', | |
186 'wheat', | |
187 'white', | |
188 'whitesmoke', | |
189 'yellow', | |
190 'yellowgreen']; | |
191 | |
192 var divs = document.querySelectorAll('td.anim'); | |
193 var sliceSize = colors.length / 9; | |
194 for (var i = 0; i < divs.length; i++) { | |
195 var colorsToAnimate = colors.slice(i * sliceSize, (i + 1) * sliceSize); | |
196 var effect = colorsToAnimate.map(function(value) { | |
197 return { backgroundColor: value }; | |
198 }); | |
199 document.timeline.play(new Animation(divs[i], effect, {duration: 4 * 1000, fil
l: 'forwards'})); | |
200 } | |
201 | |
202 //document.timeline.play(new Animation(document.body, | |
203 // {'backgroundColor': colors}, colors.length * 2 / 60)); | |
204 </script> | |
OLD | NEW |