Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make all input elements display: inline-block by default #4840

Merged
merged 1 commit into from
Sep 16, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 26 additions & 4 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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>,
Expand Down Expand Up @@ -116933,7 +116937,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;
}

Expand All @@ -116953,6 +116957,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>
Expand Down Expand Up @@ -117632,7 +117649,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',
Expand Down Expand Up @@ -117778,6 +117796,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>


Expand Down Expand Up @@ -118148,8 +118170,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>,
Expand Down