css/css-nesting/nested-rule-cssom-invalidation.html

<!DOCTYPE html>
<title>CSS Nesting: Style invalidates after CSSOM mutations to nested rules</title>
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-style-rule">
<link rel="help" href="https://drafts.csswg.org/css-nesting-1/#nested-group-rules">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style id=set_parent_selector_text_style>
  .set_parent_selector_text {
    div {
      color: red;
    }
    .a1 {
      color: green;
    }
  }
</style>
<div class=set_parent_selector_text>
  <div class=a1>A1</div>
  <div class=a2>A2</div>
</div>
<script>
  test(() => {
    let a1 = document.querySelector('.set_parent_selector_text > .a1');
    let a2 = document.querySelector('.set_parent_selector_text > .a2');
    assert_equals(getComputedStyle(a1).color, 'rgb(0, 128, 0)');
    assert_equals(getComputedStyle(a2).color, 'rgb(255, 0, 0)');

    let rules = set_parent_selector_text_style.sheet.cssRules;
    assert_equals(rules.length, 1);
    assert_equals(rules[0].cssRules.length, 2);

    let a_rule = rules[0].cssRules[1];
    assert_equals(a_rule.selectorText, '& .a1');
    a_rule.selectorText = '.a2';

    assert_equals(getComputedStyle(a1).color, 'rgb(255, 0, 0)');
    assert_equals(getComputedStyle(a2).color, 'rgb(0, 128, 0)');
  }, 'Nested rule responds to parent selector text change');
</script>