Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(5)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/animations/keyframes-rule.html

Issue 1577723002: Devtools: Add editable keyframes to the styles sidebar pane (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Created 4 years, 11 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/keyframes-find-rule.html ('k') | third_party/WebKit/LayoutTests/animations/keyframes-rule-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <style type="text/css" media="screen"> 3 <style type="text/css" media="screen">
4 @-webkit-keyframes test1 { 4 @-webkit-keyframes test1 {
5 from { left: 10px; } 5 from { left: 10px; }
6 to { left: 20px; } 6 to { left: 20px; }
7 } 7 }
8 @-webkit-keyframes test2 { 8 @-webkit-keyframes test2 {
9 from { left: 10px; } 9 from { left: 10px; }
10 to { left: 20px; } 10 to { left: 20px; }
(...skipping 133 matching lines...) Expand 10 before | Expand all | Expand 10 after
144 debug("Keys"); 144 debug("Keys");
145 145
146 var keyframes3 = document.styleSheets.item(0).cssRules.item(2); 146 var keyframes3 = document.styleSheets.item(0).cssRules.item(2);
147 shouldBe("keyframes3.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE"); 147 shouldBe("keyframes3.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
148 shouldBe("keyframes3.name", "'test3'"); 148 shouldBe("keyframes3.name", "'test3'");
149 149
150 var rules3 = keyframes3.cssRules; 150 var rules3 = keyframes3.cssRules;
151 shouldBe("rules3.length", "3"); 151 shouldBe("rules3.length", "3");
152 shouldBe("rules3.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 152 shouldBe("rules3.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
153 shouldBe("rules3.item(0).keyText", "'0%'"); 153 shouldBe("rules3.item(0).keyText", "'0%'");
154 shouldBe("rules3.item(1).keyText", "'50%,60%'"); 154 shouldBe("rules3.item(1).keyText", "'50%, 60%'");
155 shouldBe("rules3.item(2).keyText", "'90%,100%'"); 155 shouldBe("rules3.item(2).keyText", "'90%, 100%'");
156 shouldBe("rules3.item(0).cssText", "'0% { left: 10px; }'"); 156 shouldBe("rules3.item(0).cssText", "'0% { left: 10px; }'");
157 shouldBe("rules3.item(1).cssText", "'50%,60% { left: 30px; }'"); 157 shouldBe("rules3.item(1).cssText", "'50%, 60% { left: 30px; }'");
158 shouldBe("rules3.item(2).cssText", "'90%,100% { left: 20px; }'"); 158 shouldBe("rules3.item(2).cssText", "'90%, 100% { left: 20px; }'");
159 159
160 debug(""); 160 debug("");
161 debug("Find a rule"); 161 debug("Find a rule");
162 162
163 shouldBeType("rules3.item(0).style", "CSSStyleDeclaration"); 163 shouldBeType("rules3.item(0).style", "CSSStyleDeclaration");
164 shouldBe("rules3.item(0).style.length", "1"); 164 shouldBe("rules3.item(0).style.length", "1");
165 var rule = keyframes3.findRule("0%"); 165 var rule = keyframes3.findRule("0%");
166 166
167 if (!rule) 167 if (!rule)
168 testFailed("Could not extract '0%' keyframe rule"); 168 testFailed("Could not extract '0%' keyframe rule");
169 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 169 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
170 shouldBe("rule.cssText", "'0% { left: 10px; }'"); 170 shouldBe("rule.cssText", "'0% { left: 10px; }'");
171 171
172 debug(""); 172 debug("");
173 debug("Find a rule with multiple key values"); 173 debug("Find a rule with multiple key values");
174 var rule = keyframes3.findRule("50%,60%"); 174 var rule = keyframes3.findRule("50%, 60%");
175 175
176 if (!rule) 176 if (!rule)
177 testFailed("Could not extract '50%,60%' keyframe rule"); 177 testFailed("Could not extract '50%,60%' keyframe rule");
178 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 178 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
179 shouldBe("rule.cssText", "'50%,60% { left: 30px; }'"); 179 shouldBe("rule.cssText", "'50%, 60% { left: 30px; }'");
180 180
181 debug(""); 181 debug("");
182 debug("Find a rule using from and to"); 182 debug("Find a rule using from and to");
183 183
184 var keyframes4 = document.styleSheets.item(0).cssRules.item(3); 184 var keyframes4 = document.styleSheets.item(0).cssRules.item(3);
185 shouldBe("keyframes4.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE"); 185 shouldBe("keyframes4.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
186 186
187 rule = keyframes4.findRule("From"); 187 rule = keyframes4.findRule("From");
188 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 188 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
189 shouldBe("rule.cssText", "'0% { left: 10px; }'"); 189 shouldBe("rule.cssText", "'0% { left: 10px; }'");
(...skipping 13 matching lines...) Expand all
203 203
204 debug(""); 204 debug("");
205 debug("Delete a rule"); 205 debug("Delete a rule");
206 206
207 var keyframes5 = document.styleSheets.item(0).cssRules.item(4); 207 var keyframes5 = document.styleSheets.item(0).cssRules.item(4);
208 keyframes5.deleteRule("50%,60%"); 208 keyframes5.deleteRule("50%,60%");
209 var rules5 = keyframes5.cssRules; 209 var rules5 = keyframes5.cssRules;
210 shouldBe("rules5.length", "2"); 210 shouldBe("rules5.length", "2");
211 shouldBe("rules5.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 211 shouldBe("rules5.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
212 shouldBe("rules5.item(0).keyText", "'0%'"); 212 shouldBe("rules5.item(0).keyText", "'0%'");
213 shouldBe("rules5.item(1).keyText", "'90%,100%'"); 213 shouldBe("rules5.item(1).keyText", "'90%, 100%'");
214 214
215 debug(""); 215 debug("");
216 debug("Delete a from rule"); 216 debug("Delete a from rule");
217 217
218 var keyframes6 = document.styleSheets.item(0).cssRules.item(5); 218 var keyframes6 = document.styleSheets.item(0).cssRules.item(5);
219 keyframes6.deleteRule("0%"); 219 keyframes6.deleteRule("0%");
220 var rules6 = keyframes6.cssRules; 220 var rules6 = keyframes6.cssRules;
221 shouldBe("rules6.length", "2"); 221 shouldBe("rules6.length", "2");
222 shouldBe("rules6.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 222 shouldBe("rules6.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
223 shouldBe("rules6.item(0).keyText", "'50%'"); 223 shouldBe("rules6.item(0).keyText", "'50%'");
224 shouldBe("rules6.item(1).keyText", "'100%'"); 224 shouldBe("rules6.item(1).keyText", "'100%'");
225 225
226 debug(""); 226 debug("");
227 debug("Delete a rule that doesn't exist"); 227 debug("Delete a rule that doesn't exist");
228 228
229 var keyframes7 = document.styleSheets.item(0).cssRules.item(6); 229 var keyframes7 = document.styleSheets.item(0).cssRules.item(6);
230 keyframes7.deleteRule("70%"); 230 keyframes7.deleteRule("70%");
231 var rules7 = keyframes7.cssRules; 231 var rules7 = keyframes7.cssRules;
232 shouldBe("rules7.length", "2"); 232 shouldBe("rules7.length", "2");
233 shouldBe("rules7.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 233 shouldBe("rules7.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
234 shouldBe("rules7.item(0).keyText", "'0%'"); 234 shouldBe("rules7.item(0).keyText", "'0%'");
235 shouldBe("rules7.item(1).keyText", "'90%,100%'"); 235 shouldBe("rules7.item(1).keyText", "'90%, 100%'");
236 236
237 debug(""); 237 debug("");
238 debug("Set a keyframe key"); 238 debug("Set a keyframe key");
239 239
240 var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules; 240 var rules8 = document.styleSheets.item(0).cssRules.item(7).cssRules;
241 rules8.item(0).keyText = "70%"; 241 rules8.item(0).keyText = "70%";
242 shouldBe("rules8.length", "2"); 242 shouldBe("rules8.length", "2");
243 shouldBe("rules8.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 243 shouldBe("rules8.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
244 shouldBe("rules8.item(0).keyText", "'70%'"); 244 shouldBe("rules8.item(0).keyText", "'70%'");
245 shouldBe("rules8.item(1).keyText", "'90%,100%'"); 245 shouldBe("rules8.item(1).keyText", "'90%, 100%'");
246 246
247 debug(""); 247 debug("");
248 debug("Set a keyframe key with 'from'"); 248 debug("Set a keyframe key with 'from'");
249 249
250 var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules; 250 var rules9 = document.styleSheets.item(0).cssRules.item(8).cssRules;
251 rules9.item(0).keyText = "from"; 251 rules9.item(0).keyText = "from";
252 shouldBe("rules9.length", "2"); 252 shouldBe("rules9.length", "2");
253 shouldBe("rules9.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 253 shouldBe("rules9.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
254 shouldBe("rules9.item(0).keyText", "'0%'"); 254 shouldBe("rules9.item(0).keyText", "'0%'");
255 shouldBe("rules9.item(1).keyText", "'90%,100%'"); 255 shouldBe("rules9.item(1).keyText", "'90%, 100%'");
256 256
257 debug(""); 257 debug("");
258 debug("Set a keyframe key with multiple values"); 258 debug("Set a keyframe key with multiple values");
259 259
260 var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules; 260 var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
261 rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to"; 261 rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
262 shouldBe("rules10.length", "2"); 262 shouldBe("rules10.length", "2");
263 shouldBe("rules10.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 263 shouldBe("rules10.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
264 shouldBe("rules10.item(0).keyText", "'0%,10%,0%,20%,30%,100%'"); 264 shouldBe("rules10.item(0).keyText", "'0%, 10%, 0%, 20%, 30%, 100%'");
265 shouldBe("rules10.item(1).keyText", "'90%,100%'"); 265 shouldBe("rules10.item(1).keyText", "'90%, 100%'");
266 266
267 debug(""); 267 debug("");
268 debug("Set a keyframe key with an out-of-range value"); 268 debug("Set a keyframe key with an out-of-range value");
269 269
270 var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules; 270 var rules11 = document.styleSheets.item(0).cssRules.item(10).cssRules;
271 shouldThrow('rules11.item(0).keyText = "40%, -50%, 60%";'); 271 shouldThrow('rules11.item(0).keyText = "40%, -50%, 60%";');
272 shouldBe("rules11.length", "2"); 272 shouldBe("rules11.length", "2");
273 shouldBe("rules11.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 273 shouldBe("rules11.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
274 shouldBe("rules11.item(0).keyText", "'0%'"); 274 shouldBe("rules11.item(0).keyText", "'0%'");
275 shouldBe("rules11.item(1).keyText", "'90%,100%'"); 275 shouldBe("rules11.item(1).keyText", "'90%, 100%'");
276 276
277 debug(""); 277 debug("");
278 debug("Set a keyframe key with an invalid value"); 278 debug("Set a keyframe key with an invalid value");
279 279
280 var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules; 280 var rules12 = document.styleSheets.item(0).cssRules.item(11).cssRules;
281 shouldThrow('rules12.item(0).keyText = "foo";'); 281 shouldThrow('rules12.item(0).keyText = "foo";');
282 shouldBe("rules12.length", "2"); 282 shouldBe("rules12.length", "2");
283 shouldBe("rules12.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 283 shouldBe("rules12.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
284 shouldBe("rules12.item(0).keyText", "'0%'"); 284 shouldBe("rules12.item(0).keyText", "'0%'");
285 shouldBe("rules12.item(1).keyText", "'90%,100%'"); 285 shouldBe("rules12.item(1).keyText", "'90%, 100%'");
286 286
287 debug(""); 287 debug("");
288 debug("Set a keyframe key with a null value"); 288 debug("Set a keyframe key with a null value");
289 289
290 var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules; 290 var rules13 = document.styleSheets.item(0).cssRules.item(12).cssRules;
291 shouldThrow('rules13.item(0).keyText = null;'); 291 shouldThrow('rules13.item(0).keyText = null;');
292 shouldBe("rules13.length", "2"); 292 shouldBe("rules13.length", "2");
293 shouldBe("rules13.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 293 shouldBe("rules13.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
294 shouldBe("rules13.item(0).keyText", "'0%'"); 294 shouldBe("rules13.item(0).keyText", "'0%'");
295 shouldBe("rules13.item(1).keyText", "'90%,100%'"); 295 shouldBe("rules13.item(1).keyText", "'90%, 100%'");
296 296
297 </script> 297 </script>
298 </body> 298 </body>
299 </html> 299 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/animations/keyframes-find-rule.html ('k') | third_party/WebKit/LayoutTests/animations/keyframes-rule-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698