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

Rendering: field-sizing support for some elements #9903

Merged
merged 7 commits into from
Feb 6, 2024
Merged

Rendering: field-sizing support for some elements #9903

Changes from 3 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ba9aa74
Rendering: field-sizing support for some elements
tkent-google Oct 30, 2023
73b6793
Fix a tag name typo
tkent-google Nov 2, 2023
332d3b5
add :autofill style
tkent-google Nov 13, 2023
d413a24
Simplifies the selectors for :autofill
tkent-google Nov 29, 2023
59bbf07
- The size for field-sizing:content is not the 'default preferred size',
tkent-google Dec 8, 2023
c559f82
Unified to 'intrinsic size'
tkent-google Jan 15, 2024
bbfb799
Fix a wrong condition in input[type=number]
tkent-google Jan 22, 2024
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
172 changes: 137 additions & 35 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3916,9 +3916,12 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<dfn data-x-href="https://drafts.csswg.org/css-ui/#typedef-appearance-compat-auto">&lt;compat-auto></dfn> non-terminal value type, its
<dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-appearance-textfield">'textfield'</dfn> value, and its
<dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-appearance-menulist-button">'menulist-button'</dfn> value.</li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#field-sizing">'field-sizing'</dfn> property, and its
<dfn data-x-href="https://drafts.csswg.org/css-ui/#valdef-field-sizing-content" data-x="field-sizing-content">'content'</dfn> value.</li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#widget">widget</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#native-appearance">native appearance</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#primitive-appearance">primitive appearance</dfn></li>
<li>The concept <dfn data-x-href="https://drafts.csswg.org/css-ui/#element-with-default-preferred-size">element with default preferred size</dfn></li>
<li>The <dfn data-x-href="https://drafts.csswg.org/css-ui/#non-devolvable">non-devolvable widget</dfn> and
<dfn data-x-href="https://drafts.csswg.org/css-ui/#devolvable">devolvable widget</dfn> classification, and the related
<dfn data-x-href="https://drafts.csswg.org/css-ui/#devolved">devolved widget</dfn> state.</li>
Expand Down Expand Up @@ -131028,6 +131031,10 @@ input, select, textarea {
text-align: initial;
}

input:autofill, select:autofill, textarea:autofill {
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
field-sizing: fixed !important;
}

