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

This commit is contained in:
Rado Kirov 2015-06-10 11:24:37 -07:00
parent 617d693102
commit 92d565848b
2 changed files with 21 additions and 2 deletions

View File

@ -46,16 +46,21 @@ export class EmulatedScopedShadowDomStrategy extends EmulatedUnscopedShadowDomSt
.then((css) => { .then((css) => {
css = shimCssForComponent(css, hostComponentId); css = shimCssForComponent(css, hostComponentId);
DOM.setText(styleEl, css); DOM.setText(styleEl, css);
this._moveToStyleHost(styleEl);
}); });
} else { } else {
var css = shimCssForComponent(<string>inlinedCss, hostComponentId); var css = shimCssForComponent(<string>inlinedCss, hostComponentId);
DOM.setText(styleEl, css); DOM.setText(styleEl, css);
DOM.remove(styleEl); this._moveToStyleHost(styleEl);
insertStyleElement(this.styleHost, styleEl);
return null; return null;
} }
} }
_moveToStyleHost(styleEl) {
DOM.remove(styleEl);
insertStyleElement(this.styleHost, styleEl);
}
processElement(hostComponentId: string, elementComponentId: string, element) { processElement(hostComponentId: string, elementComponentId: string, element) {
// Shim the element as a child of the compiled component // Shim the element as a child of the compiled component
if (isPresent(hostComponentId)) { if (isPresent(hostComponentId)) {

View File

@ -97,6 +97,20 @@ export function main() {
expect(DOM.getText(styleElement)).not.toEqual(DOM.getText(styleElement2)); 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', () => { it('should move the style element to the style host', () => {
var compileElement = el('<div><style>.one {}</style></div>'); var compileElement = el('<div><style>.one {}</style></div>');
var styleElement = DOM.firstChild(compileElement); var styleElement = DOM.firstChild(compileElement);