Merge pull request #33 from mattiacci/bg-position

Fix validation of background-position

Author: nzakas

src/css/ValidationTypes.js

@@ -40,7 +40,7 @@ var ValidationTypes = {
     },
 
     /**
-     * Determines if the next part(s) of the given expresion
+     * Determines if the next part(s) of the given expression
      * are one of a group.
      */
     isAnyOfGroup: function(expression, types) {
@@ -187,10 +187,16 @@ var ValidationTypes = {
             var types   = this,
                 result  = false,
                 numeric = "<percentage> | <length>",
-                xDir    = "left | center | right",
-                yDir    = "top | center | bottom",
-                part,
-                i, len;
+                xDir    = "left | right",
+                yDir    = "top | bottom",
+                count = 0,
+                hasNext = function() {
+                    return expression.hasNext() && expression.peek() != ",";
+                };
+
+            while (expression.peek(count) && expression.peek(count) != ",") {
+                count++;
+            }
 
 /*
 <position> = [
@@ -202,40 +208,48 @@ var ValidationTypes = {
   [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
   [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
 ]
+*/
 
-*/            
-                
-            if (ValidationTypes.isAny(expression, "top | bottom")) {
-                result = true;
+            if (count < 3) {
+                if (ValidationTypes.isAny(expression, xDir + " | center | " + numeric)) {
+                        result = true;
+                        ValidationTypes.isAny(expression, yDir + " | center | " + numeric);
+                } else if (ValidationTypes.isAny(expression, yDir)) {
+                        result = true;
+                        ValidationTypes.isAny(expression, xDir + " | center");
+                }
             } else {
-                
-                //must be two-part
-                if (ValidationTypes.isAny(expression, numeric)){
-                    if (expression.hasNext()){
-                        result = ValidationTypes.isAny(expression, numeric + " | " + yDir);
-                    }
-                } else if (ValidationTypes.isAny(expression, xDir)){
-                    if (expression.hasNext()){
-                        
-                        //two- or three-part
-                        if (ValidationTypes.isAny(expression, yDir)){
+                if (ValidationTypes.isAny(expression, xDir)) {
+                    if (ValidationTypes.isAny(expression, yDir)) {
+                        result = true;
+                        ValidationTypes.isAny(expression, numeric);
+                    } else if (ValidationTypes.isAny(expression, numeric)) {
+                        if (ValidationTypes.isAny(expression, yDir)) {
                             result = true;
-                      
                             ValidationTypes.isAny(expression, numeric);
-                            
-                        } else if (ValidationTypes.isAny(expression, numeric)){
-                        
-                            //could also be two-part, so check the next part
-                            if (ValidationTypes.isAny(expression, yDir)){                                    
-                                ValidationTypes.isAny(expression, numeric);                               
-                            }
-                            
+                        } else if (ValidationTypes.isAny(expression, "center")) {
                             result = true;
                         }
                     }
-                }                                 
-            }            
-
+                } else if (ValidationTypes.isAny(expression, yDir)) {
+                    if (ValidationTypes.isAny(expression, xDir)) {
+                        result = true;
+                        ValidationTypes.isAny(expression, numeric);
+                    } else if (ValidationTypes.isAny(expression, numeric)) {
+                        if (ValidationTypes.isAny(expression, xDir)) {
+                                result = true;
+                                ValidationTypes.isAny(expression, numeric);
+                        } else if (ValidationTypes.isAny(expression, "center")) {
+                            result = true;
+                        }
+                    }
+                } else if (ValidationTypes.isAny(expression, "center")) {
+                    if (ValidationTypes.isAny(expression, xDir + " | " + yDir)) {
+                        result = true;
+                        ValidationTypes.isAny(expression, numeric);
+                    }
+                }
+            }
 
             return result;
         },
@@ -339,4 +353,4 @@ var ValidationTypes = {
             return result;
         }
     }
-};
+};

tests/css/Validation.js

@@ -153,23 +153,28 @@
             "top",
             "bottom",
             "center",
+            "100%",
             "left center",
+            "bottom left",
             "left 10px",
             "center bottom",
             "10% top",
             "left 10px bottom",
             "right top 5%",
-            "center 3em center 10%",
+            "top 3em center",
+            "center top 3em",
+            "top 3em right 10%",
             "top, bottom",
             "left 10px, left 10px",
             "right top 5%, left 10px bottom"
         ],
 
         invalid: {
-            "foo"               : "Expected (<bg-position>) but found 'foo'.",
-            "left center right" : "Expected end of value but found 'right'."
-            
-        }  
+            "foo"                 : "Expected (<bg-position>) but found 'foo'.",
+            "10% left"            : "Expected end of value but found 'left'.",
+            "left center right"   : "Expected end of value but found 'center'.",
+            "center 3em right 10%": "Expected end of value but found '3em'.",
+        }
     }));   
 
     suite.add(new ValidationTestCase({