nested-declarations-cssom-whitespace.html (1592B)
1 <!DOCTYPE html> 2 <title>CSS Nesting: CSSNestedDeclarations CSSOM (whitespace)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script> 7 // https://drafts.csswg.org/cssom/#serialize-a-css-rule 8 test(() => { 9 let s = new CSSStyleSheet(); 10 s.replaceSync(` 11 .a { 12 & { } 13 left: 1px; 14 & { } 15 right: 1px; 16 } 17 `); 18 assert_equals(s.cssRules.length, 1); 19 let a_rule = s.cssRules[0]; 20 assert_equals(a_rule.cssRules.length, 4); 21 for (let child_rule of a_rule.cssRules) { 22 child_rule.style = ''; 23 } 24 assert_equals(a_rule.cssText, '.a {\n & { }\n & { }\n}'); 25 }, 'Empty CSSNestedDeclarations do not affect outer serialization'); 26 27 // https://drafts.csswg.org/cssom/#serialize-a-css-rule 28 test(() => { 29 let s = new CSSStyleSheet(); 30 s.replaceSync(` 31 .a { 32 @media (width > 1px) { 33 & { } 34 left: 1px; 35 & { } 36 right: 1px; 37 } 38 } 39 `); 40 assert_equals(s.cssRules.length, 1); 41 let outer = s.cssRules[0]; 42 assert_equals(outer.cssRules.length, 1); 43 44 // @media 45 let media = outer.cssRules[0]; 46 assert_equals(media.cssRules.length, 4); 47 for (let child_rule of media.cssRules) { 48 child_rule.style = ''; 49 } 50 assert_equals(media.cssText, '@media (width > 1px) {\n & { }\n & { }\n}'); 51 }, 'Empty CSSNestedDeclarations do not affect outer serialization (nested grouping rule)'); 52 </script>