fix(shadow_dom): moves the imported nodes into the correct location.

rkirov · rkirov · commit 92d565848b60 · 2015-06-10T13:50:12.000-07:00
diff --git a/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts b/modules/angular2/src/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy.ts
@@ -46,16 +46,21 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
           .then((css) => {
             css = shimCssForComponent(css, hostComponentId);
             DOM.setText(styleEl, css);
+            this._moveToStyleHost(styleEl);
           });
     } else {
       var css = shimCssForComponent(<string>inlinedCss, hostComponentId);
       DOM.setText(styleEl, css);
-      DOM.remove(styleEl);
-      insertStyleElement(this.styleHost, styleEl);
+      this._moveToStyleHost(styleEl);
       return null;
     }
   }
 
+  _moveToStyleHost(styleEl) {
+    DOM.remove(styleEl);
+    insertStyleElement(this.styleHost, styleEl);
+  }
+
   processElement(hostComponentId: string, elementComponentId: string, element) {
     // Shim the element as a child of the compiled component
     if (isPresent(hostComponentId)) {
diff --git a/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts b/modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.ts
@@ -97,6 +97,20 @@ export function main() {
       expect(DOM.getText(styleElement)).not.toEqual(DOM.getText(styleElement2));
     });
 
+    it('should move the style element to the style host when @imports are present', inject([AsyncTestCompleter], (async) => {
+      xhr.reply('http://base/one.css', '.one {}');
+
+      var compileElement = el('<div><style>@import "one.css";</style></div>');
+      var styleElement = DOM.firstChild(compileElement);
+      var stylePromise = strategy.processStyleElement('someComponent', 'http://base', styleElement);
+
+      stylePromise.then((_) => {
+        expect(compileElement).toHaveText('');
+        expect(styleHost).toHaveText('.one[_ngcontent-0] {\n\n}');
+        async.done();
+      });
+    }));
+
     it('should move the style element to the style host', () => {
       var compileElement = el('<div><style>.one {}</style></div>');
       var styleElement = DOM.firstChild(compileElement);
