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 3 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
102 changes: 89 additions & 13 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3632,6 +3632,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
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>
Expand Down Expand Up @@ -112397,6 +112398,10 @@ input, select, option, optgroup, button, textarea {
text-indent: initial;
}

input:matches([type=reset i], [type=button i], [type=submit 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 {
box-sizing: border-box;
Expand Down Expand Up @@ -113070,10 +113075,74 @@ input[type=image i][align=bottom i], object[align=bottom i] {

<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 inline-level, then
Copy link
Member

Choose a reason for hiding this comment

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

Is there a reason inline-level is not quoted?

Copy link
Member Author

Choose a reason for hiding this comment

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

inline-level is not a value, but that means this sentence is skipping a level of indirection.

It should probably say something like "if the computed value of 'display' is a value such that the outer display type is 'inline'"

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 formatting context for its contents. The type
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?

of this formatting context is determined by its <span>'display'</span> value, as usual.</p></li>

<li><p>If the element is absolutely positioned, then for the purpose of the CSS visual
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.)

formatting model, act as if the element is a replaced element. <ref spec=CSS></p></li>
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 element's box shrink-wraps.</p></li>
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"


<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>
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>If the computed value of the <span>'display'</span> property is 'inline', then behave as
'inline-block'.</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>
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.


<ul>
<li><p>It shrink-wraps.</p></li>

<li><p>The <span>'display'</span> property is set to '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') and the conditions below do not both apply is expected to depict a button
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.

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>

<ul class="brief">
<li>The <span>computed value</span> of <span>'display'</span> is 'inline'</li>
zcorpan marked this conversation as resolved.
Show resolved Hide resolved
<li>The <span>computed value</span> of 'appearance' is 'none'</li>
</ul>

</div>

Expand Down Expand Up @@ -113219,10 +113288,13 @@ 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 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
Copy link

Choose a reason for hiding this comment

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

This also depends on -webkit-appearance.

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 +113323,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
Copy link

Choose a reason for hiding this comment

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

"file name(s) ... followed by a button" -- the button is typically before the file name(s), but the spec should probably be worded to not make any assumptions about placement. Also, the rendering is affected by -webkit-appearance.

Copy link
Member Author

Choose a reason for hiding this comment

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

Filed #4276

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 +113342,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