fix(ShimShadowCss): preserve attribute on style elements

vicb · vicb · commit 9250cd6a785f · 2015-02-26T09:04:00.000+01:00
diff --git a/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js b/modules/angular2/src/core/compiler/pipeline/shim_shadow_css.js
@@ -5,7 +5,7 @@ import {CompileControl} from './compile_control';
 import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
 import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
-import {DOM, Element} from 'angular2/src/facade/dom';
+import {DOM, Element, StyleElement} from 'angular2/src/facade/dom';
 import {isPresent, isBlank, Type} from 'angular2/src/facade/lang';
 
 export class ShimShadowCss extends CompileStep {
@@ -27,23 +27,24 @@ export class ShimShadowCss extends CompileStep {
     if (DOM.tagName(current.element) == 'STYLE') {
       current.ignoreBindings = true;
       if (this._strategy.extractStyles()) {
-        DOM.remove(current.element);
-        var css = DOM.getText(current.element);
+        var styleEl = current.element;
+        DOM.remove(styleEl);
+        var css = DOM.getText(styleEl);
         var shimComponent = this._strategy.getShimComponent(this._component);
         css = shimComponent.shimCssText(css);
-        this._insertStyle(this._styleHost, css);
+        DOM.setText(styleEl, css);
+        this._insertStyle(this._styleHost, styleEl);
       }
     }
   }
 
-  _insertStyle(el: Element, css: string) {
-    var style = DOM.createStyleElement(css);
+  _insertStyle(host: Element, style: StyleElement) {
     if (isBlank(this._lastInsertedStyle)) {
-      var firstChild = DOM.firstChild(el);
+      var firstChild = DOM.firstChild(host);
       if (isPresent(firstChild)) {
         DOM.insertBefore(firstChild, style);
       } else {
-        DOM.appendChild(el, style);
+        DOM.appendChild(host, style);
       }
     } else {
       DOM.insertAfter(this._lastInsertedStyle, style);
diff --git a/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js b/modules/angular2/test/core/compiler/pipeline/shim_shadow_css_spec.js
@@ -9,6 +9,7 @@ import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
 import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 
 import {Type} from 'angular2/src/facade/lang';
+import {DOM} from 'angular2/src/facade/dom';
 
 export function main() {
   describe('ShimShadowCss', () => {
@@ -53,13 +54,23 @@ export function main() {
       expect(host).toHaveText('/* shim */.s{}original content');
     });
 
+    it('should preserve attributes on moved style', () => {
+      var host = el('<div></div>');
+      var pipeline = createPipeline(new FakeStrategy(true), host);
+      var template = el('<div><style media="print">.s{}</style></div>');
+      pipeline.process(template);
+      var styleEl = DOM.firstChild(host);
+      expect(DOM.getAttribute(styleEl, 'media')).toEqual('print');
+    });
+
     it('should move the styles to the host in the original order', () => {
       var host = el('<div></div>');
       var pipeline = createPipeline(new FakeStrategy(true), host);
       var template = el('<div><style>.s1{}</style><style>.s2{}</style></div>');
       pipeline.process(template);
       expect(host).toHaveText('/* shim */.s1{}/* shim */.s2{}');
     });
+
   });
 }
 
