css-style-attr-decl-block.html

<!DOCTYPE html>

<meta charset="UTF-8">

<link rel="author" title="Xidorn Quan" href="mailto:me@upsuper.org">

<link rel="help" href="https://drafts.csswg.org/cssom-1/#css-declaration-blocks">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<body>

<script>

function createTestElement(style) {

  let wrapper = document.createElement("div");

  wrapper.innerHTML = `<div id="test" style="${style}"></div>`;

  return wrapper.querySelector("#test");

test(function() {

  let elem = createTestElement("z-index: 10;");

  assert_equals(elem.style.cssText, "z-index: 10;");

}, "Style attribute should create CSS declaration block based on its content");

test(function() {

  let elem = createTestElement("z-index: 20;");

  let style = elem.style;

  assert_equals(style.cssText, "z-index: 20;");

  function assert_css_text(value, action) {

    assert_equals(style.cssText, value, "CSS declaration block after " + action);

  elem.setAttribute("style", "z-index: 21;");

  assert_css_text("z-index: 21;", "changing the style attribute");

  elem.removeAttribute("style");

  assert_css_text("", "removing the style attribute");

  elem.setAttribute("style", "position: absolute;");

  assert_css_text("position: absolute;", "adding style attribute again");

}, "Changes to style attribute should reflect on CSS declaration block");

test(function() {

  let elem = createTestElement("z-index: 30;");

  let style = elem.style;

  assert_equals(style.cssText, "z-index: 30;");

  function assert_attr(value, action) {

    assert_equals(elem.getAttribute("style"), value, "style attribute after " + action);

  style.setProperty("z-index", "31");

  assert_attr("z-index: 31;", "changing property in CSS declaration block");

  style.removeProperty("z-index");

  assert_attr("", "removing property from CSS declaration block");

  style.setProperty("position", "absolute");

  assert_attr("position: absolute;", "adding property to CSS declaration block");

  style.cssText = "z-index: 32;";

  assert_attr("z-index: 32;", "changing cssText");

  style.cssText = "z-index: 33; invalid";

  assert_attr("z-index: 33;", "changing cssText to a partial invalid value");

}, "Changes to CSS declaration block should reflect on style attribute");

test(function() {

  let elem = createTestElement("z-index: 40;");

  let style = elem.style;

  assert_equals(style.cssText, "z-index: 40;");

  // Create an observer for the element.

  let observer = new MutationObserver(function() {});

  observer.observe(elem, {attributes: true, attributeOldValue: true});

  function assert_record_with_old_value(oldValue, action) {

    let records = observer.takeRecords();

    assert_equals(records.length, 1, "number of mutation records after " + action);

    let record = records[0];

    assert_equals(record.type, "attributes", "mutation type after " + action);

    assert_equals(record.attributeName, "style", "mutated attribute after " + action);

    assert_equals(record.oldValue, oldValue, "old value after " + action);

  style.setProperty("z-index", "41");

  assert_record_with_old_value("z-index: 40;", "changing property in CSS declaration block");

  style.cssText = "z-index: 42;";

  assert_record_with_old_value("z-index: 41;", "changing cssText");

  style.cssText = "z-index: 42;";

  assert_record_with_old_value("z-index: 42;", "changing cssText with the same content");

  style.removeProperty("z-index");

  assert_record_with_old_value("z-index: 42;", "removing property from CSS declaration block");

  // Mutation to shorthand properties should also trigger only one mutation record.

  style.setProperty("margin", "1px");

  assert_record_with_old_value("", "adding shorthand property to CSS declaration block");

  style.removeProperty("margin");

  assert_record_with_old_value("margin: 1px;", "removing shorthand property from CSS declaration block");

  // Final sanity check.

  assert_equals(elem.getAttribute("style"), "");

}, "Changes to CSS declaration block should queue mutation record for style attribute");

test(function() {

  let elem = createTestElement("z-index: 50; invalid");

  let style = elem.style;

  assert_equals(style.cssText, "z-index: 50;");

  // Create an observer for the element.

  let observer = new MutationObserver(function() {});

  observer.observe(elem, {attributes: true});

  function assert_no_record(action) {

    let records = observer.takeRecords();

    assert_equals(records.length, 0, "expect no record after " + action);

  style.setProperty("z-index", "invalid");

  assert_no_record("setting invalid value to property");

  // Longhand property.

  style.removeProperty("position");

  assert_no_record("removing non-existing longhand property");

  style.setProperty("position", "");

  assert_no_record("setting empty string to non-existing longhand property");

  // Shorthand property.

  style.removeProperty("margin");

  assert_no_record("removing non-existing shorthand property");

  style.setProperty("margin", "");

  assert_no_record("setting empty string to non-existing shorthand property");

  // Check that the value really isn't changed.

  assert_equals(elem.getAttribute("style"), "z-index: 50; invalid",

                "style attribute after removing non-existing properties");

}, "Removing non-existing property or setting invalid value on CSS declaration block shouldn't queue mutation record");

test(function() {

  let elem = createTestElement("background-image: url(./);");

  let style = elem.style;

  let base = document.createElement("base");

  base.href = "/";

  document.body.appendChild(elem);

  let originalComputedValue = getComputedStyle(elem).backgroundImage;

  document.head.appendChild(base);

  this.add_cleanup(() => {

    document.head.removeChild(base);

    document.body.removeChild(elem);

});

  style.setProperty("background-color", "green");

  assert_equals(getComputedStyle(elem).backgroundImage, originalComputedValue,

                "getComputedStyle(elem).backgroundImage after setting background-color");

  style.setProperty("background-image", "url(./)");

  assert_not_equals(getComputedStyle(elem).backgroundImage, originalComputedValue,

                    "getComputedStyle(elem).backgroundImage after setting background-image");

}, "Changes to CSS declaration block after a base URL change");

test(function() {

  let e1 = document.createElement('div');

  let e2 = document.createElement('div');

  document.body.append(e1, e2);

  this.add_cleanup(() => {

    e1.remove();

    e2.remove();

});

  e1.style.cssText = "all:revert;border-bottom-left-radius:1px;";

  e2.style.cssText = "all:unset;border-bottom-left-radius:1px;";

  let processed = e1.style.cssText.split(';')

    .map(x => x.replace(/revert$/, 'unset')).join(';');

  assert_equals(processed, e2.style.cssText);

}, "Expansion of all:unset and all:revert treated identically");

</script>