Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-nesting/serialize-group-rules-with-decls.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Serialization of declarations in group rules</title>
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
<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>