Bug 1545865 Handle inherited attributes overridden by derived element classes r=bgrins

The existing implementation of inherited attributes keeps a data
structure in a property on the class, but derived classes were
unintentionally getting that structure from their parent class,
preventing derived classes from declaring a different set of inherited
attributes.

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

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

toolkit/content/customElements.js

@@ -235,27 +235,34 @@ MozElements.MozElementMixin = Base => {
   }
 
   static get flippedInheritedAttributes() {
-    let {inheritedAttributes} = this;
-    if (!inheritedAttributes) {
-      return null;
-    }
-    if (!this._flippedInheritedAttributes) {
-      this._flippedInheritedAttributes = {};
-      for (let selector in inheritedAttributes) {
-        let attrRules = inheritedAttributes[selector].split(",");
-        for (let attrRule of attrRules) {
-          let attrName = attrRule;
-          let attrNewName = attrRule;
-          let split = attrName.split("=");
-          if (split.length == 2) {
-            attrName = split[1];
-            attrNewName = split[0];
-          }
+    // Have to be careful here, if a subclass overrides inheritedAttributes
+    // and its parent class is instantiated first, then reading
+    // this._flippedInheritedAttributes on the child class will return the
+    // computed value from the parent.  We store it separately on each class
+    // to ensure everything works correctly when inheritedAttributes is
+    // overridden.
+    if (!this.hasOwnProperty("_flippedInheritedAttributes")) {
+      let {inheritedAttributes} = this;
+      if (!inheritedAttributes) {
+        this._flippedInheritedAttributes = null;
+      } else {
+        this._flippedInheritedAttributes = {};
+        for (let selector in inheritedAttributes) {
+          let attrRules = inheritedAttributes[selector].split(",");
+          for (let attrRule of attrRules) {
+            let attrName = attrRule;
+            let attrNewName = attrRule;
+            let split = attrName.split("=");
+            if (split.length == 2) {
+              attrName = split[1];
+              attrNewName = split[0];
+            }
 
-          if (!this._flippedInheritedAttributes[attrName]) {
-            this._flippedInheritedAttributes[attrName] = [];
+            if (!this._flippedInheritedAttributes[attrName]) {
+              this._flippedInheritedAttributes[attrName] = [];
+            }
+            this._flippedInheritedAttributes[attrName].push([selector, attrNewName]);
           }
-          this._flippedInheritedAttributes[attrName].push([selector, attrNewName]);
         }
       }
     }

toolkit/content/tests/chrome/test_custom_element_base.xul

@@ -17,6 +17,7 @@
   <simpleelement id="three" disabled="true" style="-moz-user-focus: normal;"/>
   <button id="four"/>
   <inherited-element-declarative foo="fuagra" empty-string=""></inherited-element-declarative>
+  <inherited-element-derived foo="fuagra"></inherited-element-derived>
   <inherited-element-shadowdom-declarative foo="fuagra" empty-string=""></inherited-element-shadowdom-declarative>
   <inherited-element-imperative foo="fuagra" empty-string=""></inherited-element-imperative>
   <inherited-element-beforedomloaded foo="fuagra" empty-string=""></inherited-element-beforedomloaded>
@@ -141,6 +142,13 @@
     let declarativeEl = document.querySelector("inherited-element-declarative");
     ok(declarativeEl, "declarative inheritance element exists");
 
+    class InheritsElementDerived extends InheritsElementDeclarative {
+      static get inheritedAttributes() {
+        return { label: "renamedfoo=foo" };
+      }
+    }
+    customElements.define("inherited-element-derived", InheritsElementDerived);
+
     class InheritsElementShadowDOMDeclarative extends MozXULElement {
       static get inheritedAttributes() {
         return {
@@ -233,6 +241,13 @@
       is(el.label.getAttribute("bardo"), "changed-from-host-2",
         "attribute inheritance: does apply when host attr has changed after being removed");
     }
+
+    let derivedEl = document.querySelector("inherited-element-derived");
+    ok(derivedEl, "derived inheritance element exists");
+    ok(!derivedEl.label.hasAttribute("foo"),
+       "attribute inheritance: base class attribute is not applied in derived class that overrides it");
+    ok(derivedEl.label.hasAttribute("renamedfoo"),
+       "attribute inheritance: attribute defined in derived class is present");
   }
 
   async function testCustomInterface() {