wpt / css / css-nesting / serialize-group-rules-with-decls.html

Status: FAIL | Duration: 54ms | Subtests: 0/15 | Open test on wpt.live | wpt.fyi

TestTest SourceSubtests (0/15)

Data from commit:
a50cb89 wpt: run reference-named files which are themselves tests (#836) (2026-09-03)

SubtestStatusMessage
Declarations are serialized on one line, rules on two.FAILCannot destructure 'undefined' value
Mixed declarations/rules are on two lines.FAILCannot destructure 'undefined' value
Implicit rule is serializedFAILCannot destructure 'undefined' value
Implicit rule not removedFAILCannot destructure 'undefined' value
Implicit + empty hover ruleFAILCannot destructure 'undefined' value
Implicit like rule not in first positionFAILCannot destructure 'undefined' value
Two implicit-like rulesFAILCannot destructure 'undefined' value
Implicit like rule after declsFAILCannot destructure 'undefined' value
Implicit like rule after decls, missing closing bracesFAILCannot destructure 'undefined' value
Implicit like rule with other selectorsFAILCannot destructure 'undefined' value
Implicit-like rule in style ruleFAILCannot destructure 'undefined' value
Empty conditional ruleFAILCannot destructure 'undefined' value
Empty style ruleFAILCannot destructure 'undefined' value
Empty conditional inside style ruleFAILCannot destructure 'undefined' value
Empty style inside conditionalFAILCannot destructure 'undefined' value

/css/css-nesting/serialize-group-rules-with-decls.html

<!doctype html>
<title>Serialization of declarations in group rules</title>
<link rel="author" title="Steinar H. Gunderson" href="mailto:sesse@chromium.org">
<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>