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

fix(ShadowCss): support `@page` and `@document` CSS rules (#11878) 

fixes #11860
This commit is contained in:
Victor Berchet 2016-09-30 16:26:24 -07:00 committed by Chuck Jazdzewski
parent 83d94b7504
commit 9316f95467
2 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -323,10 +323,12 @@ export class ShadowCss {
return processRules(cssText, (rule: CssRule) => { return processRules(cssText, (rule: CssRule) => {
let selector = rule.selector; let selector = rule.selector;
let content = rule.content; let content = rule.content;
if (rule.selector[0] != '@' || rule.selector.startsWith('@page')) { if (rule.selector[0] != '@') {
selector = selector =
this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling); this._scopeSelector(rule.selector, scopeSelector, hostSelector, this.strictStyling);
} else if (rule.selector.startsWith('@media') || rule.selector.startsWith('@supports')) { } else if (
rule.selector.startsWith('@media') || rule.selector.startsWith('@supports') ||
rule.selector.startsWith('@page') || rule.selector.startsWith('@document')) {
content = this._scopeSelectors(rule.content, scopeSelector, hostSelector); content = this._scopeSelectors(rule.content, scopeSelector, hostSelector);
} }
return new CssRule(selector, content); return new CssRule(selector, content);

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

@ -52,6 +52,18 @@ export function main() {
expect(s(css, 'a')).toEqual(expected); expect(s(css, 'a')).toEqual(expected);
}); });
it('should handle page rules', () => {
const css = '@page {div {font-size:50px;}}';
const expected = '@page {div[a] {font-size:50px;}}';
expect(s(css, 'a')).toEqual(expected);
});
it('should handle document rules', () => {
const css = '@document url(http://www.w3.org/) {div {font-size:50px;}}';
const expected = '@document url(http://www.w3.org/) {div[a] {font-size:50px;}}';
expect(s(css, 'a')).toEqual(expected);
});
it('should handle media rules with simple rules', () => { it('should handle media rules with simple rules', () => {
const css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}'; const css = '@media screen and (max-width: 800px) {div {font-size: 50px;}} div {}';
const expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}} div[a] {}'; const expected = '@media screen and (max-width:800px) {div[a] {font-size:50px;}} div[a] {}';