Skip to content

Commit 6780c22

Browse files
zcorpanzcorpan
authored
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
1 parent 8433bfc commit 6780c22

File tree

1 file changed

+121
-28
lines changed

1 file changed

+121
-28
lines changed

‎source

Lines changed: 121 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3505,7 +3505,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
35053505
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#line-box">line box</dfn></li>
35063506
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x24">out-of-flow</dfn></li>
35073507
<li><dfn data-x-href="https://drafts.csswg.org/css2/visuren.html#x25">in-flow</dfn></li>
3508-
<li><dfn data-x-href="https://drafts.csswg.org/css2/conform.html#replaced-element">replaced element</dfn></li>
35093508
<li><dfn data-x-href="https://drafts.csswg.org/css2/conform.html#intrinsic">intrinsic dimensions</dfn></li>
35103509
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#box-content-area">content area</dfn></li>
35113510
<li><dfn data-x-href="https://drafts.csswg.org/css2/box.html#x10">content box</dfn></li>
@@ -3593,6 +3592,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
35933592
<dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-padding-inline-end">'padding-inline-end'</dfn> properties</li>
35943593
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-border-block-start-width">'border-block-start-width'</dfn> property</li>
35953594
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-block-size">'block-size'</dfn> property</li>
3595+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-logical/#propdef-inline-size">'inline-size'</dfn> property</li>
35963596
</ul>
35973597

35983598
<p>The following terms and features are defined in the <cite>CSS Color</cite> specification:
@@ -3631,21 +3631,32 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
36313631
spec=CSSALIGN></p>
36323632

36333633
<ul class="brief">
3634-
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-content">'align-content'</dfn> property</li>
3635-
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-items">'align-items'</dfn> property</li>
3636-
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-justify-self">'justify-self'</dfn> property</li>
3637-
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-content">'justify-content'</dfn> property</li>
3638-
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-items">'justify-items'</dfn> property</li>
3634+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-content">'align-content'</dfn> property</li>
3635+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-align-items">'align-items'</dfn> property</li>
3636+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-justify-self">'justify-self'</dfn> property</li>
3637+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-content">'justify-content'</dfn> property</li>
3638+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-align/#propdef-propdef-justify-items">'justify-items'</dfn> property</li>
36393639
</ul>
36403640

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

3644+
<ul class="brief">
3645+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#outer-display-type">outer display type</dfn></li>
3646+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-level">block-level</dfn></li>
3647+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-container">block container</dfn></li>
3648+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#formatting-context">formatting context</dfn></li>
3649+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#block-formatting-context">block formatting context</dfn></li>
3650+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#inline-formatting-context">inline formatting context</dfn></li>
3651+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#absolutely-positioned">absolutely positioned</dfn></li>
3652+
<li><dfn data-x-href="https://drafts.csswg.org/css-display/#replaced-element">replaced element</dfn></li>
3653+
</ul>
3654+
36453655
<p>The following features are defined in the <cite>CSS Flexible Box Layout</cite>
36463656
specification: <ref spec=CSSFLEXBOX></p>
36473657

36483658
<ul class="brief">
3659+
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-align-self">'align-self'</dfn> property</li>
36493660
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-direction">'flex-direction'</dfn> property</li>
36503661
<li>The <dfn data-x-href="https://drafts.csswg.org/css-flexbox/#propdef-flex-wrap">'flex-wrap'</dfn> property</li>
36513662
</ul>
@@ -3674,6 +3685,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
36743685
<li>The <dfn data-x-href="https://drafts.csswg.org/css-grid/#propdef-grid-template-rows">'grid-template-rows'</dfn> property</li>
36753686
</ul>
36763687

3688+
<p>The following terms and features are defined in the <cite>CSS Intrinsic &amp; Extrinsic Sizing Module</cite> specification:
3689+
<ref spec=CSSSIZING></p>
3690+
3691+
<ul class="brief">
3692+
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing/#fit-content-inline-size">fit-content inline size</dfn></li>
3693+
</ul>
3694+
36773695
<p>The <dfn
36783696
data-x-href="https://drafts.csswg.org/css-lists/#propdef-list-style-type">'list-style-type'</dfn>
36793697
property is defined in the <cite>CSS Lists and Counters</cite> specification. <ref
@@ -113188,8 +113206,12 @@ input, select, option, optgroup, button, textarea {
113188113206
text-indent: initial;
113189113207
}
113190113208

