css/cssom/cssstyledeclaration-setter-declarations.html

<!DOCTYPE html>
<title>CSSOM test: declaration block after setting via CSSOM</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#set-a-css-declaration-value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<script>
  function generateCSSDeclBlock(props) {
    let elem = document.createElement("div");
    let cssText = props.map(({name, value, priority}) => {
      let longhand = `${name}: ${value}`;
      if (priority) {
        longhand += "!" + priority;
      }
      return longhand + ";";
    }).join(" ");
    elem.setAttribute("style", cssText);
    return elem.style;
  }
  function compareByName(a, b) {
    if (a.name < b.name) return -1;
    if (a.name > b.name) return 1;
    return 0;
  }
  function checkDeclarationsAnyOrder(block, props, msg) {
    let actual = [];
    for (let name of block) {
      let value = block.getPropertyValue(name);
      let priority = block.getPropertyPriority(name);
      actual.push({name, value, priority});
    }
    actual.sort(compareByName);
    let expected = Array.from(props);
    expected.sort(compareByName);
    assert_object_equals(actual, expected, "Declaration block content should match " + msg);
  }
  function longhand(name, value, priority="") {
    return {name, value, priority};
  }
  function* shorthand(name, value, priority="") {
    for (let subprop of SUBPROPS[name]) {
      yield longhand(subprop, value, priority);
    }
  }

  const SUBPROPS = {
    "margin": ["margin-top", "margin-right", "margin-bottom", "margin-left"],
    "padding": ["padding-top", "padding-right", "padding-bottom", "padding-left"],
  };

  test(function() {
    let expectedDecls = [
      longhand("top", "1px"),
      longhand("bottom", "2px"),
      longhand("left", "3px", "important"),
      longhand("right", "4px"),
    ];
    let block = generateCSSDeclBlock(expectedDecls);
    checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");

    block.setProperty("top", "5px", "important");
    expectedDecls[0] = longhand("top", "5px", "important");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property");

    block.setProperty("bottom", "2px");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value");

    block.setProperty("left", "3px");
    expectedDecls[2].priority = "";
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority");

    block.setProperty("float", "none");
    expectedDecls.push(longhand("float", "none"));
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property");
  }, "setProperty with longhand should update only the declaration being set");

  test(function() {
    let expectedDecls = [
      longhand("top", "1px"),
      longhand("bottom", "2px"),
      longhand("left", "3px", "important"),
      longhand("right", "4px"),
    ];
    let block = generateCSSDeclBlock(expectedDecls);
    checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");

    block.top = "5px";
    expectedDecls[0] = longhand("top", "5px");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property");

    block.bottom = "2px";
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with identical value");

    block.left = "3px";
    expectedDecls[2].priority = "";
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting existing property with different priority");

    block.float = "none";
    expectedDecls.push(longhand("float", "none"));
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting non-existing property");
  }, "property setter should update only the declaration being set");

  test(function() {
    let expectedDecls = [
      ...shorthand("margin", "1px"),
      longhand("top", "2px"),
      ...shorthand("padding", "3px", "important"),
    ];
    let block = generateCSSDeclBlock(expectedDecls);
    checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");

    block.setProperty("margin", "4px");
    for (let i = 0; i < 4; i++) {
      expectedDecls[i].value = "4px";
    }
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand");

    block.setProperty("margin", "4px");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value");

    block.setProperty("padding", "3px");
    for (let i = 5; i < 9; i++) {
      expectedDecls[i].priority = "";
    }
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority");

    block.setProperty("margin-bottom", "5px", "important");
    expectedDecls[2] = longhand("margin-bottom", "5px", "important");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand");
  }, "setProperty with shorthand should update only the declarations being set");

  test(function() {
    let expectedDecls = [
      ...shorthand("margin", "1px"),
      longhand("top", "2px"),
      ...shorthand("padding", "3px", "important"),
    ];
    let block = generateCSSDeclBlock(expectedDecls);
    checkDeclarationsAnyOrder(block, expectedDecls, "in initial block");

    block.margin = "4px";
    for (let i = 0; i < 4; i++) {
      expectedDecls[i].value = "4px";
    }
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand");

    block.margin = "4px";
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with identical value");

    block.padding = "3px";
    for (let i = 5; i < 9; i++) {
      expectedDecls[i].priority = "";
    }
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting an existing shorthand with different priority");

    block.marginBottom = "5px";
    expectedDecls[2] = longhand("margin-bottom", "5px");
    checkDeclarationsAnyOrder(block, expectedDecls, "after setting a longhand in an existing shorthand");
  }, "longhand property setter should update only the decoarations being set");
</script>