Fix flexbox-related property value parsing

Several of the validation types were not defined, including <flex-basis>. This was evident when trying to parse "flex: 1;". Add test cases for various flexbox-related properties.
CSSLint · Apr 29, 2014 · cfd9661 · cfd9661
1 parent d9c4b1f
commit cfd9661
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 4 deletions.
diff --git a/src/css/Properties.js b/src/css/Properties.js
@@ -285,23 +285,23 @@ var Properties = {
     "filter"                        : 1,
     "fit"                           : "fill | hidden | meet | slice",
     "fit-position"                  : 1,
-    "flex"                          : "none | [ <flex-grow> <flex-shrink>? || <flex-basis>",
+    "flex"                          : "<flex>",
     "flex-basis"                    : "<width>",
     "flex-direction"                : "row | row-reverse | column | column-reverse",
     "flex-flow"                     : "<flex-direction> || <flex-wrap>",
     "flex-grow"                     : "<number>",
     "flex-shrink"                   : "<number>",
     "flex-wrap"                     : "nowrap | wrap | wrap-reverse",
-    "-webkit-flex"                  : "none | [ <flex-grow> <flex-shrink>? || <flex-basis>",
+    "-webkit-flex"                  : "<flex>",
     "-webkit-flex-basis"            : "<width>",
     "-webkit-flex-direction"        : "row | row-reverse | column | column-reverse",
     "-webkit-flex-flow"             : "<flex-direction> || <flex-wrap>",
     "-webkit-flex-grow"             : "<number>",
     "-webkit-flex-shrink"           : "<number>",
     "-webkit-flex-wrap"             : "nowrap | wrap | wrap-reverse",
-    "-ms-flex"                      : "[[ <number> <number>? ] || [ <length> || <percentage> || auto ] ] | none",
+    "-ms-flex"                      : "<flex>",
     "-ms-flex-align"                : "start | end | center | stretch | baseline",
-    "-ms-flex-direction"            : "row | column | row-reverse | column-reverse | inherit",
+    "-ms-flex-direction"            : "row | row-reverse | column | column-reverse | inherit",
     "-ms-flex-order"                : "<number>",
     "-ms-flex-pack"                 : "start | end | center | justify",
     "-ms-flex-wrap"                 : "nowrap | wrap | wrap-reverse",

diff --git a/src/css/ValidationTypes.js b/src/css/ValidationTypes.js
@@ -186,6 +186,30 @@ var ValidationTypes = {
 
         "<time>": function(part) {
             return part.type == "time";
+        },
+
+        "<flex-grow>": function(part){
+            return this["<number>"](part);
+        },
+
+        "<flex-shrink>": function(part){
+            return this["<number>"](part);
+        },
+
+        "<width>": function(part){
+            return this["<margin-width>"](part);
+        },
+
+        "<flex-basis>": function(part){
+            return this["<width>"](part);
+        },
+
+        "<flex-direction>": function(part){
+            return ValidationTypes.isLiteral(part, "row | row-reverse | column | column-reverse");
+        },
+
+        "<flex-wrap>": function(part){
+            return ValidationTypes.isLiteral(part, "nowrap | wrap | wrap-reverse");
         }
     },
 
@@ -355,6 +379,50 @@ var ValidationTypes = {
                 ValidationTypes.isAny(expression, simple);
             }
 
+            return result;
+        },
+
+        "<flex>": function(expression) {
+            // http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#flex-property
+            // none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]
+            // Valid syntaxes, according to https://developer.mozilla.org/en-US/docs/Web/CSS/flex#Syntax
+            // * none
+            // * <flex-grow>
+            // * <flex-basis>
+            // * <flex-grow> <flex-basis>
+            // * <flex-grow> <flex-shrink>
+            // * <flex-grow> <flex-shrink> <flex-basis>
+            // * inherit
+            var part,
+                result = false;
+            if (ValidationTypes.isAny(expression, "none | inherit")) {
+                result = true;
+            } else {
+                if (ValidationTypes.isType(expression, "<flex-grow>")) {
+                    if (expression.peek()) {
+                        if (ValidationTypes.isType(expression, "<flex-shrink>")) {
+                            if (expression.peek()) {
+                                result = ValidationTypes.isType(expression, "<flex-basis>");
+                            } else {
+                                result = true;
+                            }
+                        } else if (ValidationTypes.isType(expression, "<flex-basis>")) {
+                            result = expression.peek() === null;
+                        }
+                    } else {
+                        result = true;
+                    }
+                } else if (ValidationTypes.isType(expression, "<flex-basis>")) {
+                    result = true;
+                }
+            }
+
+            if (!result) {
+                // Generate a more verbose error than "Expected <flex>..."
+                part = expression.peek();
+                throw new ValidationError("Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]) but found '" + expression.value.text + "'.", part.line, part.col);
+            }
+
             return result;
         }
     }

diff --git a/tests/css/Validation.js b/tests/css/Validation.js
@@ -648,6 +648,142 @@
         }
     }));
 
+    ["flex", "-ms-flex", "-webkit-flex"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                "1",
+                "inherit",
+                // From http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#flex-common
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                "0 auto",
+                "0 1 auto",
+                "auto",
+                "none",
+                "1 1 0%"
+            ],
+
+            invalid: {
+                "foo": "Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]) but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-basis", "-webkit-flex-basis"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                "auto",
+                "12px",
+                "3em",
+                "0"
+            ],
+
+            invalid: {
+                "foo": "Expected (<width>) but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-direction", "-ms-flex-direction", "-webkit-flex-direction"].forEach(function(prop_name) {
+        var prop_definition = "row | row-reverse | column | column-reverse";
+        if (prop_name == "-ms-flex-direction") {
+            prop_definition += " | inherit";
+        }
+        var valid_values = [
+            // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+            "row",
+            "row-reverse",
+            "column",
+            "column-reverse"
+        ];
+        if (prop_name == "-ms-flex-direction") {
+            valid_values.push("inherit");
+        }
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: valid_values,
+
+            invalid: {
+                "foo": "Expected (" + prop_definition + ") but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-flow", "-webkit-flex-flow"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                // from http://www.w3.org/TR/2014/WD-css-flexbox-1-20140325/#flex-flow-property
+                "row",
+                "column wrap",
+                "row-reverse wrap-reverse",
+                "wrap"
+            ],
+
+            invalid: {
+                "foo": "Expected (<flex-direction> || <flex-wrap>) but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-grow", "-webkit-flex-grow"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                "0",
+                "1",
+                "1.5"
+            ],
+
+            invalid: {
+                "foo": "Expected (<number>) but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-shrink", "-webkit-flex-shrink"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                "0",
+                "1",
+                "1.5"
+            ],
+
+            invalid: {
+                "foo": "Expected (<number>) but found 'foo'."
+            }
+        }));
+    });
+
+    ["flex-wrap", "-ms-flex-wrap", "-webkit-flex-wrap"].forEach(function(prop_name) {
+        suite.add(new ValidationTestCase({
+            property: prop_name,
+
+            valid: [
+                // "initial", // FIXME this needs to be integrated as a univerally acceptable value
+                "nowrap",
+                "wrap",
+                "wrap-reverse"
+            ],
+
+            invalid: {
+                "foo": "Expected (nowrap | wrap | wrap-reverse) but found 'foo'."
+            }
+        }));
+    });
+
     suite.add(new ValidationTestCase({
         property: "text-rendering",