Skip to content

Rendering: field-sizing support for some elements #9903

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

Merged
merged 7 commits into from
Feb 6, 2024
Merged

Rendering: field-sizing support for some elements #9903

Changes from all 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
145 changes: 109 additions & 36 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;
}

: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,19 +131915,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>
Comment on lines +131926 to +131931
Copy link
Member

Choose a reason for hiding this comment

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

Say here that autofill text or uncommitted writing suggestion must not be considered in this step.

Copy link
Member

Choose a reason for hiding this comment

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

Hmm maybe autofill doesn't need to be mentioned since there's the :autofill UA rule. Should a writing suggestion affect intrinsic size?

Copy link
Member

Choose a reason for hiding this comment

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

See #9065

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hmm, I'm not sure about a writing suggestion. If it suggest sensitive text such as credit card numbers, intrinsic size should not depend on it.

Copy link
Member

Choose a reason for hiding this comment

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

So field-sizing would then make writing suggestions invisible (if normally rendered inline)?

cc @sanketj @annevk

Copy link

Choose a reason for hiding this comment

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

User agents may take the text caret size into account

According to the latest changes to Chrome, should the may here be changed to must?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Right. We can discuss desired interaction if both features were to be added, though.

Can we discuss it in #9065 ?

Anyway my current thought:

  • If a suggestion by the writing suggestion feature is not shown in the page initially (e.g. shown in a popup window) and a user confirms it before committing it to a form control, we don't need to care about a combination of field-sizing and the writing suggestion feature
  • If a suggestion by the writing suggestion feature is shown in a form control without a user confirmation,
    • If the suggestion desn't contain any sensitive information, field-sizing:content should assume the suggestion is a kind of content
    • If the suggestion might contain sensitive information, it should be treated as same as :autofill. i.e. the form control has a fixed intrinsic size.

Copy link
Member

Choose a reason for hiding this comment

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

I didn't realize writing suggestions were still an open issue, I agree then it can be considered as part of that issue. @tkent-google can you comment on that issue so it's not forgotten later?

I'm going to approve this now as I think it looks good, but waiting for @zcorpan to review/merge, since he still has a "changes requested" review from earlier.

Copy link
Member

Choose a reason for hiding this comment

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

Moving to 9065 sounds good, I commented there: #9065 (comment)

@yisibl 's comment above is not addressed I think.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

According to the latest changes to Chrome, should the may here be changed to must?

I don't want to make it mandatory.

  • Text caret is not defined in CSS specifications AFAIK.
  • Text caret shape is implementation-dependent.
  • Text caret painting is also implementation-dependent. For example, Blink can't paint text caret if the width of content box is zero, but can paint it if the width is greater than zero and it has no space dedicated to the text caret. Other UAs might be able to paint text caret even if the width is zero.

So, it's difficult to define concrete behavior and write tests.

</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 @@ -131966,8 +131989,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 @@ -132065,6 +132104,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 @@ -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,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 @@ -132398,13 +132474,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 @@ -132414,14 +132495,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