Merge pull request #35 from fracmak/calc_support

added support for calc wherever <length> is expected

Author: nzakas

src/css/Parser.js

@@ -708,18 +708,21 @@ Parser.prototype = function(){
                 });              
             },
 
-            _operator: function(){
+            _operator: function(inFunction){
 
                 /*
-                 * operator
+                 * operator (outside function)
                  *  : '/' S* | ',' S* | /( empty )/
+                 * operator (inside function)
+                 *  : '/' 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]) ||
+                    (inFunction && tokenStream.match([Tokens.PLUS, Tokens.STAR, Tokens.MINUS]))){
                     token =  tokenStream.token();
                     this._readWhitespace();
                 } 
@@ -1506,7 +1509,7 @@ Parser.prototype = function(){
                 return result;
             },
 
-            _expr: function(){
+            _expr: function(inFunction){
                 /*
                  * expr
                  *   : term [ operator term ]*
@@ -1525,8 +1528,8 @@ Parser.prototype = function(){
                     values.push(value);
 
                     do {
-                        operator = this._operator();
-        
+                        operator = this._operator(inFunction);
+
                         //if there's an operator, keep building up the value parts
                         if (operator){
                             values.push(operator);
@@ -1662,7 +1665,7 @@ Parser.prototype = function(){
                 if (tokenStream.match(Tokens.FUNCTION)){
                     functionText = tokenStream.token().value;
                     this._readWhitespace();
-                    expr = this._expr();
+                    expr = this._expr(true);
                     functionText += expr;
 
                     //START: Horrible hack in case it's an IE filter

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"
         ],