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 | |
19 <style> | |
20 .anim { | |
21 display: inline-block; | |
22 } | |
23 #allToInitial, #border, #borderSpacing, #padding, #table, td { | |
24 border-style: solid; | |
25 } | |
26 #outline { | |
27 outline-style: solid; | |
28 left: 20px; | |
29 width: 100px; | |
30 } | |
31 </style> | |
32 | |
33 <table id="allToInitial" class="anim"><tr><td>All initial.</td><td>All initial.<
/td></tr></table> | |
34 <pre id="background" class="anim">background-color</pre> | |
35 <pre id="border" class="anim">border-width | |
36 border-radius | |
37 border-color</pre> | |
38 <table id="table" class="anim"> | |
39 <tr> | |
40 <td>border-spacing<br>vertical-align</td> | |
41 <td>border-spacing<br>vertical-align</td> | |
42 </tr> | |
43 </table> | |
44 <pre id="opacity" class="anim">opacity</pre> | |
45 <br> | |
46 <pre id="outline" class="anim">outline</pre> | |
47 <pre id="padding" class="anim">padding</pre> | |
48 <pre id="transform" class="anim">transform</pre> | |
49 <br> | |
50 <pre id="text" class="anim">color | |
51 font-size | |
52 font-weight | |
53 letter-spacing | |
54 line-height | |
55 text-indent | |
56 text-shadow | |
57 word-spacing | |
58 word word word word</pre> | |
59 | |
60 <script> | |
61 var expected_failures = [ | |
62 { | |
63 browser_configurations: [{ firefox: true }], | |
64 tests: ['#background at t=0ms'], | |
65 message: 'rgb(0, 0, 0) gets converted to transparent in Firefox.', | |
66 }, { | |
67 browser_configurations: [{ firefox: true }], | |
68 tests: ['#background at t=1000ms'], | |
69 message: 'FIXME: Transparency is wrong.', | |
70 }, { | |
71 browser_configurations: [{ firefox: true }], | |
72 tests: ['#border at t=2000ms'], | |
73 message: 'FIXME: Border is wrong.', | |
74 }, { | |
75 browser_configurations: [{ msie: true }], | |
76 tests: ['#transform at t=0ms'], | |
77 message: 'none in IE.', | |
78 }, { | |
79 browser_configurations: [{ msie: true }], | |
80 tests: ['#transform at t=1000ms'], | |
81 message: 'Very small value floating point issue.', | |
82 }, { | |
83 browser_configurations: [{ msie: true }], | |
84 tests: [ | |
85 '#(background|border) at t=(1|2)000ms', | |
86 '#text at t=0000ms', | |
87 '#(text|outline) at t=(1|2)000ms', | |
88 ], | |
89 message: 'IE returns rbga values.', | |
90 }, { | |
91 browser_configurations: [ | |
92 { chrome: true, version: '30|31' }, | |
93 { firefox: true }, | |
94 ], | |
95 tests: ['#text at t=(0|1000)ms'], | |
96 message: 'Different initial font-size.', | |
97 } | |
98 ]; | |
99 </script> | |
100 <script src="../bootstrap.js"></script> | |
101 <script> | |
102 "use strict"; | |
103 | |
104 var timing = {duration: 2 * 1000, fill: 'forwards'}; | |
105 | |
106 document.timeline.play(new Animation(document.querySelector('#allToInitial'), [{ | |
107 backgroundColor: 'initial', | |
108 backgroundPosition: 'initial', | |
109 borderBottomColor: 'initial', | |
110 borderBottomLeftRadius: 'initial', | |
111 borderBottomRightRadius: 'initial', | |
112 borderBottomWidth: 'initial', | |
113 borderLeftColor: 'initial', | |
114 borderLeftWidth: 'initial', | |
115 borderRightColor: 'initial', | |
116 borderRightWidth: 'initial', | |
117 borderSpacing: 'initial', | |
118 borderTopColor: 'initial', | |
119 borderTopLeftRadius: 'initial', | |
120 borderTopRightRadius: 'initial', | |
121 borderTopWidth: 'initial', | |
122 bottom: 'initial', | |
123 color: 'initial', | |
124 fontSize: 'initial', | |
125 fontWeight: 'initial', | |
126 height: 'initial', | |
127 left: 'initial', | |
128 letterSpacing: 'initial', | |
129 lineHeight: 'initial', | |
130 marginBottom: 'initial', | |
131 marginLeft: 'initial', | |
132 marginRight: 'initial', | |
133 marginTop: 'initial', | |
134 maxHeight: 'initial', | |
135 maxWidth: 'initial', | |
136 minHeight: 'initial', | |
137 minWidth: 'initial', | |
138 opacity: 'initial', | |
139 outlineColor: 'initial', | |
140 outlineOffset: 'initial', | |
141 outlineWidth: 'initial', | |
142 paddingBottom: 'initial', | |
143 paddingLeft: 'initial', | |
144 paddingRight: 'initial', | |
145 paddingTop: 'initial', | |
146 right: 'initial', | |
147 textIndent: 'initial', | |
148 textShadow: 'initial', | |
149 top: 'initial', | |
150 transform: 'initial', | |
151 verticalAlign: 'initial', | |
152 visibility: 'initial', | |
153 width: 'initial', | |
154 wordSpacing: 'initial', | |
155 zIndex: 'initial', | |
156 }], timing)); | |
157 | |
158 document.timeline.play(new Animation(document.querySelector('#background'), [{ b
ackgroundColor: 'initial' }, { backgroundColor: 'green' }], timing)); | |
159 | |
160 document.timeline.play(new Animation(document.querySelector('#border'), [{ | |
161 borderBottomColor: 'initial', | |
162 borderBottomLeftRadius: 'initial', | |
163 borderBottomRightRadius: 'initial', | |
164 borderBottomWidth: 'initial', | |
165 borderLeftColor: 'initial', | |
166 borderLeftWidth: 'initial', | |
167 borderRightColor: 'initial', | |
168 borderRightWidth: 'initial', | |
169 borderTopColor: 'initial', | |
170 borderTopLeftRadius: 'initial', | |
171 borderTopRightRadius: 'initial', | |
172 borderTopWidth: 'initial', | |
173 }, { | |
174 borderBottomColor: 'lime', | |
175 borderBottomLeftRadius: '50px', | |
176 borderBottomRightRadius: '50px', | |
177 borderBottomWidth: '10px', | |
178 borderLeftColor: 'lime', | |
179 borderLeftWidth: '10px', | |
180 borderRightColor: 'lime', | |
181 borderRightWidth: '10px', | |
182 borderTopColor: 'lime', | |
183 borderTopLeftRadius: '50px', | |
184 borderTopRightRadius: '50px', | |
185 borderTopWidth: '10px', | |
186 }], timing)); | |
187 | |
188 document.timeline.play(new Animation(document.querySelector('#table'), [{ | |
189 borderSpacing: 'initial', | |
190 verticalAlign: 'initial', | |
191 }, { | |
192 borderSpacing: '10px', | |
193 verticalAlign: '10px', | |
194 }], timing)); | |
195 | |
196 document.timeline.play(new Animation(document.querySelector('#opacity'), [{ opac
ity: 'initial' }, { opacity: '0.25' }], timing)); | |
197 | |
198 document.timeline.play(new Animation(document.querySelector('#outline'), [{ | |
199 outlineColor: 'initial', | |
200 outlineWidth: 'initial', | |
201 outlineOffset: 'initial', | |
202 }, { | |
203 outlineColor: 'green', | |
204 outlineWidth: '10px', | |
205 outlineOffset: '10px', | |
206 }], timing)); | |
207 | |
208 document.timeline.play(new Animation(document.querySelector('#padding'), [{ | |
209 paddingBottom: 'initial', | |
210 paddingLeft: 'initial', | |
211 paddingRight: 'initial', | |
212 paddingTop: 'initial', | |
213 }, { | |
214 paddingBottom: '50px', | |
215 paddingLeft: '50px', | |
216 paddingRight: '50px', | |
217 paddingTop: '50px', | |
218 }], timing)); | |
219 | |
220 document.timeline.play(new Animation(document.querySelector('#transform'), [{ tr
ansform: 'initial' }, { transform: 'rotate(360deg)' }], timing)); | |
221 | |
222 document.timeline.play(new Animation(document.querySelector('#text'), [{ | |
223 color: 'initial', | |
224 fontSize: 'initial', | |
225 fontWeight: 'initial', | |
226 letterSpacing: 'initial', | |
227 lineHeight: 'initial', | |
228 textIndent: 'initial', | |
229 textShadow: 'initial', | |
230 wordSpacing: 'initial', | |
231 }, { | |
232 color: 'green', | |
233 fontSize: '30px', | |
234 fontWeight: '900', | |
235 letterSpacing: '5px', | |
236 lineHeight: '200%', | |
237 textIndent: '50px', | |
238 textShadow: '10px 10px 50px lime', | |
239 wordSpacing: '100px', | |
240 }], timing)); | |
241 | |
242 </script> | |
OLD | NEW |