113209+
input:matches([type=reset i], [type=button i], [type=submit i], [type=color i]), button {
113210+
display: inline-block;
113211+
}
113212+
113191113213
input:matches([type=radio i], [type=checkbox i], [type=reset i], [type=button i],
113192-
[type=submit i], [type=search i]), select, button {
113214+
[type=submit i], [type=color i], [type=search i]), select, button {
113193113215
box-sizing: border-box;
113194113216
}
113195113217

@@ -113296,14 +113318,14 @@ legend[align=right i] {
113296113318
'display: contents'), is expected to act as follows:</p>
113297113319

113298113320
<ul>
113299-
<li><p>The element is expected to establish a new block formatting context.</p></li>
113321+
<li><p>The element is expected to establish a new <span>block formatting context</span>.</p></li>
113300113322

113301113323
<li>
113302113324
<p>The <span>'display'</span> property is expected to act as follows:</p>
113303113325

113304113326
<ul>
113305-
<li><p>If the computed value of <span>'display'</span> is inline-level, then behave as
113306-
'inline-block'.</p></li>
113327+
<li><p>If the computed value of <span>'display'</span> is a value such that the <span>outer
113328+
display type</span> is 'inline', then behave as 'inline-block'.</p></li>
113307113329

113308113330
<li><p>Otherwise, behave as 'flow-root'.</p></li>
113309113331
</ul>
@@ -113381,8 +113403,9 @@ legend[align=right i] {
113381113403
follows:</p>
113382113404

113383113405
<ul>
113384-
<li><p>The element is expected to establish a new formatting context for its contents. The type
113385-
of this formatting context is determined by its <span>'display'</span> value, as usual.</p></li>
113406+
<li><p>The element is expected to establish a new <span>formatting context</span> for its
113407+
contents. The type of this <span>formatting context</span> is determined by its
113408+
<span>'display'</span> value, as usual.</p></li>
113386113409

113387113410
<li>
113388113411
<p>The <span>'display'</span> property is expected to behave as if its computed value was
@@ -113391,7 +113414,8 @@ legend[align=right i] {
113391113414
<p class="note">This does not change the computed value.</p>
113392113415
</li>
113393113416

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

113396113420
<li><p>The element is expected to be positioned in the inline direction as is normal for
113397113421
blocks (e.g., taking into account margins and the <span>'justify-self'</span>
@@ -113859,10 +113883,68 @@ input[type=image i][align=bottom i], object[align=bottom i] {
113859113883

113860113884
<div w-nodev>
113861113885

113886+
<h4>Button layout</h4>
113887+
113888+
<p><dfn>Button layout</dfn> is as follows:</p>
113889+
113890+
<ul>
113891+
<li>
113892+
<p>The <span>'display'</span> property is expected to act as follows:</p>
113893+
113894+
<ul>
113895+
<li><p>If the computed value of <span>'display'</span> is 'inline-grid', 'grid',
113896+
'inline-flex', or 'flex', then behave as the computed value.</p></li>
113897+
113898+
<li><p>Otherwise, if the computed value of <span>'display'</span> is a value such that the
113899+
<span>outer display type</span> is 'inline', then behave as 'inline-block'.</p></li>
113900+
113901+
<li><p>Otherwise, behave as 'flow-root'.</p></li>
113902+
</ul>
113903+
</li>
113904+
113905+
<li><p>The element is expected to establish a new <span>formatting context</span> for its
113906+
contents. The type of this formatting context is determined by its <span>'display'</span> value,
113907+
as usual.</p></li>
113908+
113909+
<li><p>If the element is <span>absolutely positioned</span>, then for the purpose of the
113910+
<a href="https://drafts.csswg.org/css2/visuren.html">CSS visual formatting model</a>, act as if
113911+
the element is a <span>replaced element</span>. <ref spec=CSS></p></li>
113912+
113913+
<li><p>If the <span>computed value</span> of <span>'inline-size'</span> is 'auto', then the
113914+
<span>used value</span> is the <span>fit-content inline size</span>.</p></li>
113915+
113916+
<li><p>For the purpose of the 'normal' keyword of the <span>'align-self'</span> property, act
113917+
as if the element is a replaced element.</p></li>
113918+
113919+
<li>
113920+
<p>If the element is an <code>input</code> element, or if it is a <code>button</code> element
113921+
and its computed value for <span>'display'</span> is not 'inline-grid', 'grid', 'inline-flex',
113922+
or 'flex', then the element's box has a child <dfn>anonymous button content box</dfn> with the
113923+
following behaviors:</p>
113924+
113925+
<ul>
113926+
<li><p>The box is a <span>block-level</span> <span>block container</span> that establishes a
113927+
new <span>block formatting context</span> (i.e., <span>'display'</span> is
113928+
'flow-root').</p></li>
113929+
113930+
<li><p>If the box does not overflow in the horizontal axis, then it is centered
113931+
horizontally.</p></li>
113932+
113933+
<li><p>If the box does not overflow in the vertical axis, then it is centered
113934+
vertically.</p></li>
113935+
</ul>
113936+
113937+
<p>Otherwise, there is no <span>anonymous button content box</span>.</p>
113938+
</li>
113939+
</ul>
113940+
113941+
113862113942
<h4>The <code>button</code> element</h4>
113863113943

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

113867113949
</div>
113868113950

@@ -114011,10 +114093,14 @@ details[open] > summary {
114011114093
well</h4>
114012114094

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

114019114105
<p>Predefined suggested values (provided by the <code data-x="attr-input-list">list</code>
114020114106
attribute) are expected to be shown in the color picker interface, not on the color well
@@ -114043,11 +114129,14 @@ details[open] > summary {
114043114129
<h4>The <code>input</code> element as a file upload control</h4>
114044114130

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

114052114141
</div>
114053114142

@@ -114059,11 +114148,12 @@ details[open] > summary {
114059114148
<p>An <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is in
114060114149
the <span data-x="attr-input-type-submit">Submit Button</span>, <span
114061114150
data-x="attr-input-type-reset">Reset Button</span>, or <span
114062-
data-x="attr-input-type-button">Button</span> state is expected to render as an
114063-
<span>'inline-block'</span> box depicting a button, about one line high, containing the contents
114064-
of the element's <code data-x="attr-input-value">value</code> attribute, if any, or text derived
114065-
from the element's <code data-x="attr-input-type">type</code> attribute in a user-agent-defined
114066-
(and probably locale-specific) fashion, if not.</p>
114151+
data-x="attr-input-type-button">Button</span> state, when it generates a box (i.e., is not
114152+
'display: none' or 'display: contents'), is expected to depict a button and use <span>button
114153+
layout</span> and the contents of the <span>anonymous button content box</span> are expected to
114154+
be the text of the element's <code data-x="attr-input-value">value</code> attribute, if any, or
114155+
text derived from the element's <code data-x="attr-input-type">type</code> attribute in a
114156+
user-agent-defined (and probably locale-specific) fashion, if not.</p>
114067114157

114068114158
</div>
114069114159

@@ -121864,6 +121954,9 @@ INSERT INTERFACES HERE
121864121954
<dt id="refsCSSRUBY">[CSSRUBY]</dt>
121865121955
<dd><cite><a href="https://drafts.csswg.org/css-ruby/">CSS3 Ruby Module</a></cite>, R. Ishida. W3C.</dd>
121866121956

121957+
<dt id="refsCSSSIZING">[CSSSIZING]</dt>
121958+
<dd><cite><a href="https://drafts.csswg.org/css-sizing/">CSS Intrinsic &amp; Extrinsic Sizing Module</a></cite>, T. Atkins, E. Etemad. W3C.</dd>
121959+
121867121960
<dt id="refsCSSTRANSITIONS">[CSSTRANSITIONS]</dt>
121868121961
<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>
121869121962

0 commit comments

Comments
 (0)