Bug 1437468 [wpt PR 9376] - [cssom] Add test for synchronization between css declaration block and style attribute, a=testonly
authorXidorn Quan <me@upsuper.org>
Mon, 26 Mar 2018 11:24:49 +0000
changeset 467013 d2654f85b1b5989014332ce47e61ffd86f11cb3e
parent 467012 32d2f14532dbee4b5d1c6d95f39f97a3005f3d4d
child 467014 71068d539796133f837207d85bd5a020bef3cf6c
push id1728
push userjlund@mozilla.com
push dateMon, 18 Jun 2018 21:12:27 +0000
treeherdermozilla-release@c296fde26f5f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1437468
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1437468 [wpt PR 9376] - [cssom] Add test for synchronization between css declaration block and style attribute, a=testonly Automatic update from web-platform-tests[cssom] Add test for synchronization between css declaration block and style attribute -- Test interaction of changing declarations and base URL change wpt-commits: bec56c0a9a330d03b116504f0bd9e3dff0d79463, c81c64472cbc4a9961c627e379cb2b66b800026e wpt-pr: 9376 wpt-commits: bec56c0a9a330d03b116504f0bd9e3dff0d79463, c81c64472cbc4a9961c627e379cb2b66b800026e wpt-pr: 9376
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/css/cssom/css-style-attr-decl-block.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -314536,16 +314536,22 @@
     ]
    ],
    "css/cssom/computed-style-001.html": [
     [
      "/css/cssom/computed-style-001.html",
      {}
     ]
    ],
+   "css/cssom/css-style-attr-decl-block.html": [
+    [
+     "/css/cssom/css-style-attr-decl-block.html",
+     {}
+    ]
+   ],
    "css/cssom/css-style-attribute-modifications.html": [
     [
      "/css/cssom/css-style-attribute-modifications.html",
      {}
     ]
    ],
    "css/cssom/css-style-declaration-modifications.html": [
     [
@@ -526021,16 +526027,20 @@
   "css/cssom/StyleSheetList.html": [
    "3a0e6f64f70f863d679e537c4bfb76aaa0d3598a",
    "testharness"
   ],
   "css/cssom/computed-style-001.html": [
    "0331a648e6b0d56f0e7365f1ff7d991ea77ce3e4",
    "testharness"
   ],
+  "css/cssom/css-style-attr-decl-block.html": [
+   "1d68a3fd1560308c0d2f3478864d84f4361e4ab9",
+   "testharness"
+  ],
   "css/cssom/css-style-attribute-modifications.html": [
    "9199534f3b6cc473832562b1701ade3a05dde172",
    "testharness"
   ],
   "css/cssom/css-style-declaration-modifications.html": [
    "c169d758c1d91b75697b04cf72750f8ac1650e1a",
    "testharness"
   ],
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/cssom/css-style-attr-decl-block.html
@@ -0,0 +1,133 @@
+<!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_true(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");
+</script>