added support for calc wherever <length> is expected

fracmak · Nov 14, 2012 · 1845473 · 1845473
1 parent 80f795c
commit 1845473
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/src/css/Parser.js b/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();
                 } 

diff --git a/src/css/ValidationTypes.js b/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){

diff --git a/tests/css/CSSTokensTests.htm b/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],

diff --git a/tests/css/TokenStream.js b/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],

diff --git a/tests/css/Validation.js b/tests/css/Validation.js
@@ -492,6 +492,10 @@
         valid: [
             "1px",
             "1%",
+            "calc(100% - 5px)",
+            "calc(100% - 1em)",
+            "calc(100%/6)",
+            "calc(10%*6)",
             "inherit"
         ],