fix(style): expressions in style tags

Enable data-binding for style tags.

Note: this feature does not work on IE8.

Closes #2387
Closes #6492

1 files changed, 55 insertions, 3 deletions

diff --git a/test/ng/directive/styleSpec.js b/test/ng/directive/styleSpec.js
index bdc4ea85..36f15cde 100644
--- a/test/ng/directive/styleSpec.js
+++ b/test/ng/directive/styleSpec.js
@@ -9,13 +9,65 @@ describe('style', function() {
   });
 
 
-  it('should not compile style element', inject(function($compile, $rootScope) {
-    element = jqLite('<style type="text/css">should {{notBound}}</style>');
+  it('should compile style element without binding', inject(function($compile, $rootScope) {
+    element = jqLite('<style type="text/css">.header{font-size:1.5em; h3{font-size:1.5em}}</style>');
     $compile(element)($rootScope);
     $rootScope.$digest();
 
     // read innerHTML and trim to pass on IE8
-    expect(trim(element[0].innerHTML)).toBe('should {{notBound}}');
+    expect(trim(element[0].innerHTML)).toBe('.header{font-size:1.5em; h3{font-size:1.5em}}');
+  }));
+
+
+  it('should compile style element with one simple bind', inject(function($compile, $rootScope) {
+    element = jqLite('<style type="text/css">.some-container{ width: {{elementWidth}}px; }</style>');
+    $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.some-container{ width: px; }');
+
+    $rootScope.$apply(function() {
+      $rootScope.elementWidth = 200;
+    });
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.some-container{ width: 200px; }');
+  }));
+
+
+  it('should compile style element with one bind', inject(function($compile, $rootScope) {
+    element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}em }}</style>');
+    $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: em }}');
+
+    $rootScope.$apply(function() {
+      $rootScope.fontSize = 1.5;
+    });
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
+  }));
+
+
+  it('should compile style element with two binds', inject(function($compile, $rootScope) {
+    element = jqLite('<style type="text/css">.header{ h3 { font-size: {{fontSize}}{{unit}} }}</style>');
+    $compile(element)($rootScope);
+    $rootScope.$digest();
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size:  }}');
+
+    $rootScope.$apply(function() {
+      $rootScope.fontSize = 1.5;
+      $rootScope.unit = 'em';
+    });
+
+    // read innerHTML and trim to pass on IE8
+    expect(trim(element[0].innerHTML)).toBe('.header{ h3 { font-size: 1.5em }}');
   }));