css/cssom/style-cssText-mutations.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>cssText reflects changes after it has been read</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";

for (const kind of ["inline", "rule"]) {
  test(() => {
    let style;
    if (kind === "inline") {
      style = document.createElement("div").style;
    } else {
      const sheet = new CSSStyleSheet();
      sheet.insertRule("div {}");
      style = sheet.cssRules[0].style;
    }

    assert_equals(style.cssText, "");
    style.color = "red";
    assert_equals(style.cssText, "color: red;");
    style.color = "blue";
    assert_equals(style.cssText, "color: blue;");
    style.setProperty("color", "blue", "important");
    assert_equals(style.cssText, "color: blue !important;");
    style.setProperty("color", "blue");
    assert_equals(style.cssText, "color: blue;");
    style.removeProperty("color");
    assert_equals(style.cssText, "");

    style.setProperty("--custom", "one", "important");
    assert_equals(style.cssText, "--custom: one !important;");
    style.setProperty("--custom", "two");
    assert_equals(style.cssText, "--custom: two;");
    style.setProperty("--custom", "");
    assert_equals(style.cssText, "");

    style.margin = "1px";
    assert_equals(style.cssText, "margin: 1px;");
    style.marginLeft = "2px";
    assert_equals(style.cssText, "margin: 1px 1px 1px 2px;");
    style.cssText = "color: green !important;";
    assert_equals(style.cssText, "color: green !important;");
    style.cssText = "invalid";
    assert_equals(style.cssText, "");
    style.color = "red";
    assert_equals(style.cssText, "color: red;");
    style.cssText = "";
    assert_equals(style.cssText, "");
  }, `${kind} cssText reflects property, priority, shorthand, and declaration replacements`);
}

test(() => {
  const div = document.createElement("div");
  div.style.color = "red";
  assert_equals(div.style.cssText, "color: red;");
  div.setAttribute("style", "color:blue!important");
  assert_equals(div.style.cssText, "color: blue !important;");
  assert_equals(div.getAttribute("style"), "color:blue!important");
  div.removeAttribute("style");
  assert_equals(div.style.cssText, "");
  div.style.color = "green";
  assert_equals(div.getAttribute("style"), "color: green;");
}, "cssText reflects style attribute replacement and removal");

test(t => {
  const div = document.createElement("div");
  div.style.color = "red";
  assert_equals(div.style.cssText, "color: red;");
  const observer = new MutationObserver(() => {});
  t.add_cleanup(() => observer.disconnect());
  observer.observe(div, { attributes: true, attributeOldValue: true });

  div.style.color = "red";
  assert_equals(observer.takeRecords().length, 0);
  div.style.color = "blue";
  assert_equals(div.style.cssText, "color: blue;");
  div.style.removeProperty("color");
  assert_equals(div.style.cssText, "");
  const records = observer.takeRecords();
  assert_array_equals(records.map(record => record.oldValue), ["color: red;", "color: blue;"]);
  assert_equals(div.getAttribute("style"), "");
}, "Reading cssText preserves style mutation records");
</script>