fix(ShimShadowCss): preserve attribute on style elements

This commit is contained in:
Victor Berchet 2015-02-23 12:24:28 +01:00
parent edb797e191
commit 9250cd6a78
2 changed files with 20 additions and 8 deletions

View File

@ -5,7 +5,7 @@ import {CompileControl} from './compile_control';
import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata'; import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy'; 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'; import {isPresent, isBlank, Type} from 'angular2/src/facade/lang';
export class ShimShadowCss extends CompileStep { export class ShimShadowCss extends CompileStep {
@ -27,23 +27,24 @@ export class ShimShadowCss extends CompileStep {
if (DOM.tagName(current.element) == 'STYLE') { if (DOM.tagName(current.element) == 'STYLE') {
current.ignoreBindings = true; current.ignoreBindings = true;
if (this._strategy.extractStyles()) { if (this._strategy.extractStyles()) {
DOM.remove(current.element); var styleEl = current.element;
var css = DOM.getText(current.element); DOM.remove(styleEl);
var css = DOM.getText(styleEl);
var shimComponent = this._strategy.getShimComponent(this._component); var shimComponent = this._strategy.getShimComponent(this._component);
css = shimComponent.shimCssText(css); css = shimComponent.shimCssText(css);
this._insertStyle(this._styleHost, css); DOM.setText(styleEl, css);
this._insertStyle(this._styleHost, styleEl);
} }
} }
} }
_insertStyle(el: Element, css: string) { _insertStyle(host: Element, style: StyleElement) {
var style = DOM.createStyleElement(css);
if (isBlank(this._lastInsertedStyle)) { if (isBlank(this._lastInsertedStyle)) {
var firstChild = DOM.firstChild(el); var firstChild = DOM.firstChild(host);
if (isPresent(firstChild)) { if (isPresent(firstChild)) {
DOM.insertBefore(firstChild, style); DOM.insertBefore(firstChild, style);
} else { } else {
DOM.appendChild(el, style); DOM.appendChild(host, style);
} }
} else { } else {
DOM.insertAfter(this._lastInsertedStyle, style); DOM.insertAfter(this._lastInsertedStyle, style);

View File

@ -9,6 +9,7 @@ import {DirectiveMetadata} from 'angular2/src/core/compiler/directive_metadata';
import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy'; import {ShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
import {Type} from 'angular2/src/facade/lang'; import {Type} from 'angular2/src/facade/lang';
import {DOM} from 'angular2/src/facade/dom';
export function main() { export function main() {
describe('ShimShadowCss', () => { describe('ShimShadowCss', () => {
@ -53,6 +54,15 @@ export function main() {
expect(host).toHaveText('/* shim */.s{}original content'); 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', () => { it('should move the styles to the host in the original order', () => {
var host = el('<div></div>'); var host = el('<div></div>');
var pipeline = createPipeline(new FakeStrategy(true), host); var pipeline = createPipeline(new FakeStrategy(true), host);
@ -60,6 +70,7 @@ export function main() {
pipeline.process(template); pipeline.process(template);
expect(host).toHaveText('/* shim */.s1{}/* shim */.s2{}'); expect(host).toHaveText('/* shim */.s1{}/* shim */.s2{}');
}); });
}); });
} }