serialize-group-rules-with-decls.html (3447B)
1 <!doctype html> 2 <title>Serialization of declarations in group rules</title> 3 <link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7850"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style id="test-sheet"></style> 9 <script> 10 function serialize(cssText) { 11 let [ss] = document.styleSheets; 12 while (ss.rules.length) { 13 ss.removeRule(0) 14 } 15 ss.insertRule(cssText); 16 return ss.rules[0].cssText; 17 } 18 19 function assert_unchanged(cssText, description) { 20 test(() => { 21 assert_equals(serialize(cssText), cssText, description); 22 }, description); 23 } 24 25 function assert_becomes(cssText, serializedCssText, description) { 26 test(() => { 27 assert_equals(serialize(cssText), serializedCssText, description); 28 }, description); 29 } 30 31 assert_unchanged( 32 "@media screen {\n div { color: red; background-color: green; }\n}", 33 "Declarations are serialized on one line, rules on two." 34 ) 35 36 assert_becomes( 37 "div { @media screen { color: red; background-color: green; } }", 38 "div {\n @media screen {\n color: red; background-color: green;\n}\n}", 39 "Mixed declarations/rules are on two lines." 40 ); 41 assert_becomes( 42 "div {\n @supports selector(&) { color: red; background-color: green; } &:hover { color: navy; } }", 43 "div {\n @supports selector(&) {\n color: red; background-color: green;\n}\n &:hover { color: navy; }\n}", 44 "Implicit rule is serialized", 45 ); 46 47 assert_unchanged("div {\n @media screen {\n & { color: red; }\n}\n}", "Implicit rule not removed"); 48 assert_becomes( 49 "div { @media screen { & { color: red; &:hover { } } }", 50 "div {\n @media screen {\n & {\n color: red;\n &:hover { }\n}\n}\n}", 51 "Implicit + empty hover rule" 52 ); 53 assert_becomes( 54 "div { @media screen { &.cls { color: red; } & { color: red; }", 55 "div {\n @media screen {\n &.cls { color: red; }\n & { color: red; }\n}\n}", 56 "Implicit like rule not in first position" 57 ); 58 assert_becomes( 59 "div { @media screen { & { color: red; } & { color: red; }", 60 "div {\n @media screen {\n & { color: red; }\n & { color: red; }\n}\n}", 61 "Two implicit-like rules" 62 ); 63 assert_becomes( 64 "div { @media screen { color: red; & { color: red; }", 65 "div {\n @media screen {\n color: red;\n & { color: red; }\n}\n}", 66 "Implicit like rule after decls" 67 ); 68 assert_becomes( 69 "div { @media screen { color: red; & { color: blue; }", 70 "div {\n @media screen {\n color: red;\n & { color: blue; }\n}\n}", 71 "Implicit like rule after decls, missing closing braces" 72 ); 73 assert_becomes( 74 "div { @media screen { &, p > & { color: blue; }", 75 "div {\n @media screen {\n &, p > & { color: blue; }\n}\n}", 76 "Implicit like rule with other selectors" 77 ); 78 79 assert_becomes( 80 "div { & { color: red; } }", 81 "div {\n & { color: red; }\n}", 82 "Implicit-like rule in style rule" 83 ); 84 85 // Empty rules (confusingly?) serialize different between style rules 86 // and conditional group rules. 87 assert_unchanged("@media screen {\n}", "Empty conditional rule"); 88 assert_unchanged("div { }", "Empty style rule"); 89 assert_unchanged("div {\n @media screen {\n}\n}", "Empty conditional inside style rule"); 90 assert_unchanged("@media screen {\n div { }\n}", "Empty style inside conditional"); 91 </script>