Blitz - WPT: set-selector-text.html

wpt / css / css-nesting / set-selector-text.html

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

Subtest	Status	Message
Outer selectorText text mutation with inner style rule	FAIL	cannot convert 'null' or 'undefined' to object
Outer selectorText text mutation with inner @media rule	FAIL	cannot convert 'null' or 'undefined' to object
Outer selectorText text mutation with inner @supports rule	FAIL	cannot convert 'null' or 'undefined' to object
Outer selectorText text mutation with inner @layer rule	FAIL	cannot convert 'null' or 'undefined' to object
Outer selectorText text mutation with inner @container rule	FAIL	assert_equals: z-index of "ax" element before selectorText mutation expected "1" but got "auto"
Outer selectorText text mutation with inner @scope rule	FAIL	assert_equals: z-index of "ax" element before selectorText mutation expected "1" but got "auto"
Outer selectorText text mutation with inner nested decl. rule	FAIL	cannot convert 'null' or 'undefined' to object

Enable JavaScript in test iframe

/css/css-nesting/set-selector-text.html

<!DOCTYPE html>
<title>CSS Nesting: Mutating selectorText of outer rule</title>
<link rel="help" href="https://drafts.csswg.org/css-nesting/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style id=style>
</style>
<main style="container-type:size;width:50px;height:50px">
  <div class=a>
    <div class=x></div>
  </div>
  <div class=b>
    <div class=x></div>
  </div>
</main>
<script>
  let cases = [
    ['style',        '.a { & .x { z-index: 1; } }'],
    ['@media',       '.a { @media (width) { & .x { z-index: 1; } } }'],
    ['@supports',    '.a { @supports (width:1px) { & .x { z-index: 1; } } }'],
    ['@layer',       '.a { @layer foo { & .x { z-index: 1; } } }'],
    ['@container',   '.a { @container (width) { & .x { z-index: 1; } } }'],
    ['@scope',       '.a { @scope (&) { & .x { z-index: 1; } } }'],
    ['nested decl.', '.a { & .x { .y { } z-index: 1; } } '],
  ];

  for (let [test_name, style_text] of cases) {
    test((t) => {
      t.add_cleanup(() => { style.textContent = ''; });
      style.textContent = style_text;
      let ax = document.querySelector('.a > .x');
      let bx = document.querySelector('.b > .x');
      assert_equals(getComputedStyle(ax).zIndex, '1',
        'z-index of "ax" element before selectorText mutation');
      assert_equals(getComputedStyle(bx).zIndex, 'auto',
        'z-index of "bx" element before selectorText mutation');
      style.sheet.cssRules[0].selectorText = '.b';
      assert_equals(getComputedStyle(ax).zIndex, 'auto',
        'z-index of "ax" element after selectorText mutation');
      assert_equals(getComputedStyle(bx).zIndex, '1',
        'z-index of "bx" element after selectorText mutation');
    }, `Outer selectorText text mutation with inner ${test_name} rule`);
  }
</script>