[css-ui-4] Add 'form-sizing' property

See w3c#7542

Author: tkent-google

css-ui-4/Overview.bs

@@ -102,6 +102,24 @@ urlPrefix: https://html.spec.whatwg.org/multipage/; spec:HTML
 .awesome-table td {padding:5px}
 .awesome-table {color:#000;background:#fff;margin: auto;}
 
+.fake-textarea {
+	background: white;
+	border: inset;
+	color: black;
+	display: inline-block;
+	font-family: monospace;
+	padding: 0 2px;
+}
+.fake-textarea.auto {
+	height: 2lh;
+	overflow: auto;
+	resize: both;
+	width: 10em;
+}
+.fake-textarea.normal {
+	width: 10em;
+}
+
 .fake-input-type-password {
 	display: inline-block;
 	border: 1px solid black;
@@ -2452,6 +2470,59 @@ Effects of 'appearance' on Semantic Aspects of Elements</h4>
 	</div>
 
 
+<h3 id="form-sizing">
+Switching form control sizing: the 'form-sizing' property</h3>
+
+	<pre class=propdef>
+	Name: form-sizing
+	Value: auto | normal
+	Initial: ''form-sizing/auto''
+	Applies to: [=elements with default preferred size=]
+	Inherited: no
+	Percentages: N/A
+	Computed Value: as specified
+	Canonical order: per grammar
+	Animation type: discrete
+	</pre>
+
+	For the purpose of this specification,
+	an <dfn export>element with default preferred size</dfn> is an element
+	of which size is fixed regardless of its content size though its
+	[=preferred size property=] is 'auto'.
+	The host language defines which elements are applicable to it.
+	For example, in HTML <{textarea}> is an [=element with default preferred size=].
+
+	<dl dfn-type=value dfn-for=form-sizing>
+		<dt><dfn>auto</dfn>
+		<dd>
+			The UA must apply the default preferred size to
+			an element if it is an
+			[=element with default preferred size=] and its
+			[=preferred size property=] value is 'auto'.
+			Otherwise UA must behave the same as ''form-sizing/normal''.
+		<dt><dfn>normal</dfn>
+		<dd>
+			The UA must not apply the default preferred size to an element.
+			If the element is an [=element with default preferred size=] and
+			is listed in [[CSS-SIZING-3#min-content-zero|compressible replaced elements]],
+			the UA must stop treating the element as a replaced element for [=min-content contribution=].
+	</dl>
+
+	<div class="example">
+		For instance, <{textara}> has fixed size regardless of its content by default:
+
+		<span class="fake-textarea auto">&#x23B8;</span>
+		<span class="fake-textarea auto">The quick brown fox jumps over the lazy dog.</span>
+
+		If ''form-sizing: normal'' is applied, the former should be:
+		<span class="fake-textarea">&#x23B8;</span>
+
+		If ''form-sizing: normal'' is applied and its width property has a fixed value like ''width: 10em'',
+		 the element height depends on the number of the content lines:
+		<span class="fake-textarea normal">The quick brown fox jumps over the lazy dog.&#x23B8;</span>
+	</div>
+
+
 <h3 id="input-security">
 Obscuring sensitive input: the 'input-security' property</h3>
 
@@ -2649,6 +2720,9 @@ Changes from the <a href="https://www.w3.org/TR/2021/WD-css-ui-4-20210316/">16 M
 
 		<li>
 			Added the ''outline-color/auto'' value of 'outline-color'.
+
+		<li>
+			Added 'form-sizing' property.
 	</ul>