Skip to content
Permalink
Browse files

Define button layout

This specifies the layout model of buttons (the button element,
the input element in the Button, Reset, Submit states, and the
button part of input in the File Upload state).

Fixes #1024. Fixes #2948. Fixes #4081. Part of #4082.

Tests: web-platform-tests/wpt#14824

Bugs:
https://bugs.chromium.org/p/chromium/issues/detail?id=962936
https://bugs.webkit.org/show_bug.cgi?id=197879
https://bugzilla.mozilla.org/show_bug.cgi?id=1539469
  • Loading branch information...
zcorpan committed May 14, 2019
1 parent 8433bfc commit 6780c22fccb41f5d84aa079d2644c79b1acdc5eb
Showing with 121 additions and 28 deletions.
  1. +121 −28 source
149 source
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#line-box">line box</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x24">out-of-flow</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x25">in-flow</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/conform.html#replaced-element">replaced element</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/conform.html#intrinsic">intrinsic dimensions</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#box-content-area">content area</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#x10">content box</dfn></li>
<dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-inline-end">'padding-inline-end'</dfn> properties</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-width">'border-block-start-width'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-block-size">'block-size'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inline-size">'inline-size'</dfn> property</li>
</ul>

<p>The following terms and features are defined in the <cite>CSS Color</cite> specification:
spec=CSSALIGN></p>

<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-content">'align-content'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-items">'align-items'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-justify-self">'justify-self'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-content">'justify-content'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-items">'justify-items'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-content">'align-content'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-items">'align-items'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-justify-self">'justify-self'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-content">'justify-content'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-items">'justify-items'</dfn> property</li>
</ul>

<p>The term <dfn
data-x-href="https://drafts.csswg.org/css-display/#block-level">block-level</dfn> is defined in
<p>The following terms and features are defined in theis defined in
the <cite>CSS Display</cite> specification. <ref spec=CSSDISPLAY></p>

<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/#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>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-formatting-context">block formatting context</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#inline-formatting-context">inline formatting context</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#absolutely-positioned">absolutely positioned</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#replaced-element">replaced element</dfn></li>
</ul>

<p>The following features are defined in the <cite>CSS Flexible Box Layout</cite>
specification: <ref spec=CSSFLEXBOX></p>

<ul class="brief">
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-align-self">'align-self'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">'flex-direction'</dfn> property</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">'flex-wrap'</dfn> property</li>
</ul>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-grid/#propdef-grid-template-rows">'grid-template-rows'</dfn> property</li>
</ul>

<p>The following terms and features are defined in the <cite>CSS Intrinsic &amp; Extrinsic Sizing Module</cite> specification:
<ref spec=CSSSIZING></p>

<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing/#fit-content-inline-size">fit-content inline size</dfn></li>
</ul>

<p>The <dfn
data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn>
property is defined in the <cite>CSS Lists and Counters</cite> specification. <ref
text-indent: initial;
}

input:matches([type=reset i], [type=button i], [type=submit i], [type=color i]), button {
display: inline-block;
}

input:matches([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
[type=submit i], [type=search i]), select, button {
[type=submit i], [type=color i], [type=search i]), select, button {
box-sizing: border-box;
}

'display: contents'), is expected to act as follows:</p>

<ul>
<li><p>The element is expected to establish a new block formatting context.</p></li>
<li><p>The element is expected to establish a new <span>block formatting context</span>.</p></li>

<li>
<p>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-level, then behave as
'inline-block'.</p></li>
<li><p>If the computed value of <span>'display'</span> is a value such that the <span>outer
display type</span> is 'inline', then behave as 'inline-block'.</p></li>

<li><p>Otherwise, behave as 'flow-root'.</p></li>
</ul>
follows:</p>

<ul>
<li><p>The element is expected to establish a new formatting context for its contents. The type
of this formatting context is determined by its <span>'display'</span> value, as usual.</p></li>
<li><p>The element is expected to establish a new <span>formatting context</span> for its
contents. The type of this <span>formatting context</span> is determined by its
<span>'display'</span> value, as usual.</p></li>

<li>
<p>The <span>'display'</span> property is expected to behave as if its computed value was
<p class="note">This does not change the computed value.</p>
</li>

<li><p>In the absence of an explicit inline size, the box should shrink-wrap.</p></li>
<li><p>If the <span>computed value</span> of <span>'inline-size'</span> is 'auto', then the
<span>used value</span> is the <span>fit-content inline size</span>.</p></li>

