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
tkent-google · Oct 30, 2023 · 8c902c7 · 8c902c7
1 parent 37659e9
commit 8c902c7
Showing 1 changed file with 88 additions and 9 deletions.
diff --git a/source b/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>
@@ -131927,6 +131930,19 @@ details[open] > summary:first-of-type {
   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>The <code>input</code> element whose <code data-x="attr-input-type">type</code> attribute is
+  in one of the above states 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>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>,
+  <span data-x="presentational hints">presentational hints</span> for <span>'width'</span>
+  described the above paragraphs are not applied, and its width 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>
+
   <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>
@@ -131966,8 +131982,17 @@ 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>User agents may handle these controls as
+  <span data-x="element with default preferred size">elements with default preferred size</span>,
+  and user agents may apply the <span>'field-sizing'</span> CSS property to these controls.</p>
+
+  <p>If the user agent applies <span>'field-sizing'</span> CSS property to a control 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 control is expected to be about as wide
+  as the necessary to show the current <span data-x="concept-fe-value">value</span>.  Otherwise,
+  it's expected to be about as wide as necessary to show the widest possible value.</p>
+
+  <p>These controls are all expected to be about one line high.</p>
 
   <p class="XXX">Need to detail the expected <span>native appearance</span> and <span>primitive
   appearance</span>.</p>
@@ -132065,6 +132090,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 box 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 +132354,19 @@ 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>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>, <span>presentational hints</span> for
+  <span>'width'</span> and <span>'height'</span> described the above paragraphs are not applied,
+  and its box size is 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, its last empty line should secure space for the text caret.</p>-->
+
   <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 +132378,33 @@ 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>'width'</span> is the <span>width of the <code>select</code>'s labels</span> plus the
+  width of a scrollbar.  Its <span>'height'</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>.
+  Its width 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> st 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
@@ -132427,6 +132494,18 @@ progress { appearance: auto; }</code></pre>
   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>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>, <span>presentational hints</span> for
+  <span>'width'</span> and <span>'height'</span> described the above paragraphs are not applied,
+  and its box size is 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, its last empty line should secure space for the text caret.</p>
+
   <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