Rendering: field-sizing support for some elements

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

Author: tkent-google

source

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