<li><p>The element is expected to be positioned in the inline direction as is normal for
blocks (e.g., taking into account margins and the <span>'justify-self'</span>

<div w-nodev>

<h4>Button layout</h4>

<p><dfn>Button layout</dfn> is as follows:</p>

<ul>
<li>
<p>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',
'inline-flex', or 'flex', then behave as the computed value.</p></li>

<li><p>Otherwise, if the computed value of <span>'display'</span> is a value such that the
<span>outer display type</span> is 'inline', then behave as 'inline-block'.</p></li>

<li><p>Otherwise, behave as 'flow-root'.</p></li>
</ul>
</li>

<li><p>The element is expected to establish a new <span>formatting context</span> for its
contents. The type of this formatting context is determined by its <span>'display'</span> value,
as usual.</p></li>

<li><p>If the element is <span>absolutely positioned</span>, then for the purpose of the
<a href="https://drafts.csswg.org/css2/visuren.html">CSS visual formatting model</a>, act as if
the element is a <span>replaced element</span>. <ref spec=CSS></p></li>

<li><p>If the <span>computed value</span> of <span>'inline-size'</span> is 'auto', then the
<span>used value</span> is the <span>fit-content inline size</span>.</p></li>

<li><p>For the purpose of the 'normal' keyword of the <span>'align-self'</span> property, act
as if the element is a replaced element.</p></li>

<li>
<p>If the element is an <code>input</code> element, or if it is a <code>button</code> element
and its computed value for <span>'display'</span> is not 'inline-grid', 'grid', 'inline-flex',
or 'flex', then the element's box has a child <dfn>anonymous button content box</dfn> with the
following behaviors:</p>

<ul>
<li><p>The box is a <span>block-level</span> <span>block container</span> that establishes a
new <span>block formatting context</span> (i.e., <span>'display'</span> is
'flow-root').</p></li>

<li><p>If the box does not overflow in the horizontal axis, then it is centered
horizontally.</p></li>

<li><p>If the box does not overflow in the vertical axis, then it is centered
vertically.</p></li>
</ul>

<p>Otherwise, there is no <span>anonymous button content box</span>.</p>
</li>
</ul>


<h4>The <code>button</code> element</h4>

<p>The <code>button</code> element expected to render as an <span>'inline-block'</span> box
depicting a button whose contents are the contents of the element.</p>
<p>The <code>button</code> element, when it generates a box (i.e., is not 'display: none' or
'display: contents') is expected to depict a button and to use <span>button layout</span> whose
<span>anonymous button content box</span>'s contents (if there is an <span>anonymous button
content box</span>) are the child boxes the element's box would otherwise have.</p>

</div>

well</h4>

<p>An <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is in
the <span data-x="attr-input-type-color">Color</span> state is expected to render as an
<span>'inline-block'</span> box depicting a color well, which, when activated, provides the user
with a color picker (e.g. a color wheel or color palette) from which the color can be
changed.</p>
the <span data-x="attr-input-type-color">Color</span> state is expected to depict a color well,
which, when activated, provides the user with a color picker (e.g. a color wheel or color
palette) from which the color can be changed. The element, when it generates a box (i.e.,
is not 'display: none' or 'display: contents'), is expected to use <span>button layout</span>,
that has no child boxes of the <span>anonymous button content box</span>. The <span>anonymous
button content box</span> is expected to have a <span data-x="presentational hints">presentational
hint</span> setting the <span>'background-color'</span> property to the element's <span
data-x="concept-fe-value">value</span>.</p>

<p>Predefined suggested values (provided by the <code data-x="attr-input-list">list</code>
attribute) are expected to be shown in the color picker interface, not on the color well
<h4>The <code>input</code> element as a file upload control</h4>

<p>An <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is in
the <span data-x="attr-input-type-file">File Upload</span> state is expected to render as an
the <span data-x="attr-input-type-file">File Upload</span> state, when it generates a box (i.e.,
is not 'display: none' or 'display: contents'), is expected to render as an
<span>'inline-block'</span> box containing a span of text giving the file name(s) of the <span
data-x="concept-input-type-file-selected">selected files</span>, if any, followed by a button
that, when activated, provides the user with a file picker from which the selection can be
changed.</p>
changed. The button is expected to use <span>button layout</span> and the contents of the
<span>anonymous button content box</span> are expected to be user-agent-defined (and possibly
locale-specific) text, for example "Choose file".</p>

</div>

<p>An <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is in
the <span data-x="attr-input-type-submit">Submit Button</span>, <span
data-x="attr-input-type-reset">Reset Button</span>, or <span
data-x="attr-input-type-button">Button</span> state is expected to render as an
<span>'inline-block'</span> box depicting a button, about one line high, containing the contents
of the element's <code data-x="attr-input-value">value</code> attribute, if any, or text derived
from the element's <code data-x="attr-input-type">type</code> attribute in a user-agent-defined
(and probably locale-specific) fashion, if not.</p>
data-x="attr-input-type-button">Button</span> state, when it generates a box (i.e., is not
'display: none' or 'display: contents'), is expected to depict a button and use <span>button
layout</span> and the contents of the <span>anonymous button content box</span> are expected to
be the text of the element's <code data-x="attr-input-value">value</code> attribute, if any, or
text derived from the element's <code data-x="attr-input-type">type</code> attribute in a
user-agent-defined (and probably locale-specific) fashion, if not.</p>

</div>

<dt id="refsCSSRUBY">[CSSRUBY]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-ruby/">CSS3 Ruby Module</a></cite>, R. Ishida. W3C.</dd>

<dt id="refsCSSSIZING">[CSSSIZING]</dt>
<dd><cite><a href="https://drafts.csswg.org/css-sizing/">CSS Intrinsic &amp; Extrinsic Sizing Module</a></cite>, T. Atkins, E. Etemad. W3C.</dd>

<dt id="refsCSSTRANSITIONS">[CSSTRANSITIONS]</dt>
<dd>(Non-normative) <cite><a href="https://drafts.csswg.org/css-transitions/">CSS Transitions</a></cite>, D. Jackson, D. Hyatt, C. Marrin, L. Baron. W3C.</dd>

0 comments on commit 6780c22

Please sign in to comment.
You can’t perform that action at this time.