added support for calc wherever <length> is expected

Author: Merrifield, Jay

src/css/Parser.js

@@ -712,14 +712,14 @@ Parser.prototype = function(){
 
                 /*
                  * operator
-                 *  : '/' S* | ',' S* | /( empty )/
+                 *  : '/' S* | ',' S* | '*' S* | '-' S* /( empty )/
                  *  ;
                  */    
 
                 var tokenStream = this._tokenStream,
                     token       = null;
 
-                if (tokenStream.match([Tokens.SLASH, Tokens.COMMA])){
+                if (tokenStream.match([Tokens.SLASH, Tokens.COMMA, Tokens.STAR, Tokens.MINUS])){
                     token =  tokenStream.token();
                     this._readWhitespace();
                 } 

src/css/ValidationTypes.js

@@ -121,7 +121,11 @@ var ValidationTypes = {
         },
 
         "<length>": function(part){
-            return part.type == "length" || part.type == "number" || part.type == "integer" || part == "0";
+            if (part.type == "function" && /^(?:\-(?:ms|moz|o|webkit)\-)?calc/i.test(part)){
+                return true;
+            }else{
+                return part.type == "length" || part.type == "number" || part.type == "integer" || part == "0";
+            }
         },
 
         "<color>": function(part){

tests/css/CSSTokensTests.htm

@@ -420,6 +420,7 @@ <h1>CSS Tokens Tests</h1>
             //regular CSS functions
             "rgb(255,0,1)"      : [CSSTokens.FUNCTION, CSSTokens.NUMBER, CSSTokens.COMMA, CSSTokens.NUMBER, CSSTokens.COMMA, CSSTokens.NUMBER, CSSTokens.RPAREN],
             "counter(par-num,upper-roman)" : [CSSTokens.FUNCTION, CSSTokens.IDENT, CSSTokens.COMMA, CSSTokens.IDENT, CSSTokens.RPAREN],
+            "calc(100% - 5px)"      : [CSSTokens.FUNCTION, CSSTokens.PERCENTAGE, CSSTokens.S, CSSTokens.MINUS, CSSTokens.S, CSSTokens.LENGTH, CSSTokens.RPAREN],
 
             //old-style IE filters - interpreted as bunch of tokens
             "alpha(opacity=50)" : [CSSTokens.FUNCTION, CSSTokens.IDENT, CSSTokens.EQUALS, CSSTokens.NUMBER, CSSTokens.RPAREN],

tests/css/TokenStream.js

@@ -405,6 +405,7 @@
             //regular CSS functions
             "rgb(255,0,1)"      : [CSSTokens.FUNCTION, CSSTokens.NUMBER, CSSTokens.COMMA, CSSTokens.NUMBER, CSSTokens.COMMA, CSSTokens.NUMBER, CSSTokens.RPAREN],
             "counter(par-num,upper-roman)" : [CSSTokens.FUNCTION, CSSTokens.IDENT, CSSTokens.COMMA, CSSTokens.IDENT, CSSTokens.RPAREN],
+            "calc(100% - 5px)"      : [CSSTokens.FUNCTION, CSSTokens.PERCENTAGE, CSSTokens.S, CSSTokens.MINUS, CSSTokens.S, CSSTokens.LENGTH, CSSTokens.RPAREN],
 
             //old-style IE filters - interpreted as bunch of tokens
             "alpha(opacity=50)" : [CSSTokens.FUNCTION, CSSTokens.IDENT, CSSTokens.EQUALS, CSSTokens.NUMBER, CSSTokens.RPAREN],

tests/css/Validation.js

@@ -492,6 +492,10 @@
         valid: [
             "1px",
             "1%",
+            "calc(100% - 5px)",
+            "calc(100% - 1em)",
+            "calc(100%/6)",
+            "calc(10%*6)",
             "inherit"
         ],