diff --git a/lib/parse.js b/lib/parse.js index 3f6c8a2..7a4bec9 100644 --- a/lib/parse.js +++ b/lib/parse.js @@ -24,10 +24,12 @@ CSSOM.parse = function parse(token) { var index; var buffer = ""; + var valueParenthesisDepth = 0; var SIGNIFICANT_WHITESPACE = { "selector": true, "value": true, + "value-parenthesis": true, "atRule": true, "importRule-begin": true, "importRule": true, @@ -263,8 +265,14 @@ CSSOM.parse = function parse(token) { } } else { state = 'value-parenthesis'; + //always ensure this is reset to 1 on transition + //from value to value-parenthesis + valueParenthesisDepth = 1; buffer += character; } + } else if (state === 'value-parenthesis') { + valueParenthesisDepth++; + buffer += character; } else { buffer += character; } @@ -272,7 +280,8 @@ CSSOM.parse = function parse(token) { case ")": if (state === 'value-parenthesis') { - state = 'value'; + valueParenthesisDepth--; + if (valueParenthesisDepth === 0) state = 'value'; } buffer += character; break; diff --git a/spec/parse.spec.js b/spec/parse.spec.js index 68fb9f8..653bb22 100644 --- a/spec/parse.spec.js +++ b/spec/parse.spec.js @@ -445,6 +445,50 @@ var TESTS = [ return result; })() }, + { + input: ".calc{width: calc(100% - 15px);}", + result: (function() { + var result = { + cssRules: [ + { + selectorText: '.calc', + parentRule: null, + style: { + 0: 'width', + width: 'calc(100% - 15px)', + length: 1 + } + } + ], + parentStyleSheet: null + }; + result.cssRules[0].parentStyleSheet = result; + result.cssRules[0].style.parentRule = result.cssRules[0]; + return result; + })() + }, + { + input: ".gradient{background-image: linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%);}", + result: (function() { + var result = { + cssRules: [ + { + selectorText: '.gradient', + parentRule: null, + style: { + 0: 'background-image', + "background-image": 'linear-gradient(transparent 50%, rgba(69, 142, 209, 0.04) 50%)', + length: 1 + } + } + ], + parentStyleSheet: null + }; + result.cssRules[0].parentStyleSheet = result; + result.cssRules[0].style.parentRule = result.cssRules[0]; + return result; + })() + }, { input: "@media handheld, only screen and (max-device-width: 480px) {body{max-width:480px}}", result: (function() {