Make all input elements display: inline-block by default

Part of whatwg#4082

Force inner display type to flow-root and ignore overflow

drop-down select is display: inline-block

Require text inputs to be scroll containers

And only support scrolling in the inline axis.

This should address the third bullet point in
whatwg#4082 (comment)

source

@@ -3467,6 +3467,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
 
     <ul class="brief">
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#outer-display-type">outer display type</dfn></li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-display/#inner-display-type">inner display type</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-level">block-level</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-container">block container</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-display/#formatting-context">formatting context</dfn></li>
@@ -3556,6 +3557,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
     <ul class="brief">
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-overflow/#propdef-overflow">'overflow'</dfn> property and its <dfn data-x-href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden">'hidden'</dfn> value</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-overflow/#propdef-text-overflow">'text-overflow'</dfn> property</li>
+      <li>The term <dfn data-x-href="https://drafts.csswg.org/css-overflow/#scroll-container">scroll container</dfn>
     </ul>
 
     <p>The following terms and features are defined in <cite>CSS Positioned Layout</cite>: <ref
@@ -3610,6 +3612,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#direction">'direction'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#unicode-bidi">'unicode-bidi'</dfn> property</li>
       <li>The <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-flow-direction">block flow direction</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-axis">block axis</dfn>,
+              <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-axis">inline axis</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-size">block size</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#inline-size">inline size</dfn>,
               <dfn data-x-href="https://drafts.csswg.org/css-writing-modes/#block-start">block-start</dfn>,
@@ -116943,7 +116947,7 @@ input:is([type=reset i], [type=button i], [type=submit i]), button {
   text-align: center;
 }
 
-input:is([type=reset i], [type=button i], [type=submit i], [type=color i]), button {
+input, button {
   display: inline-block;
 }
 
@@ -116963,6 +116967,19 @@ input:not([type=image i]), textarea { box-sizing: border-box; }</code></pre>
   <p>Each kind of form control is also described in the <a href="#widgets">Widgets</a> section,
   which describes the look and feel of the control.</p>
 
+  <p>For <code>input</code> elements where the <code data-x="attr-input-type">type</code> attribute
+  is not in the <span data-x="attr-input-type-hidden">Hidden</span> state or the <span
+  data-x="attr-input-type-image">Image Button</span> state, and that are <span>being
+  rendered</span>, are expected to act as follows:</p>
+
+  <ul>
+   <li><p>The <span>inner display type</span> is always 'flow-root'.</p></li>
+
+   <li><p>The <span>'overflow'</span> property is ignored, and always behaves as 'visible' for the
+   purpose of interaction with other CSS features (in particular, the <span>'vertical-align'</span>
+   property), but still clips any overflow at the border edge, and no scrolling mechanism is
+   displayed.</p></li>
+  </ul>
 
 
   <h4>The <code>hr</code> element</h4>
@@ -117642,7 +117659,8 @@ input[type=image i][align=bottom i], object[align=bottom i] {
 
   <ul>
    <li>
-    <p>The <span>'display'</span> property is expected to act as follows:</p>
+    <p>If the element is a <code>button</code> element, then the <span>'display'</span> property is
+    expected to act as follows:</p>
 
     <ul>
      <li><p>If the computed value of <span>'display'</span> is 'inline-grid', 'grid',
@@ -117788,6 +117806,10 @@ details[open] > summary {
   in pixels, and <var>max</var> is the maximum character width of that same font, also in
   pixels. (The element's <span>'letter-spacing'</span> property does not affect the result.)</p>
 
+  <p>These text controls are expected to be <span data-x="scroll container">scroll
+  containers</span> and support scrolling in the <span>inline axis</span>, but not the <span>block
+  axis</span>.</p>
+
   </div>
 
 
@@ -118158,8 +118180,8 @@ marquee {
 
   <p>A <code>select</code> element whose <code data-x="attr-select-multiple">multiple</code>
   attribute is absent, and whose <span data-x="concept-select-size">display size</span> is 1, is
-  expected to render as a one-line <span>drop-down box</span> whose width is the <span>width of the
-  <code>select</code>'s labels</span>.</p>
+  expected to render as an <span>'inline-block'</span> one-line <span>drop-down box</span> whose
+  width is the <span>width of the <code>select</code>'s labels</span>.</p>
 
   <p>In either case (<span>list box</span> or <span>drop-down box</span>), the element's items are
   expected to be the element's <span data-x="concept-select-option-list">list of options</span>,