| <!DOCTYPE html> |
| <title>CSS Nesting: CSSNestedDeclarations CSSOM</title> |
| <link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script> |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| .a { |
| & { --x:1; } |
| --x:2; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| assert_equals(outer.cssRules.length, 2); |
| assert_equals(outer.cssRules[0].cssText, `& { --x: 1; }`); |
| assert_equals(outer.cssRules[1].cssText, `--x: 2;`); |
| }, 'Trailing declarations'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| .a { |
| --a:1; |
| --b:1; |
| & { --c:1; } |
| --d:1; |
| --e:1; |
| & { --f:1; } |
| --g:1; |
| --h:1; |
| --i:1; |
| & { --j:1; } |
| --k:1; |
| --l:1; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| assert_equals(outer.cssRules.length, 6); |
| assert_equals(outer.cssRules[0].cssText, `& { --c: 1; }`); |
| assert_equals(outer.cssRules[1].cssText, `--d: 1; --e: 1;`); |
| assert_equals(outer.cssRules[2].cssText, `& { --f: 1; }`); |
| assert_equals(outer.cssRules[3].cssText, `--g: 1; --h: 1; --i: 1;`); |
| assert_equals(outer.cssRules[4].cssText, `& { --j: 1; }`); |
| assert_equals(outer.cssRules[5].cssText, `--k: 1; --l: 1;`); |
| }, 'Mixed declarations'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| .a { |
| & { --x:1; } |
| --y:2; |
| --z:3; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| assert_equals(outer.cssRules.length, 2); |
| let nested_declarations = outer.cssRules[1]; |
| assert_true(nested_declarations instanceof CSSNestedDeclarations); |
| assert_equals(nested_declarations.style.length, 2); |
| assert_equals(nested_declarations.style.getPropertyValue('--x'), ''); |
| assert_equals(nested_declarations.style.getPropertyValue('--y'), '2'); |
| assert_equals(nested_declarations.style.getPropertyValue('--z'), '3'); |
| }, 'CSSNestedDeclarations.style'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| .a { |
| @media (width > 100px) { |
| --x:1; |
| --y:1; |
| .b { } |
| --z:1; |
| } |
| --w:1; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| assert_equals(outer.cssRules.length, 2); |
| |
| // @media |
| let media = outer.cssRules[0]; |
| assert_equals(media.cssRules.length, 3); |
| assert_true(media.cssRules[0] instanceof CSSNestedDeclarations); |
| assert_equals(media.cssRules[0].cssText, `--x: 1; --y: 1;`); |
| assert_equals(media.cssRules[1].cssText, `& .b { }`); |
| assert_true(media.cssRules[2] instanceof CSSNestedDeclarations); |
| assert_equals(media.cssRules[2].cssText, `--z: 1;`); |
| |
| assert_true(outer.cssRules[1] instanceof CSSNestedDeclarations); |
| assert_equals(outer.cssRules[1].cssText, `--w: 1;`); |
| }, 'Nested group rule'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| .a { |
| @scope (.foo) { |
| --x:1; |
| --y:1; |
| .b { } |
| --z:1; |
| } |
| --w:1; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| if (window.CSSScopeRule) { |
| assert_equals(outer.cssRules.length, 2); |
| |
| // @scope |
| let scope = outer.cssRules[0]; |
| assert_true(scope instanceof CSSScopeRule); |
| assert_equals(scope.cssRules.length, 3); |
| assert_true(scope.cssRules[0] instanceof CSSNestedDeclarations); |
| assert_equals(scope.cssRules[0].cssText, `--x: 1; --y: 1;`); |
| assert_equals(scope.cssRules[1].cssText, `.b { }`); // Implicit :scope here. |
| assert_true(scope.cssRules[2] instanceof CSSNestedDeclarations); |
| assert_equals(scope.cssRules[2].cssText, `--z: 1;`); |
| |
| assert_true(outer.cssRules[1] instanceof CSSNestedDeclarations); |
| assert_equals(outer.cssRules[1].cssText, `--w: 1;`); |
| } else { |
| assert_equals(outer.cssRules.length, 0); |
| } |
| }, 'Nested @scope rule'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync(` |
| a { |
| & { --x:1; } |
| width: 100px; |
| height: 200px; |
| color:hover {} |
| --y: 2; |
| } |
| `); |
| assert_equals(s.cssRules.length, 1); |
| let outer = s.cssRules[0]; |
| assert_equals(outer.cssRules.length, 4); |
| assert_equals(outer.cssRules[0].cssText, `& { --x: 1; }`); |
| assert_equals(outer.cssRules[1].cssText, `width: 100px; height: 200px;`); |
| assert_equals(outer.cssRules[2].cssText, `& color:hover { }`); |
| assert_equals(outer.cssRules[3].cssText, `--y: 2;`); |
| }, 'Inner rule starting with an ident'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync('.a {}'); |
| assert_equals(s.cssRules.length, 1); |
| let a_rule = s.cssRules[0]; |
| assert_equals(a_rule.cssRules.length, 0); |
| a_rule.insertRule(` |
| width: 100px; |
| height: 200px; |
| `); |
| assert_equals(a_rule.cssRules.length, 1); |
| assert_true(a_rule.cssRules[0] instanceof CSSNestedDeclarations); |
| assert_equals(a_rule.cssRules[0].cssText, `width: 100px; height: 200px;`); |
| }, 'Inserting a CSSNestedDeclaration rule into style rule'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync('.a { @media (width > 100px) {} }'); |
| assert_equals(s.cssRules.length, 1); |
| assert_equals(s.cssRules[0].cssRules.length, 1); |
| let media_rule = s.cssRules[0].cssRules[0]; |
| assert_true(media_rule instanceof CSSMediaRule); |
| assert_equals(media_rule.cssRules.length, 0); |
| media_rule.insertRule(` |
| width: 100px; |
| height: 200px; |
| `); |
| assert_equals(media_rule.cssRules.length, 1); |
| assert_true(media_rule.cssRules[0] instanceof CSSNestedDeclarations); |
| assert_equals(media_rule.cssRules[0].cssText, `width: 100px; height: 200px;`); |
| }, 'Inserting a CSSNestedDeclaration rule into nested group rule'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync('@media (width > 100px) {}'); |
| assert_equals(s.cssRules.length, 1); |
| let media_rule = s.cssRules[0]; |
| assert_true(media_rule instanceof CSSMediaRule); |
| assert_equals(media_rule.cssRules.length, 0); |
| assert_throws_dom('SyntaxError', () => { |
| media_rule.insertRule(` |
| width: 100px; |
| height: 200px; |
| `); |
| }); |
| }, 'Attempting to insert a CSSNestedDeclaration rule into top-level @media rule'); |
| |
| test(() => { |
| let sheet = new CSSStyleSheet(); |
| assert_throws_dom('SyntaxError', () => { |
| sheet.insertRule(` |
| width: 100px; |
| height: 200px; |
| `); |
| }); |
| }, 'Attempting to insert a CSSNestedDeclaration rule into a stylesheet'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync('.a {}'); |
| assert_equals(s.cssRules.length, 1); |
| let a_rule = s.cssRules[0]; |
| assert_equals(a_rule.cssRules.length, 0); |
| assert_throws_dom('SyntaxError', () => { |
| a_rule.insertRule(''); |
| }); |
| }, 'Attempting to insert a CSSNestedDeclaration rule, empty block'); |
| |
| test(() => { |
| let s = new CSSStyleSheet(); |
| s.replaceSync('.a {}'); |
| assert_equals(s.cssRules.length, 1); |
| let a_rule = s.cssRules[0]; |
| assert_equals(a_rule.cssRules.length, 0); |
| assert_throws_dom('SyntaxError', () => { |
| a_rule.insertRule(` |
| xwidth: 100px; |
| xheight: 200px; |
| `); |
| }); |
| }, 'Attempting to insert a CSSNestedDeclaration rule, all invalid declarations'); |
| </script> |
