honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(shadow_css): add encapsulation support for CSS @supports at-rule 

Closes #7944
This commit is contained in:
alexcastillo 2016-04-17 21:18:11 -04:00 committed by Misko Hevery
parent b2e0946696
commit cb84cbf545
2 changed files with 7 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
modules/@angular/compiler/src/shadow_css.ts
View File

@ -332,7 +332,7 @@ export class ShadowCss {
if (rule.selector[0] != '@' || rule.selector.startsWith('@page')) {
selector =
this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
} else if (rule.selector.startsWith('@media')) {
} else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports')) {
content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
}
return new CssRule(selector, content);

6
modules/@angular/compiler/test/shadow_css_spec.ts
View File

@ -60,6 +60,12 @@ export function main() {
expect(s(css, 'a')).toEqual(expected);
});
it('should handle support rules', () => {
var css = '@supports (display: flex) {section {display: flex;}}';
var expected = '@supports (display:flex) {section[a] {display:flex;}}';
expect(s(css, 'a')).toEqual(expected);
});
// Check that the browser supports unprefixed CSS animation
it('should handle keyframes rules', () => {
var css = '@keyframes foo {0% {transform:translate(-50%) scaleX(0);}}';