Improve validation of animation-name and will-change properties.

More carefully validate the <ident> type, since the CSS spec gives
various restrictions on the identifiers allowed.

Author: cscott

src/css/Properties.js

@@ -18,7 +18,7 @@ var Properties = {
     "animation-duration"            : { multi: "<time>", comma: true },
     "animation-fill-mode"           : { multi: "none | forwards | backwards | both", comma: true },
     "animation-iteration-count"     : { multi: "<number> | infinite", comma: true },
-    "animation-name"                : { multi: "none | <ident>", comma: true },
+    "animation-name"                : { multi: "none | initial | inherit | unset | <single-animation-name>", comma: true },
     "animation-play-state"          : { multi: "running | paused", comma: true },
     "animation-timing-function"     : 1,
 
@@ -27,29 +27,29 @@ var Properties = {
     "-moz-animation-direction"           : { multi: "normal | alternate", comma: true },
     "-moz-animation-duration"            : { multi: "<time>", comma: true },
     "-moz-animation-iteration-count"     : { multi: "<number> | infinite", comma: true },
-    "-moz-animation-name"                : { multi: "none | <ident>", comma: true },
+    "-moz-animation-name"                : { multi: "none | initial | inherit | unset | <single-animation-name>", comma: true },
     "-moz-animation-play-state"          : { multi: "running | paused", comma: true },
 
     "-ms-animation-delay"               : { multi: "<time>", comma: true },
     "-ms-animation-direction"           : { multi: "normal | alternate", comma: true },
     "-ms-animation-duration"            : { multi: "<time>", comma: true },
     "-ms-animation-iteration-count"     : { multi: "<number> | infinite", comma: true },
-    "-ms-animation-name"                : { multi: "none | <ident>", comma: true },
+    "-ms-animation-name"                : { multi: "none | initial | inherit | unset | <single-animation-name>", comma: true },
     "-ms-animation-play-state"          : { multi: "running | paused", comma: true },
 
     "-webkit-animation-delay"               : { multi: "<time>", comma: true },
     "-webkit-animation-direction"           : { multi: "normal | alternate", comma: true },
     "-webkit-animation-duration"            : { multi: "<time>", comma: true },
     "-webkit-animation-fill-mode"           : { multi: "none | forwards | backwards | both", comma: true },
     "-webkit-animation-iteration-count"     : { multi: "<number> | infinite", comma: true },
-    "-webkit-animation-name"                : { multi: "none | <ident>", comma: true },
+    "-webkit-animation-name"                : { multi: "none | initial | inherit | unset | <single-animation-name>", comma: true },
     "-webkit-animation-play-state"          : { multi: "running | paused", comma: true },
 
     "-o-animation-delay"               : { multi: "<time>", comma: true },
     "-o-animation-direction"           : { multi: "normal | alternate", comma: true },
     "-o-animation-duration"            : { multi: "<time>", comma: true },
     "-o-animation-iteration-count"     : { multi: "<number> | infinite", comma: true },
-    "-o-animation-name"                : { multi: "none | <ident>", comma: true },
+    "-o-animation-name"                : { multi: "none | initial | inherit | unset | <single-animation-name>", comma: true },
     "-o-animation-play-state"          : { multi: "running | paused", comma: true },
 
     "appearance"                    : "icon | window | desktop | workspace | document | tooltip | dialog | button | push-button | hyperlink | radio | radio-button | checkbox | menu-item | tab | menu | menubar | pull-down-menu | pop-up-menu | list-menu | radio-group | checkbox-group | outline-tree | range | field | combo-box | signature | password | normal | none | inherit",
@@ -557,7 +557,7 @@ var Properties = {
     "white-space-collapse"          : 1,
     "widows"                        : "<integer> | inherit",
     "width"                         : "<length> | <percentage> | <content-sizing> | auto | inherit",
-    "will-change"                   : { multi: "<ident>", comma: true },
+    "will-change"                   : "<will-change> | inherit | initial | unset",
     "word-break"                    : "normal | keep-all | break-all",
     "word-spacing"                  : "<length> | normal | inherit",
     "word-wrap"                     : "normal | break-word",

src/css/ValidationTypes.js

@@ -376,6 +376,17 @@ ValidationTypes = {
             return part.type === "identifier" || part.wasIdent;
         },
 
+        "<single-animation-name>": function(part) {
+            return this["<ident>"](part) &&
+                /^-?[a-z_][-a-z0-9_]+$/i.test(part) &&
+                !/^(none|unset|initial|inherit)$/i.test(part);
+        },
+
+        "<animateable-feature-name>": function(part) {
+            return this["<ident>"](part) &&
+                !/^(unset|initial|inherit|will-change|auto|scroll-position|contents)$/i.test(part);
+        },
+
         "<length>": function(part){
             if (part.type === "function" && /^(?:\-(?:ms|moz|o|webkit)\-)?calc/i.test(part)){
                 return true;
@@ -534,6 +545,10 @@ ValidationTypes = {
     complex: {
         __proto__: null,
 
+        "<animateable-feature>":
+        // scroll-position | contents | <custom-ident>
+        Matcher.cast("scroll-position | contents | <animateable-feature-name>"),
+
         "<bg-position>": Matcher.cast("<position>").hash(),
 
         "<bg-size>":
@@ -624,6 +639,10 @@ ValidationTypes = {
 
         "<text-decoration>":
         // none | [ underline || overline || line-through || blink ] | inherit
-        Matcher.oror("underline", "overline", "line-through", "blink")
+        Matcher.oror("underline", "overline", "line-through", "blink"),
+
+        "<will-change>":
+        // auto | <animateable-feature>#
+        Matcher.alt("auto", Matcher.cast("<animateable-feature>").hash())
     }
 };

tests/css/Validation.js

@@ -101,14 +101,29 @@
         valid: [
             "none",
             "foo",
+            "red",
+            "-red",
+            "-specific",
+            "sliding-vertically",
+            "test1",
+            "test1, animation4",
             "foo, bar",
             "none, none",
             "none, foo",
-            "has_underscore"
+            "has_underscore",
+            "none, -moz-specific, sliding",
+            "initial",
+            "inherit",
+            "unset"
         ],
 
         invalid: {
-            "1px" : "Expected (none | <ident>) but found '1px'."
+            "1px" : "Expected (none | initial | inherit | unset | <single-animation-name>) but found '1px'.",
+            "--invalid" : "Expected (none | initial | inherit | unset | <single-animation-name>) but found '--invalid'."
+        },
+
+        error: {
+            "-0num": "Unexpected token '0num' at line 1, col 24."
         }
     }));
 
@@ -1357,18 +1372,23 @@
         property: "will-change",
 
         valid: [
+            "inherit",
+            "initial",
+            "unset",
             "auto",
             "scroll-position",
             "contents",
             "opacity",
             "transform",
             "opacity, transform",
+            "left, top",
             "height, opacity, transform, width"
         ],
 
         invalid: {
-            "2px"               : "Expected (<ident>) but found '2px'.",
-            "opacity transform" : "Expected end of value but found 'transform'."
+            "2px"               : "Expected (<will-change> | inherit | initial | unset) but found '2px'.",
+            "opacity transform" : "Expected end of value but found 'transform'.",
+            "will-change"       : "Expected (<will-change> | inherit | initial | unset) but found 'will-change'."
         }
     }));