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 5 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
148 changes: 113 additions & 35 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3816,6 +3816,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<ul class="brief">
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing/#fit-content-inline-size">fit-content inline size</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing-4/#aspect-ratio">'aspect-ratio'</dfn> property</li>
<li><dfn data-x-href="https://drafts.csswg.org/css-sizing/#intrinsic-size">intrinsic size</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS Lists and Counters</cite>.
Expand Down Expand Up @@ -3916,9 +3917,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 +131032,10 @@ input, select, textarea {
text-align: initial;
}

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

input:is([type=reset i], [type=button i], [type=submit i]), button {
text-align: center;
}
Expand Down Expand Up @@ -131907,26 +131915,43 @@ 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>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved

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

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

<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
average character width of the primary font for the element for which the algorithm is being run,
in pixels, and <var>max</var> is the maximum character width of that same font, also in
pixels. (The element's <span>'letter-spacing'</span> property does not affect the result.)</p>

<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>, the <span>intrinsic size</span> of the
element 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>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved

<p>These text controls are expected to be <span data-x="scroll container">scroll
containers</span> and support scrolling in the <span>inline axis</span>, but not the <span>block
axis</span>.</p>
Expand Down Expand Up @@ -131966,8 +131991,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
<span>'field-sizing'</span> CSS property to the element. The <span>block size</span> of the
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
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 <span>intrinsic size</span> is expected to be about as wide as
necessary to show the current <span data-x="concept-fe-value">value</span>. Otherwise, the
<span>inline size</span> of the default preferred size 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 +132105,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 <span>intrinsic size</span> 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 +132369,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 +132384,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
<span>intrinsic size</span> is the <span>width of the <code>select</code>'s labels</span> plus
the width of a scrollbar. Its <span>block size</span> of the default preferred size is
determined by the following steps:</p>

<ol>
<li>
<p>If <code data-x="attr-select-size">size</code> attribute is absent or it has no valid value,
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
return the height necessary to contain four rows.</p>
</li>

<li>
<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>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>, <span>block size</span> of the
<span>intrinsic size</span> is the height necessary to contain all rows for items.</p>

<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 is the
<span>width of the <code>select</code>'s labels</span>. 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
<span>intrinsic size</span> depends on the shown text. The shown text is typically the label of
an <code>option</code> of which <span data-x="concept-option-selectedness">selectedness</span> is
set to true.</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 +132475,12 @@ 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 the
<span>textarea effective width</span> (as defined below).</p>

<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
tkent-google marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -132414,19 +132490,21 @@ progress { appearance: auto; }</code></pre>
data-x="'px'">CSS pixels</span>. (The element's <span>'letter-spacing'</span> property does not
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 the
<span>textarea effective height</span> (as defined below).</p>

<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
data-x="attr-textarea-rows-value">character height</span>, plus the height of a scrollbar in <span
data-x="'px'">CSS pixels</span>.</p>

<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>intrinsic size</span> is
determined from 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 text caret size may be included.</p>
tkent-google marked this conversation as resolved.
Show resolved Hide resolved

<p>User agents are expected to apply the <span>'white-space'</span> CSS property to
<code>textarea</code> elements. For historical reasons, if the element has a <code
data-x="attr-textarea-wrap">wrap</code> attribute whose value is an <span>ASCII
Expand Down