From ceac045a7f00d5b78f55fa7a2915d83765309f29 Mon Sep 17 00:00:00 2001
From: Tero Parviainen <tero@teropa.info>
Date: Sun, 13 Mar 2016 10:56:20 +0200
Subject: [PATCH] fix(compiler): have CSS parser support nested parentheses
 inside functions

Closes #7580
---
 modules/@angular/compiler/src/css/lexer.ts        | 8 +++++++-
 modules/@angular/compiler/test/css/parser_spec.ts | 5 ++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/modules/@angular/compiler/src/css/lexer.ts b/modules/@angular/compiler/src/css/lexer.ts
index f362970cd0..34c4554cbf 100644
--- a/modules/@angular/compiler/src/css/lexer.ts
+++ b/modules/@angular/compiler/src/css/lexer.ts
@@ -459,8 +459,14 @@ export class CssScanner {
   scanCssValueFunction(): CssToken {
     var start = this.index;
     var startingColumn = this.column;
-    while (this.peek != $EOF && this.peek != $RPAREN) {
+    var parenBalance = 1;
+    while (this.peek != $EOF && parenBalance > 0) {
       this.advance();
+      if (this.peek == $LPAREN) {
+        parenBalance++;
+      } else if (this.peek == $RPAREN) {
+        parenBalance--;
+      }
     }
     var strValue = this.input.substring(start, this.index);
     return new CssToken(start, startingColumn, this.line, CssTokenType.Identifier, strValue);
diff --git a/modules/@angular/compiler/test/css/parser_spec.ts b/modules/@angular/compiler/test/css/parser_spec.ts
index de9fa602f5..08240cc8b0 100644
--- a/modules/@angular/compiler/test/css/parser_spec.ts
+++ b/modules/@angular/compiler/test/css/parser_spec.ts
@@ -206,6 +206,7 @@ export function main() {
           background: url(matias.css);
           animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
           height: calc(100% - 50px);
+          background-image: linear-gradient( 45deg, rgba(100, 0, 0, 0.5), black );
         }
       `;
 
@@ -213,12 +214,14 @@ export function main() {
          expect(ast.rules.length).toEqual(1);
 
          var defs = (<CssSelectorRuleAST>ast.rules[0]).block.entries;
-         expect(defs.length).toEqual(3);
+         expect(defs.length).toEqual(4);
 
          assertTokens((<CssDefinitionAST>defs[0]).value.tokens, ['url', '(', 'matias.css', ')']);
          assertTokens((<CssDefinitionAST>defs[1]).value.tokens,
                       ['cubic-bezier', '(', '0.755, 0.050, 0.855, 0.060', ')']);
          assertTokens((<CssDefinitionAST>defs[2]).value.tokens, ['calc', '(', '100% - 50px', ')']);
+         assertTokens((<CssDefinitionAST>defs[3]).value.tokens,
+                      ['linear-gradient', '(', '45deg, rgba(100, 0, 0, 0.5), black', ')']);
        });
 
     it('should parse un-named block-level CSS values', () => {