Blitz - WPT: at-scope-relative-syntax.html

wpt / css / css-cascade / at-scope-relative-syntax.html

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

Subtest	Status	Message
> .foo in @scope,.nest created by string valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in .nest,@scope created by string valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in @scope,.nest,@media screen created by string valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in .nest,@scope,@media screen created by string valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in @scope,.nest created by insertRule valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in .nest,@scope created by insertRule valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in @scope,.nest,@media screen created by insertRule valid	FAIL	cannot convert 'null' or 'undefined' to object
> .foo in .nest,@scope,@media screen created by insertRule valid	FAIL	cannot convert 'null' or 'undefined' to object

Enable JavaScript in test iframe

/css/css-cascade/at-scope-relative-syntax.html

<!doctype html>
<title>@scope and Nesting: Parsing inner style rules with relative selector syntax</title>
<link rel="help" href="https://drafts.csswg.org/css-cascade-6/#scoped-rules">
<link rel="help" href="https://drafts.csswg.org/css-nesting/#nesting">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10196">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<main id=main></main>
<script>
  function create_rule_string(prelude, inner) {
    if (prelude.length === 0) {
      return `${inner} {}`;
    }
    let outermost = prelude[0];
    let rest = create_rule_string(prelude.slice(1), inner);
    return `${outermost} { ${rest} }`;
  }

  function create_rule_by_string(style, prelude, inner) {
    style.textContent = create_rule_string(prelude, inner);
  }

  function create_rule_by_insertion(style, prelude, inner) {
    let current = style.sheet;
    for (const p of prelude) {
      let idx = current.insertRule(`${p} {}`);
      current = current.cssRules[idx];
    }
    current.insertRule(`${inner} {}`);
  }

  function innermost_selector(depth, rules) {
    let r = rules;
    let d = depth + 1;
    while (d != 0) {
      assert_equals(r.cssRules.length, 1);
      r = r.cssRules[0];
      d--;
    }
    return r.selectorText;
  }

  const create_method = {
    "string": create_rule_by_string,
    "insertRule": create_rule_by_insertion,
  };

  function test_inner(prelude, method, actual, expected) {
    if (expected === undefined) {
      expected = actual;
    }
    test(t => {
      t.add_cleanup(() => main.replaceChildren());
      const style = document.createElement('style');
      main.append(style);
      create_method[method](style, prelude, actual);
      const innerSelector = innermost_selector(prelude.length, style.sheet);
      assert_equals(innerSelector, expected);
    }, `${actual} in ${prelude} created by ${method} valid`);
  }

  for (const method of Object.keys(create_method)) {
    test_inner(['@scope' , '.nest'], method, '> .foo', '& > .foo');
    test_inner(['.nest', '@scope'], method, '> .foo');

    test_inner(['@scope' , '.nest', '@media screen'], method, '> .foo', '& > .foo');
    test_inner(['.nest', '@scope', '@media screen'], method, '> .foo');
  }
</script>