css/cssom/CSSGroupingRule-insertRule-computed.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSSOM: Computed style cache invalidation for CSSGroupingRule</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssgroupingrule-insertrule">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>

<style id="test-style">
  #target {
    color: rgb(0, 0, 0);
  }

  @media all {
    #target {
      color: rgb(0, 0, 255);
    }
  }
</style>

<div id="target">Grouping Rule Test</div>

<script>
"use strict";

test(() => {
  const target = document.getElementById("target");
  const styleSheet = document.getElementById("test-style").sheet;
  const mediaRule = styleSheet.cssRules[1];

  assert_equals(getComputedStyle(target).color, "rgb(0, 0, 255)", "The initial color should be blue");

  mediaRule.insertRule("#target { color: rgb(255, 0, 0); }", 1);
  assert_equals(getComputedStyle(target).color, "rgb(255, 0, 0)", "The computed color should be red");

  mediaRule.deleteRule(1);
  assert_equals(getComputedStyle(target).color, "rgb(0, 0, 255)", "The computed color should revert to blue");
}, "Styles should be recomputed correctly after insertRule and deleteRule on a CSSGroupingRule.");
</script>