Skip to content

Commit

Permalink
Add CSS field-sizing support for some elements
Browse files Browse the repository at this point in the history 
This covers:

* input element as a text entry widget: size attribute is ignored if field-sizing: content is set.
* input element with number state
* input element as a file upload control (optional)
* select element: size attribute is used only for dropdown/listbox switching if field-sizing: content is set
* textarea element: cols/rows are ignored if field-sizing: content is set
 
This also stops applying "presentational hints" and "user-agent-level style rule" for width and height properties in order to match to major browser behaviors.

Fixes #6807. See also w3c/csswg-drafts#7542.
  • Loading branch information
@tkent-google
tkent-google authored Feb 6, 2024
1 parent 055a678 commit ae80157
Showing 1 changed file with 109 additions and 36 deletions.
145 changes: 109 additions & 36 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3814,6 +3814,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 @@ -3914,9 +3915,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 @@ -131958,6 +131962,10 @@ input, select, textarea {
text-align: initial;
}

:autofill {
field-sizing: fixed !important;
}

input:is([type=reset i], [type=button i], [type=submit i]), button {
text-align: center;
}
Expand Down Expand Up @@ -132841,19 +132849,34 @@ 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>An <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 element. User
agents are expected to determine the <span>inline size</span> of its <span>intrinsic size</span>
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>, the <span>inline size</span> 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. User agents may take the
text caret size into account in the <span>inline size</span>.</p>
</li>

<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, return the value obtained from applying the <span>converting a character
width to pixels</span> algorithm to the value of the attribute.</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>Otherwise, return 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
Expand Down Expand Up @@ -132900,8 +132923,24 @@ 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
<span>intrinsic size</span> is about one line high. 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> 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
<span>intrinsic 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 @@ -132999,6 +133038,16 @@ 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. 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> 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 @@ -133251,6 +133300,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 @@ -133262,16 +133315,39 @@ 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. The <span>inline size</span> of its
<span>intrinsic size</span> is the <span>width of the <code>select</code>'s labels</span> plus
the width of a scrollbar. The <span>block size</span> of its <span>intrinsic 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>
of <span data-x="field-sizing-content">'content'</span>, return the height necessary to contain
all rows for items.</p>
</li>

<li>
<p>If the <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>
<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 <span>intrinsic size</span> 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 @@ -133332,13 +133408,18 @@ 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>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. User agents may take the
text caret size into account in the <span>intrinsic size</span>. Otherwise, its
<span>intrinsic size</span> is computed from <span>textarea effective width</span> and
<span>textarea effective height</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
Expand All @@ -133348,14 +133429,6 @@ 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 <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
Expand Down

0 comments on commit ae80157

Please sign in to comment.