Skip to content

Commit

Permalink
Rendering: 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
 - input element as domain-specific widgets (optional)
 - input element as a file upload control (optional)
 - select element
    size attribute is used only for dropdown/listbox switching if
    field-sizing:content
 - textarea element
    cols/rows are ignored if field-sizing:content

Issue: whatwg#6807
Issue: w3c/csswg-drafts#7542
  • Loading branch information
@tkent-google
tkent-google committed Nov 2, 2023
1 parent 37659e9 commit ba9aa74
Showing 1 changed file with 133 additions and 35 deletions.
168 changes: 133 additions & 35 deletions source
View file
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 @@ -131907,19 +131910,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>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
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> 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>

<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
Expand Down Expand Up @@ -131966,8 +131988,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
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 <span 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 +132102,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 +132366,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 +132381,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>
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>
<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 +132472,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>
<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 +132502,23 @@ 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 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

0 comments on commit ba9aa74

Please sign in to comment.