Bug 1523429 - Skip updating child attributes in MozElement.inheritAttribute if the host attribute hasn't changed r=timdream

Differential Revision: https://phabricator.services.mozilla.com/D17887

--HG--
extra : moz-landing-system : lando

toolkit/content/customElements.js

@@ -70,12 +70,38 @@ const MozElementMixin = Base => class MozElement extends Base {
       attrName = split[1];
       attrNewName = split[0];
     }
+    let hasAttr = this.hasAttribute(attrName);
+    let attrValue = this.getAttribute(attrName);
 
+    // If our attribute hasn't changed since we last inherited, we don't want to
+    // propagate it down to the child. This prevents overriding an attribute that's
+    // been changed on the child (for instance, [checked]).
+    if (!this._inheritedAttributesMap) {
+      this._inheritedAttributesMap = new WeakMap();
+    }
+    if (!this._inheritedAttributesMap.has(child)) {
+      this._inheritedAttributesMap.set(child, {});
+    }
+    let lastInheritedAttributes = this._inheritedAttributesMap.get(child);
+
+    if ((hasAttr && attrValue === lastInheritedAttributes[attrName]) ||
+        (!hasAttr && !lastInheritedAttributes.hasOwnProperty(attrName))) {
+      // We got a request to inherit an unchanged attribute - bail.
+      return;
+    }
+
+    // Store the value we're about to pass down to the child.
+    if (hasAttr) {
+      lastInheritedAttributes[attrName] = attrValue;
+    } else {
+      delete lastInheritedAttributes[attrName];
+    }
+
+    // Actually set the attribute.
     if (attrNewName === "text") {
-      child.textContent =
-        this.hasAttribute(attrName) ? this.getAttribute(attrName) : "";
-    } else if (this.hasAttribute(attrName)) {
-      child.setAttribute(attrNewName, this.getAttribute(attrName));
+      child.textContent = hasAttr ? attrValue : "";
+    } else if (hasAttr) {
+      child.setAttribute(attrNewName, attrValue);
     } else {
       child.removeAttribute(attrNewName);
     }

toolkit/content/tests/chrome/test_custom_element_base.xul

@@ -123,7 +123,30 @@
 
     el.setAttribute("bar", "bar-test");
     is(el.label.getAttribute("bardo"), "bar-test",
-       "attribute inheritance: bardo=bar");
+       "attribute inheritance: `=` mapping");
+
+    el.label.setAttribute("bardo", "changed-from-child");
+    el.inherit();
+    is(el.label.getAttribute("bardo"), "changed-from-child",
+       "attribute inheritance: doesn't apply when host attr hasn't changed and child attr was changed");
+
+    el.label.removeAttribute("bardo");
+    el.inherit();
+    ok(!el.label.hasAttribute("bardo"),
+       "attribute inheritance: doesn't apply when host attr hasn't changed and child attr was removed");
+
+    el.setAttribute("bar", "changed-from-host");
+    is(el.label.getAttribute("bardo"), "changed-from-host",
+       "attribute inheritance: does apply when host attr has changed and child attr was changed");
+
+    el.removeAttribute("bar");
+    ok(!el.label.hasAttribute("bardo"),
+       "attribute inheritance: does apply when host attr has been removed");
+
+    el.setAttribute("bar", "changed-from-host-2");
+    is(el.label.getAttribute("bardo"), "changed-from-host-2",
+       "attribute inheritance: does apply when host attr has changed after being removed");
+
   }
 
   async function testCustomInterface() {