Bug 1539469 - Make all input elements display: inline-block, for compat with other UAs. r=mats

See https://github.com/whatwg/html/issues/4082 for the data and some comments
from Boris and David.

I didn't look into fixing the font-inflation reftests, see bug 1540176 for that.

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

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

accessible/tests/browser/e10s/browser_caching_attributes.js

@@ -19,7 +19,7 @@ const defaultAttributes = {
   "text-indent": "0px",
   "id": "textbox",
   "tag": "input",
-  "display": "inline"
+  "display": "inline-block"
 };
 
 /**

browser/components/aboutlogins/tests/chrome/test_login_item.html

@@ -161,7 +161,7 @@ add_task(async function test_set_login_empty() {
   let savedHostname = gLoginItem.shadowRoot.querySelector(".hostname-saved-value");
   is(getComputedStyle(savedHostname).display, "none", ".hostname-saved-value should be hidden for new logins");
   let hostnameInput = gLoginItem.shadowRoot.querySelector("input[name='hostname']");
-  is(getComputedStyle(hostnameInput).display, "inline", "input[name='hostname'] should be visible for new logins");
+  is(getComputedStyle(hostnameInput).display, "inline-block", "input[name='hostname'] should be visible for new logins");
   is(gLoginItem.shadowRoot.querySelector("modal-input[name='username']").value, "", "username should be empty");
   is(gLoginItem.shadowRoot.querySelector("modal-input[name='password']").value, "", "password should be empty");
   is(gLoginItem.shadowRoot.querySelector(".time-created").textContent, "", "time-created should be blank when undefined");

devtools/server/tests/browser/browser_accessibility_node.js

@@ -106,7 +106,7 @@ add_task(async function() {
       "margin-top": "0px",
       "margin-bottom": "0px",
       "margin-right": "0px",
-      "display": "inline",
+      "display": "inline-block",
       "explicit-name": "true",
     }});
 

dom/html/test/forms/test_input_attributes_reflection.html

@@ -33,6 +33,7 @@ function testWidthHeight(attr) {
 
   element = document.createElement('input');
   element.type = 'image';
+  element.style.display = "inline";
   document.getElementById('content').appendChild(element);
   isnot(element[attr], 0, attr + ' represents the dimension of the element if type=image');
 

layout/reftests/font-inflation/reftest.list

@@ -27,11 +27,11 @@ test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceE
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == decoration-1.html decoration-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == bullet-1.html bullet-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-height.html input-text-1-height-ref.html
-test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-1-noheight.html input-text-1-noheight-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) fails == input-text-1-noheight.html input-text-1-noheight-ref.html # bug 1540176
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-height.html input-text-2-height-ref.html
-test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-2-noheight.html input-text-2-noheight-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) fails == input-text-2-noheight.html input-text-2-noheight-ref.html # bug 1540176
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-height.html input-text-3-height-ref.html
-test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == input-text-3-noheight.html input-text-3-noheight-ref.html
+test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) fails == input-text-3-noheight.html input-text-3-noheight-ref.html # bug 1540176
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-1.html textarea-1-ref.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-2.html textarea-2-ref.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,0) == textarea-3.html textarea-3-ref.html
@@ -95,8 +95,8 @@ fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pr
 fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-textarea-contents-at-2.html threshold-textarea-contents-at-2-ref.html
 fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-1.html threshold-input-text-contents-under-1.html
 fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-under-2.html threshold-input-text-contents-under-2.html
-fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-1.html threshold-input-text-contents-at-1-ref.html
-fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-input-text-contents-at-2.html threshold-input-text-contents-at-2-ref.html
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) fails == threshold-input-text-contents-at-1.html threshold-input-text-contents-at-1-ref.html # bug 1540176
+fuzzy-if(gtkWidget,0-1,0-10) test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) fails == threshold-input-text-contents-at-2.html threshold-input-text-contents-at-2-ref.html # bug 1540176
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-1.html threshold-select-listbox-contents-under-1.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-under-2.html threshold-select-listbox-contents-under-2.html
 test-pref(font.size.inflation.emPerLine,15) test-pref(font.size.inflation.forceEnabled,true) test-pref(font.size.inflation.lineThreshold,100) == threshold-select-listbox-contents-at-1.html threshold-select-listbox-contents-at-1-ref.html

layout/style/res/forms.css

@@ -86,6 +86,7 @@ label {
    need to match textfield background/border values here */
 
 input {
+  display: inline-block;
   -moz-appearance: textfield;
   /* The sum of border and padding on block-start and block-end
      must be the same here, for buttons, and for <select> (including its
@@ -473,7 +474,6 @@ input[type="image"]:-moz-focusring {
 
 /* file selector */
 input[type="file"] {
-  display: inline-block;
   white-space: nowrap !important;
   overflow: hidden !important;
   overflow-clip-box: padding-box;
@@ -525,7 +525,6 @@ input[type="color"]::-moz-color-swatch {
 
 /* radio buttons */
 input[type="radio"] {
-  display: inline-block;
   -moz-appearance: radio;
   margin-block-start: 3px;
   margin-block-end: 0px;
@@ -535,7 +534,6 @@ input[type="radio"] {
 
 /* check boxes */
 input[type="checkbox"] {
-  display: inline-block;
   -moz-appearance: checkbox;
   margin-block-start: 3px;
   margin-block-end: 3px;
@@ -882,7 +880,6 @@ meter {
 
 input[type=range] {
   -moz-appearance: range;
-  display: inline-block;
   margin: 2px;
   /* Override some rules that apply on all input types: */
   cursor: default;

testing/web-platform/meta/html/semantics/forms/the-input-element/input-height.html.ini

@@ -1,4 +0,0 @@
-[input-height.html]
-  [Forms]
-    expected: FAIL
-

testing/web-platform/meta/html/semantics/forms/the-input-element/input-width.html.ini

@@ -1,5 +0,0 @@
-[input-width.html]
-  max-asserts: 3
-  [Forms]
-    expected: FAIL
-