| <!doctype html> |
| <title>Serialization of declarations in group rules</title> |
| <link rel="author" title="Steinar H. Gunderson" href="mailto:[email protected]"> |
| <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7850"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style id="test-sheet"></style> |
| <script> |
| function serialize(cssText) { |
| let [ss] = document.styleSheets; |
| while (ss.rules.length) { |
| ss.removeRule(0) |
| } |
| ss.insertRule(cssText); |
| return ss.rules[0].cssText; |
| } |
| |
| function assert_unchanged(cssText, description) { |
| test(() => { |
| assert_equals(serialize(cssText), cssText, description); |
| }, description); |
| } |
| |
| function assert_becomes(cssText, serializedCssText, description) { |
| test(() => { |
| assert_equals(serialize(cssText), serializedCssText, description); |
| }, description); |
| } |
| |
| assert_unchanged( |
| "@media screen {\n div { color: red; background-color: green; }\n}", |
| "Declarations are serialized on one line, rules on two." |
| ) |
| |
| assert_becomes( |
| "div { @media screen { color: red; background-color: green; } }", |
| "div {\n @media screen {\n color: red; background-color: green;\n}\n}", |
| "Mixed declarations/rules are on two lines." |
| ); |
| assert_becomes( |
| "div {\n @supports selector(&) { color: red; background-color: green; } &:hover { color: navy; } }", |
| "div {\n @supports selector(&) {\n color: red; background-color: green;\n}\n &:hover { color: navy; }\n}", |
| "Implicit rule is serialized", |
| ); |
| |
| assert_unchanged("div {\n @media screen {\n & { color: red; }\n}\n}", "Implicit rule not removed"); |
| assert_becomes( |
| "div { @media screen { & { color: red; &:hover { } } }", |
| "div {\n @media screen {\n & {\n color: red;\n &:hover { }\n}\n}\n}", |
| "Implicit + empty hover rule" |
| ); |
| assert_becomes( |
| "div { @media screen { &.cls { color: red; } & { color: red; }", |
| "div {\n @media screen {\n &.cls { color: red; }\n & { color: red; }\n}\n}", |
| "Implicit like rule not in first position" |
| ); |
| assert_becomes( |
| "div { @media screen { & { color: red; } & { color: red; }", |
| "div {\n @media screen {\n & { color: red; }\n & { color: red; }\n}\n}", |
| "Two implicit-like rules" |
| ); |
| assert_becomes( |
| "div { @media screen { color: red; & { color: red; }", |
| "div {\n @media screen {\n color: red;\n & { color: red; }\n}\n}", |
| "Implicit like rule after decls" |
| ); |
| assert_becomes( |
| "div { @media screen { color: red; & { color: blue; }", |
| "div {\n @media screen {\n color: red;\n & { color: blue; }\n}\n}", |
| "Implicit like rule after decls, missing closing braces" |
| ); |
| assert_becomes( |
| "div { @media screen { &, p > & { color: blue; }", |
| "div {\n @media screen {\n &, p > & { color: blue; }\n}\n}", |
| "Implicit like rule with other selectors" |
| ); |
| |
| assert_becomes( |
| "div { & { color: red; } }", |
| "div {\n & { color: red; }\n}", |
| "Implicit-like rule in style rule" |
| ); |
| |
| // Empty rules (confusingly?) serialize different between style rules |
| // and conditional group rules. |
| assert_unchanged("@media screen {\n}", "Empty conditional rule"); |
| assert_unchanged("div { }", "Empty style rule"); |
| assert_unchanged("div {\n @media screen {\n}\n}", "Empty conditional inside style rule"); |
| assert_unchanged("@media screen {\n div { }\n}", "Empty style inside conditional"); |
| </script> |
