Bug 1578565 - SVG and MathML elements don't follow the CSS layout model. r=pbro

We could be more explicit and also handle svg on the height / width stuff
(width and height don't apply to all SVG elements).

But this avoids the false positive for now.

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

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

devtools/server/actors/utils/inactive-property-helper.js

@@ -455,10 +455,22 @@ class InactivePropertyHelper {
   }
 
   /**
-   * Check if the current node is a non-replaced inline box.
+   * Returns whether this element uses CSS layout.
+   */
+  get hasCssLayout() {
+    return !this.isSvg && !this.isMathMl;
+  }
+
+  /**
+   * Check if the current node is a non-replaced CSS inline box.
    */
   get nonReplacedInlineBox() {
-    return this.nonReplaced && this.style && this.style.display === "inline";
+    return (
+      this.hasCssLayout &&
+      this.nonReplaced &&
+      this.style &&
+      this.style.display === "inline"
+    );
   }
 
   /**
@@ -523,6 +535,20 @@ class InactivePropertyHelper {
     return this.node.nodeName ? this.node.nodeName.toLowerCase() : null;
   }
 
+  /**
+   * Return whether the node is a MathML element.
+   */
+  get isMathMl() {
+    return this.node.namespaceURI === "http://www.w3.org/1998/Math/MathML";
+  }
+
+  /**
+   * Return whether the node is an SVG element.
+   */
+  get isSvg() {
+    return this.node.namespaceURI === "http://www.w3.org/2000/svg";
+  }
+
   /**
    * Check if the current node's nodeName matches a value inside the value array.
    *

devtools/server/tests/mochitest/inactive-property-helper/max-min-width-height.js

@@ -278,4 +278,18 @@ export default [
     rules: ["div { max-height: 500px; }"],
     isActive: true,
   },
+  {
+    info: "height is active on an svg <rect> element.",
+    property: "height",
+    createTestElement: main => {
+      main.innerHTML = `
+        <svg width=100 height=100>
+          <rect width=100 fill=green></rect>
+        </svg>
+      `;
+      return main.querySelector("rect");
+    },
+    rules: ["rect { height: 100px; }"],
+    isActive: true,
+  },
 ];