nested-declarations-cssom.html | Explore in Territory

<!DOCTYPE html>
<title>CSS Nesting: CSSNestedDeclarations CSSOM</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>
  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      .a {
        & { --x:1; }
        --x:2;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 2);
    assert_equals(outer.cssRules[0].cssText, `& { --x: 1; }`);
    assert_equals(outer.cssRules[1].cssText, `--x: 2;`);
  }, 'Trailing declarations');

  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      .a {
        --a:1;
        --b:1;
        & { --c:1; }
        --d:1;
        --e:1;
        & { --f:1; }
        --g:1;
        --h:1;
        --i:1;
        & { --j:1; }
        --k:1;
        --l:1;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 6);
    assert_equals(outer.cssRules[0].cssText, `& { --c: 1; }`);
    assert_equals(outer.cssRules[1].cssText, `--d: 1; --e: 1;`);
    assert_equals(outer.cssRules[2].cssText, `& { --f: 1; }`);
    assert_equals(outer.cssRules[3].cssText, `--g: 1; --h: 1; --i: 1;`);
    assert_equals(outer.cssRules[4].cssText, `& { --j: 1; }`);
    assert_equals(outer.cssRules[5].cssText, `--k: 1; --l: 1;`);
  }, 'Mixed declarations');

  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      .a {
        & { --x:1; }
        --y:2;
        --z:3;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 2);
    let nested_declarations = outer.cssRules[1];
    assert_true(nested_declarations instanceof CSSNestedDeclarations);
    assert_equals(nested_declarations.style.length, 2);
    assert_equals(nested_declarations.style.getPropertyValue('--x'), '');
    assert_equals(nested_declarations.style.getPropertyValue('--y'), '2');
    assert_equals(nested_declarations.style.getPropertyValue('--z'), '3');
  }, 'CSSNestedDeclarations.style');

  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      .a {
        @media (width > 100px) {
          --x:1;
          --y:1;
          .b { }
          --z:1;
        }
        --w:1;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 2);

    // @media
    let media = outer.cssRules[0];
    assert_equals(media.cssRules.length, 3);
    assert_true(media.cssRules[0] instanceof CSSNestedDeclarations);
    assert_equals(media.cssRules[0].cssText, `--x: 1; --y: 1;`);
    assert_equals(media.cssRules[1].cssText, `& .b { }`);
    assert_true(media.cssRules[2] instanceof CSSNestedDeclarations);
    assert_equals(media.cssRules[2].cssText, `--z: 1;`);

    assert_true(outer.cssRules[1] instanceof CSSNestedDeclarations);
    assert_equals(outer.cssRules[1].cssText, `--w: 1;`);
  }, 'Nested group rule');

  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      .a {
        @scope (.foo) {
          --x:1;
          --y:1;
          .b { }
          --z:1;
        }
        --w:1;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 2);

    // @scope
    let scope = outer.cssRules[0];
    assert_equals(scope.cssRules.length, 3);
    assert_true(scope.cssRules[0] instanceof CSSNestedDeclarations);
    assert_equals(scope.cssRules[0].cssText, `--x: 1; --y: 1;`);
    assert_equals(scope.cssRules[1].cssText, `.b { }`); // Implicit :scope here.
    assert_true(scope.cssRules[2] instanceof CSSNestedDeclarations);
    assert_equals(scope.cssRules[2].cssText, `--z: 1;`);

    assert_true(outer.cssRules[1] instanceof CSSNestedDeclarations);
    assert_equals(outer.cssRules[1].cssText, `--w: 1;`);
  }, 'Nested @scope rule');

  test(() => {
    let s = new CSSStyleSheet();
    s.replaceSync(`
      a {
        & { --x:1; }
        width: 100px;
        height: 200px;
        color:hover {}
        --y: 2;
      }
    `);
    assert_equals(s.cssRules.length, 1);
    let outer = s.cssRules[0];
    assert_equals(outer.cssRules.length, 4);
    assert_equals(outer.cssRules[0].cssText, `& { --x: 1; }`);
    assert_equals(outer.cssRules[1].cssText, `width: 100px; height: 200px;`);
    assert_equals(outer.cssRules[2].cssText, `& color:hover { }`);
    assert_equals(outer.cssRules[3].cssText, `--y: 2;`);
  }, 'Inner rule starting with an ident');
</script>
chromium/third_party/blink/web_tests/external/wpt/css/css-nesting/nested-declarations-cssom.html
