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

@@ -3469,6 +3469,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>
@@ -3558,6 +3559,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
@@ -3612,6 +3614,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>,
@@ -116948,7 +116952,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;
 }
 
@@ -116968,6 +116972,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>
@@ -117647,7 +117664,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',
@@ -117793,6 +117811,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>
 
 
@@ -118163,8 +118185,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>,