input:is([type=reset i], [type=button i], [type=submit i]), button {
text-align: center;
}
Expand Down Expand Up @@ -131907,19 +131914,38 @@ details[open] > summary:first-of-type {
at the element, with the <code data-x="dom-Event-bubbles">bubbles</code> attribute initialized to
true.</p>

<p>If an <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is
in one of the above states has a <code data-x="attr-input-size">size</code> attribute, and parsing
that attribute's value using the <span>rules for parsing non-negative integers</span> doesn't
generate an error, then the user agent is expected to use the attribute as a <span
data-x="presentational hints">presentational hint</span> for the <span>'width'</span> property on
the element, with the value obtained from applying the <span>converting a character width to
pixels</span> algorithm to the value of the attribute.</p>
<p>The <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is
in one of the above states is an <span>element with default preferred size</span>, and
user agents are expected to apply the <span>'field-sizing'</span> CSS property to
the elements.</p>

<p>The <span>inline size</span> of the default preferred size is determined by the following
steps:<p>
zcorpan marked this conversation as resolved.
Show resolved Hide resolved

<ol>
<li>
<p>If the <span>'field-sizing'</span> property on the element has a <span>computed value</span>
of <span data-x="field-sizing-content">'content'</span>,
The <span>inline size</span> of the default preferred size is determined by the text which the
element shows. The text is either a <span data-x="concept-fe-value">value</span> or a short hint
specified by the <code data-x="attr-input-placeholder">placeholder</code> attribute. If the text
is editable by the user, user agents may secure space for the text caret.</p>
</li>

<p>If an <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is
in one of the above states does <em>not</em> have a <code data-x="attr-input-size">size</code>
attribute, then the user agent is expected to act as if it had a user-agent-level style sheet rule
setting the <span>'width'</span> property on the element to the value obtained from applying the
<span>converting a character width to pixels</span> algorithm to the number 20.</p>
<li>
<p>If the element has a <code data-x="attr-input-size">size</code> attribute, and parsing that
attribute's value using the <span>rules for parsing non-negative integers</span> doesn't
generate an error, the <span>inline size</span> of the default preferred size is the value
obtained from applying the <span>converting a character width to pixels</span> algorithm to the
value of the attribute.</p>
</li>

<li>
<p>Otherwise, the <span>inline size</span> of the default preferred size is the value obtained
from applying the <span>converting a character width to pixels</span> algorithm to the number
20.</p>
</li>
</ol>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved

<p>The <dfn>converting a character width to pixels</dfn> algorithm returns <span data-x="">(<var>size</var>-1)&times;<var>avg</var>&nbsp;+&nbsp;<var>max</var></span>,
where <var>size</var> is the character width to convert, <var>avg</var> is the
Expand Down Expand Up @@ -131966,8 +131992,23 @@ details[open] > summary:first-of-type {
the <span data-x="attr-input-type-number">Number</span> state is a <span>devolvable widget</span>
expected to render as an <span>'inline-block'</span> box depicting a number control.</p>

<p>These controls are all expected to be about one line high, and about as wide as necessary to
show the widest possible value.</p>
<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-number">Number</span> state is an
<span>element with default preferred size</span>, and user agents are expected to apply the
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
<span>'field-sizing'</span> CSS property to the element. The <span>block size</span> of the
default preferred size is about one line high. If the <span>'field-sizing'</span> property on the
control has a <span>computed value</span> of <span data-x="field-sizing-content">'content'</span>,
the <span>inline size</span> of the default preferred size is expected to be about as wide as the
necessary to show the current <span data-x="concept-fe-value">value</span>. Otherwise, the
<span>inline size</span> is expected to be about as wide as necessary to show the widest possible
value.</p>

<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-date">Date</span>,
<span data-x="attr-input-type-month">Month</span>,
<span data-x="attr-input-type-week">Week</span>, <span data-x="attr-input-type-time">Time</span>,
or <span data-x="attr-input-type-datetime-local">Local Date and Time</span> state, is expected to
be about one line high, and about as wide as necessary to show the widest possible value.</p>

<p class="XXX">Need to detail the expected <span>native appearance</span> and <span>primitive
appearance</span>.</p>
Expand Down Expand Up @@ -132065,6 +132106,18 @@ details[open] > summary:first-of-type {
<span>implementation-defined</span> (and possibly locale-specific) text, for example "Choose
file".</p>

<p>User agents may handle 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 as an
<span>element with default preferred size</span>, and user agents may apply the
<span>'field-sizing'</span> CSS property to the element.</p>

<p>If the user agent applies <span>'field-sizing'</span> CSS property to the element and the
<span>'field-sizing'</span> property on the control has a <span>computed value</span> of
<span data-x="field-sizing-content">'content'</span>, the default preferred size of the element
is expected to depend on its content such as the <span>'::file-selector-button'</span>
pseudo-element and chosen file names.</p>

</div>


Expand Down Expand Up @@ -132317,6 +132370,10 @@ progress { appearance: auto; }</code></pre>

<h4>The <code>select</code> element</h4>

<p>The <code>select</code> element is an <span>element with default preferred size</span>, and
user agents are expected to apply the <span>'field-sizing'</span> CSS property to
<code>select</code> elements.

<p>A <code>select</code> element is either a <dfn export for="select">list box</dfn> or a <dfn
export for="select">drop-down box</dfn>, depending on its attributes.</p>

Expand All @@ -132328,16 +132385,37 @@ progress { appearance: auto; }</code></pre>
than 1, is expected to render as a single-select <span>list box</span>.</p>

<p>When the element renders as a <span>list box</span>, it is a <span>devolvable widget</span>
expected to render as an <span>'inline-block'</span> box whose <span>'height'</span> is the height
necessary to contain as many rows for items as given by the element's <span
data-x="concept-select-size">display size</span>, or four rows if the attribute is absent, and
whose <span>'width'</span> is the <span>width of the <code>select</code>'s labels</span> plus the
width of a scrollbar.</p>
expected to render as an <span>'inline-block'</span> box. Its <span>inline size</span> of the
default preferred size is the <span>width of the <code>select</code>'s labels</span> plus the
width of a scrollbar. Its <span>block size</span> is determined by the following steps:</p>

<ol>
<li>
<p>If the <span>'field-sizing'</span> property on the element has a <span>computed value</span>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
of <span data-x="field-sizing-content">'content'</span>, return the height necessary to contain
all rows for items.</p>
</li>

<li>
<p>If <code data-x="attr-select-size">size</code> attribute is absent or it has no valid value,
return the height necessary to contain four rows.</p>
</li>

<li>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
<p>Otherwise, return the height necessary to contain as many rows for items as given by the
element's <span data-x="concept-select-size">display size</span>.</p>
</li>
</ol>

<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 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>
expected to render as an <span>'inline-block'</span> one-line <span>drop-down box</span>.
The <span>inline size</span> of its default preferred size depends on the shown text if the
<span>'field-sizing'</span> property on the element has a <span>computed value</span> of
<span data-x="field-sizing-content">'content'</span>. The text is typically the label of an
<code>option</code> of which <span data-x="concept-option-selectedness">selectedness</span> is
set to true. Otherwise, the <span>inline size</span> is the
<span>width of the <code>select</code>'s labels</span>.</p>

<p>When the element renders as a <span>drop-down box</span>, it is a <span>devolvable
widget</span>. Its appearance in the devolved state, as well as its appearance when the
Expand Down Expand Up @@ -132398,13 +132476,27 @@ progress { appearance: auto; }</code></pre>
named <code data-x="event-select">select</code> at the element, with the <code
data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p>

<p>If the element has a <code data-x="attr-textarea-cols">cols</code> attribute, and parsing that
attribute's value using the <span>rules for parsing non-negative integers</span> doesn't generate
an error, then the user agent is expected to use the attribute as a <span data-x="presentational
hints">presentational hint</span> for the <span>'width'</span> property on the element, with the
value being the <span>textarea effective width</span> (as defined below). Otherwise, the user
agent is expected to act as if it had a user-agent-level style sheet rule setting the
<span>'width'</span> property on the element to the <span>textarea effective width</span>.</p>
<p>The <code>textarea</code> element is an <span>element with default preferred size</span>, and
user agents are expected to apply the <span>'field-sizing'</span> CSS property to
<code>textarea</code> elements.

<p>The <span>inline size</span> of the default preferred size is determined by the following
steps:</p>

<ol>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
<li>
<p>If the <span>'field-sizing'</span> property on the element has a <span>computed value</span>
of <span data-x="field-sizing-content">'content'</span>, return the size determined by the text
which the element shows. The text is either a
<span data-x="concept-textarea-raw-value">raw value</span> or a short hint specified by the
<code data-x="attr-textarea-placeholder">placeholder</code> attribute. If the text is editable
by the user, the <span>inline size</span> of text caret may be included.</p>
</li>

<li>
<p>Otherwise, return the <span>textarea effective width</span> (as defined below)</p>
</li>
</ol>

<p>The <dfn>textarea effective width</dfn> of a <code>textarea</code> element is <span
data-x=""><var>size</var>&times;<var>avg</var>&nbsp;+&nbsp;<var>sbw</var></span>, where
Expand All @@ -132414,13 +132506,23 @@ progress { appearance: auto; }</code></pre>
data-x="'px'">CSS pixels</span>. (The element's <span>'letter-spacing'</span> property does not
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
affect the result.)</p>

<p>If the element has a <code data-x="attr-textarea-rows">rows</code> attribute, and parsing that
attribute's value using the <span>rules for parsing non-negative integers</span> doesn't generate
an error, then the user agent is expected to use the attribute as a <span data-x="presentational
hints">presentational hint</span> for the <span>'height'</span> property on the element, with the
value being the <span>textarea effective height</span> (as defined below). Otherwise, the user
agent is expected to act as if it had a user-agent-level style sheet rule setting the
<span>'height'</span> property on the element to the <span>textarea effective height</span>.</p>
<p>The <span>block size</span> of the default preferred size is determined by the following
steps:</p>

<ol>
<li>
<p>If the <span>'field-sizing'</span> property on the element has a <span>computed value</span>
of <span data-x="field-sizing-content">'content'</span>, return the size determined by the text
which the element shows. The text is either a
<span data-x="concept-textarea-raw-value">raw value</span> or a short hint specified by the
<code data-x="attr-textarea-placeholder">placeholder</code> attribute. If the text is editable
by the user, the <span>block size</span> of text caret may be included.</p>
</li>

<li>
<p>Otherwise, return the <span>textarea effective height</span> (as defined below)</p>
</li>
</ol>

<p>The <dfn>textarea effective height</dfn> of a <code>textarea</code> element is the height in
<span data-x="'px'">CSS pixels</span> of the number of lines specified the element's <span
Expand Down