nested-declarations-cssom-whitespace.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 2 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-nesting/nested-declarations-cssom-whitespace.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Nesting: CSSNestedDeclarations CSSOM (whitespace)</title>

<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-declarations-rule">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

  // https://drafts.csswg.org/cssom/#serialize-a-css-rule

  test(() => {

    let s = new CSSStyleSheet();

    s.replaceSync(`

      .a {

        & { }

        left: 1px;

        & { }

        right: 1px;

`);

    assert_equals(s.cssRules.length, 1);

    let a_rule = s.cssRules[0];

    assert_equals(a_rule.cssRules.length, 4);

    for (let child_rule of a_rule.cssRules) {

      child_rule.style = '';

    assert_equals(a_rule.cssText, '.a {\n  & { }\n  & { }\n}');

  }, 'Empty CSSNestedDeclarations do not affect outer serialization');

  // https://drafts.csswg.org/cssom/#serialize-a-css-rule

  test(() => {

    let s = new CSSStyleSheet();

    s.replaceSync(`

      .a {

        @media (width > 1px) {

          & { }

          left: 1px;

          & { }

          right: 1px;

`);

    assert_equals(s.cssRules.length, 1);

    let outer = s.cssRules[0];

    assert_equals(outer.cssRules.length, 1);

    // @media

    let media = outer.cssRules[0];

    assert_equals(media.cssRules.length, 4);

    for (let child_rule of media.cssRules) {

      child_rule.style = '';

    assert_equals(media.cssText, '@media (width > 1px) {\n  & { }\n  & { }\n}');

  }, 'Empty CSSNestedDeclarations do not affect outer serialization (nested grouping rule)');

</script>