Fix parsing of parenthesis in default of variable declaration

Polymer · Feb 10, 2016 · 926d0e5 · 926d0e5
1 parent 4411031
commit 926d0e5
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/lib/style-properties.html b/src/lib/style-properties.html
@@ -160,12 +160,13 @@
             if (m) {
               p = this.valueForProperty(props[m[1]], props);
             } else {
-              var pp = p.split(':');
-              if (pp[1]) {
-                pp[1] = pp[1].trim();
-                pp[1] = this.valueForProperty(pp[1], props) || pp[1];
+              var colon = p.indexOf(':');
+              if (colon !== -1) {
+                var pp = p.substring(colon);
+                pp = pp.trim();
+                pp = this.valueForProperty(pp, props) || pp;
+                p = p.substring(0, colon) + pp;
               }
-              p = pp.join(':');
             }
             parts[i] = (p && p.lastIndexOf(';') === p.length - 1) ?
               // strip trailing ;
@@ -449,7 +450,7 @@
         // var(--a, --b)
         // var(--a, fallback-literal)
         // var(--a, fallback-literal(with-one-nested-parentheses))
-        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,)]*)|(?:[^;]*\([^;)]*\)))[\s]*?\)/gi,
+        VAR_MATCH: /(^|\W+)var\([\s]*([^,)]*)[\s]*,?[\s]*((?:[^,()]*)|(?:[^;()]*\([^;)]*\)))[\s]*?\)/gi,
         VAR_CAPTURE: /\([\s]*(--[^,\s)]*)(?:,[\s]*(--[^,\s)]*))?(?:\)|,)/gi,
         ANIMATION_MATCH: /(animation\s*:)|(animation-name\s*:)/,
         IS_VAR: /^--/,

diff --git a/test/unit/styling-cross-scope-var.html b/test/unit/styling-cross-scope-var.html
@@ -445,6 +445,10 @@
         }
 
         #endTerm {border: var(--end-term)}
+
+        #parenthesis {
+          background-image: var(--foo-background-image, url(http://placehold.it/400x300));
+        }
       </style>
       <div id="me">x-scope</div>
       <x-keyframes id="keyframes"></x-keyframes>
@@ -473,6 +477,7 @@
       <x-dynamic id="dynamic"></x-dynamic>
       <div id="wsTerm">new line var</div>
       <div id="endTerm">end var</div>
+      <div id="parenthesis">parenthesis</div>
     </template>
     <script>
     HTMLImports.whenReady(function() {
@@ -556,8 +561,8 @@
 <script>
   suite('scoped-styling-var', function() {
 
-  function assertComputed(element, value, pseudo) {
-    var name = 'border-top-width';
+  function assertComputed(element, value, pseudo, name) {
+    var name = name || 'border-top-width';
     var computed = element.getComputedStyleValue && !pseudo ?
       element.getComputedStyleValue(name) :
       getComputedStyle(element, pseudo)[name];
@@ -794,6 +799,10 @@
     assertComputed(styled.$.endTerm, '19px');
   });
 
+  test('variable with parenthesis', function() {
+    assertComputed(styled.$.parenthesis, 'url("http://placehold.it/400x300")', false, 'background-image');
+  });
+
   // skip for now, until #3326 is fixed
   test.skip('custom style class overrides css variable', function() {
     var d = document.createElement('x-variable-override');