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.

Sign up for GitHub

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

Jump to bottom

Define button layout #4143

Merged
merged 12 commits into from
May 14, 2019
Merged

Define button layout #4143

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
86d1be8
Define button layout
zcorpan Oct 29, 2018
502b678
Exclude button layout rule for display:none/contents
zcorpan Oct 30, 2018
c1e1f6f
Allow opting out of button layout with appearance:none; display:inline
zcorpan Oct 30, 2018
63dc22e
Link to issue about web compat of display: inline
zcorpan Jan 7, 2019
b174eaf
Make input type=color inline-block again
zcorpan Jan 10, 2019
107faee
Make input type=color have box-sizing: border-box
zcorpan Jan 10, 2019
88869d5
Remove a duplicate requirement
zcorpan Jan 11, 2019
685252a
The anonymous button content box shouldn't shrink-wrap
zcorpan Jan 16, 2019
b8cfad9
Remove display: inline; appearance: none; proposal
zcorpan Jan 30, 2019
3c76399
Address domenic's feedback
zcorpan May 13, 2019
ae59e6d
Add 'when it generates a box' to color wells
zcorpan May 13, 2019
2c45e0d
Clarify that computed value is checked
zcorpan May 13, 2019
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
149 changes: 121 additions & 28 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3491,7 +3491,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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>
Expand Down Expand Up @@ -3579,6 +3578,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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:
Expand Down Expand Up @@ -3617,21 +3617,32 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redundant, ungrammatical fragment: "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>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shouldn't the definition from the CSS Box Alignment be referenced instead? The hystorical Flexbox definition doesn't seem to have the normal value at all...

<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>
Expand Down Expand Up @@ -3660,6 +3671,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<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
Expand Down Expand Up @@ -112397,8 +112415,12 @@ input, select, option, optgroup, button, textarea {
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;
}

Expand Down Expand Up @@ -112505,14 +112527,14 @@ legend[align=right i] {
'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>
Expand Down Expand Up @@ -112590,8 +112612,9 @@ legend[align=right i] {
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
Expand All @@ -112600,7 +112623,8 @@ legend[align=right i] {
<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>
Expand Down Expand Up @@ -113070,10 +113094,68 @@ input[type=image i][align=bottom i], object[align=bottom i] {

<div w-nodev>

<h4>Button layout</h4>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we xref "formatting context" to something?


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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "absolutely positioned" formally defined anywhere we could link to? (If not, oh well.)

<ul>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xref replaced element

<li>
<p>The <span>'display'</span> property is expected to act as follows:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does this mean?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, maybe something like

"If 'inline-size' is 'auto', then the used value is the fit-content inline size"


<ul>
<li><p>If the computed value of <span>'display'</span> is 'inline-grid', 'grid',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

xref replaced element

'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>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is "set to" sufficiently precise? (It may be, I'm not a CSS expert.) It seems different than other parts of the spec which talk about computed values or presentation hints or similar.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't really know if it's precise, and I don't know of anything to link to. It's different, but this is an anonymous box -- we get to say what it is more directly, and the property is not directly observable. But I've changed this to say what the effect is on the box, instead.

<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
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The "expected to depict a button" is too general. You can make it depict various things using -webkit-appearance in current crop of UAs... although perhaps we should restrict some of that. Depends on a spec for "which elements should each of the -webkit-appearance values apply to".

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I would need to revisit this when the appearance spec can be referenced. For now "depict a button" is no change from the previous text.

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>

zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<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>

Expand Down Expand Up @@ -113219,10 +113301,14 @@ details[open] > summary {
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
Expand Down Expand Up @@ -113251,11 +113337,14 @@ details[open] > summary {
<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>

Expand All @@ -113267,11 +113356,12 @@ details[open] > summary {
<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>

Expand Down Expand Up @@ -121059,6 +121149,9 @@ INSERT INTERFACES HERE
<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>

Expand Down