Bug 1565652 - Treat input and select unconditionally as replaced elements; r=miker

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

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

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

@@ -472,9 +472,18 @@ class InactivePropertyHelper {
         "embed",
         "hr",
         "iframe",
+        // Inputs are generally replaced elements. E.g. checkboxes and radios are replaced
+        // unless they have `-moz-appearance: none`. However unconditionally treating them
+        // as replaced is enough for our purpose here, and avoids extra complexity that
+        // will likely not be necessary in most cases.
+        "input",
         "math",
         "object",
         "picture",
+        // Select is a replaced element if it has `size<=1` or no size specified, but
+        // unconditionally treating it as replaced is enough for our purpose here, and
+        // avoids extra complexity that will likely not be necessary in most cases.
+        "select",
         "svg",
         "video",
       ])

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

@@ -96,6 +96,20 @@ export default [
     rules: ["img { width: 500px; }"],
     isActive: true,
   },
+  {
+    info: "width is active on an inline input element",
+    property: "width",
+    tagName: "input",
+    rules: ["input { display: inline; width: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "width is active on an inline select element",
+    property: "width",
+    tagName: "select",
+    rules: ["select { display: inline; width: 500px; }"],
+    isActive: true,
+  },
   {
     info: "min-width is active on a replaced inline element",
     property: "min-width",
@@ -201,6 +215,20 @@ export default [
     rules: ["img { height: 500px; }"],
     isActive: true,
   },
+  {
+    info: "height is active on an inline input element",
+    property: "height",
+    tagName: "input",
+    rules: ["input { display: inline; height: 500px; }"],
+    isActive: true,
+  },
+  {
+    info: "height is active on an inline select element",
+    property: "height",
+    tagName: "select",
+    rules: ["select { display: inline; height: 500px; }"],
+    isActive: true,
+  },
   {
     info: "min-height is active on a replaced inline element",
     property: "min-height",