css/cssom/getComputedStyle-mutations.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>Updating the document must invalidate the style cache and change the results of getComputedStyle</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">

<style>
  .my-link {
    font-size: 17px;
  }

  .my-link[href] {
    font-size: 18px;
  }

  .my-link[href="#a"] {
    font-size: 19px;
  }

  .my-link[href="#b"] {
    font-size: 20px;
  }

  .my-box ~ .my-link {
    font-size: 21px;
  }

  .my-box.bigger ~ .my-link {
    font-size: 22px;
  }

  .my-link:empty {
    font-size: 23px;
  }
</style>

<a class="my-link">Hello world</a>
<script>
"use strict";
const link = document.querySelector(".my-link");

test(() => {
  assert_equals(getComputedStyle(link).fontSize, "17px");
}, "Initial style value");

test(() => {
  link.href = "#x"; // appendAttribute

  assert_equals(getComputedStyle(link).fontSize, "18px");
}, "Assigning to attribute updates the computed style");

test(() => {
  link.setAttribute("href", "#a"); // changeAttribute

  assert_equals(getComputedStyle(link).fontSize, "19px");
}, "Setting an attribute updates the computed style");

test(() => {
  const attr = document.createAttribute("href");
  attr.value = "#b";
  link.attributes.setNamedItem(attr); // replaceAttribute

  assert_equals(getComputedStyle(link).fontSize, "20px");
}, "Replacing an attribute updates the computed style");

test(() => {
  link.removeAttribute("href"); // removeAttribute

  assert_equals(getComputedStyle(link).fontSize, "17px");
}, "Removing an attribute updates the computed style");

test(() => {
  const box = document.createElement("div");
  box.className = "my-box";
  link.before(box);

  assert_equals(getComputedStyle(link).fontSize, "21px");
}, "Inserting an element updates the computed style");

test(() => {
  const biggerBox = document.createElement("div");
  biggerBox.className = "my-box bigger";
  document.querySelector(".my-box").replaceWith(biggerBox);

  assert_equals(getComputedStyle(link).fontSize, "22px");
}, "Replacing an element updates the computed style");

test(() => {
  const box = document.querySelector(".my-box");
  document.body.removeChild(box);

  assert_equals(getComputedStyle(link).fontSize, "17px");
}, "Removing an element updates the computed style");

test(() => {
  link.textContent = "";
  assert_equals(getComputedStyle(link).fontSize, "23px");
}, "Emptying an element updates the computed style");
</script>