Devtools: Add editable keyframes to the styles sidebar pane

third_party/WebKit/LayoutTests/animations/keyframes-rule.html

Index: third_party/WebKit/LayoutTests/animations/keyframes-rule.html
diff --git a/third_party/WebKit/LayoutTests/animations/keyframes-rule.html b/third_party/WebKit/LayoutTests/animations/keyframes-rule.html
index a16cd24ca18c4939df791edd1eed7ada267d1077..9b65228255e48b4ba93afb58f64151b28ff8a7dc 100644
--- a/third_party/WebKit/LayoutTests/animations/keyframes-rule.html
+++ b/third_party/WebKit/LayoutTests/animations/keyframes-rule.html
@@ -151,11 +151,11 @@ var rules3 = keyframes3.cssRules;
 shouldBe("rules3.length", "3");
 shouldBe("rules3.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules3.item(0).keyText", "'0%'");
-shouldBe("rules3.item(1).keyText", "'50%,60%'");
-shouldBe("rules3.item(2).keyText", "'90%,100%'");
+shouldBe("rules3.item(1).keyText", "'50%, 60%'");
+shouldBe("rules3.item(2).keyText", "'90%, 100%'");
 shouldBe("rules3.item(0).cssText", "'0% { left: 10px; }'");
-shouldBe("rules3.item(1).cssText", "'50%,60% { left: 30px; }'");
-shouldBe("rules3.item(2).cssText", "'90%,100% { left: 20px; }'");
+shouldBe("rules3.item(1).cssText", "'50%, 60% { left: 30px; }'");
+shouldBe("rules3.item(2).cssText", "'90%, 100% { left: 20px; }'");
 
 debug("");
 debug("Find a rule");
@@ -171,12 +171,12 @@ shouldBe("rule.cssText", "'0% { left: 10px; }'");
 
 debug("");
 debug("Find a rule with multiple key values");
-var rule = keyframes3.findRule("50%,60%");
+var rule = keyframes3.findRule("50%, 60%");
 
 if (!rule)
   testFailed("Could not extract '50%,60%' keyframe rule");
 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
-shouldBe("rule.cssText", "'50%,60% { left: 30px; }'");
+shouldBe("rule.cssText", "'50%, 60% { left: 30px; }'");
 
 debug("");
 debug("Find a rule using from and to");
@@ -210,7 +210,7 @@ var rules5 = keyframes5.cssRules;
 shouldBe("rules5.length", "2");
 shouldBe("rules5.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules5.item(0).keyText", "'0%'");
-shouldBe("rules5.item(1).keyText", "'90%,100%'");
+shouldBe("rules5.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Delete a from rule");
@@ -232,7 +232,7 @@ var rules7 = keyframes7.cssRules;
 shouldBe("rules7.length", "2");
 shouldBe("rules7.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules7.item(0).keyText", "'0%'");
-shouldBe("rules7.item(1).keyText", "'90%,100%'");
+shouldBe("rules7.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key");
@@ -242,7 +242,7 @@ rules8.item(0).keyText = "70%";
 shouldBe("rules8.length", "2");
 shouldBe("rules8.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules8.item(0).keyText", "'70%'");
-shouldBe("rules8.item(1).keyText", "'90%,100%'");
+shouldBe("rules8.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key with 'from'");
@@ -252,7 +252,7 @@ rules9.item(0).keyText = "from";
 shouldBe("rules9.length", "2");
 shouldBe("rules9.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules9.item(0).keyText", "'0%'");
-shouldBe("rules9.item(1).keyText", "'90%,100%'");
+shouldBe("rules9.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key with multiple values");
@@ -261,8 +261,8 @@ var rules10 = document.styleSheets.item(0).cssRules.item(9).cssRules;
 rules10.item(0).keyText = "0%, 10%, from, 20%, 30%, to";
 shouldBe("rules10.length", "2");
 shouldBe("rules10.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
-shouldBe("rules10.item(0).keyText", "'0%,10%,0%,20%,30%,100%'");
-shouldBe("rules10.item(1).keyText", "'90%,100%'");
+shouldBe("rules10.item(0).keyText", "'0%, 10%, 0%, 20%, 30%, 100%'");
+shouldBe("rules10.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key with an out-of-range value");
@@ -272,7 +272,7 @@ shouldThrow('rules11.item(0).keyText = "40%, -50%, 60%";');
 shouldBe("rules11.length", "2");
 shouldBe("rules11.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules11.item(0).keyText", "'0%'");
-shouldBe("rules11.item(1).keyText", "'90%,100%'");
+shouldBe("rules11.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key with an invalid value");
@@ -282,7 +282,7 @@ shouldThrow('rules12.item(0).keyText = "foo";');
 shouldBe("rules12.length", "2");
 shouldBe("rules12.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules12.item(0).keyText", "'0%'");
-shouldBe("rules12.item(1).keyText", "'90%,100%'");
+shouldBe("rules12.item(1).keyText", "'90%, 100%'");
 
 debug("");
 debug("Set a keyframe key with a null value");
@@ -292,7 +292,7 @@ shouldThrow('rules13.item(0).keyText = null;');
 shouldBe("rules13.length", "2");
 shouldBe("rules13.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
 shouldBe("rules13.item(0).keyText", "'0%'");
-shouldBe("rules13.item(1).keyText", "'90%,100%'");
+shouldBe("rules13.item(1).keyText", "'90%, 100%'");
 
 </script>
 </body>