fix(ShadowCss): support `@page` and `@document` CSS rules (#11878)
fixes #11860
This commit is contained in:
parent
83d94b7504
commit
9316f95467
|
@ -323,10 +323,12 @@ export class ShadowCss {
|
|||
return processRules(cssText, (rule: CssRule) => {
|
||||
let selector = rule.selector;
|
||||
let content = rule.content;
|
||||
if (rule.selector[0] != '@' || rule.selector.startsWith('@page')) {
|
||||
if (rule.selector[0] != '@') {
|
||||
selector =
|
||||
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);
|
||||
}
|
||||
return new CssRule(selector, content);
|
||||
|
|
|
@ -52,6 +52,18 @@ export function main() {
|
|||
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', () => {
|
||||
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] {}';
|
||||
|
|
Loading…
Reference in New Issue