[css-sizing] Better first draft of the input autosizing text, working on <input> and paying attention to placeholder. Part of #2141.

Author: tabatkins

css-sizing-3/Overview.bs

@@ -785,15 +785,46 @@ Intrinsic Sizes</h3>
 	replacing the CSS2 “definition”,
 	such as it is.
 
-	When specified on the HTML <{textarea}> element,
-	the ''width/min-content'' and ''width/max-content'' keywords
-	are calculated as normal for a non-replaced [=block container=],
-	treating its <l spec=html>[=raw value=]</l> as child [=CSS/text nodes=].
+	<hr>
+
+	Although the ''width/auto'' size of text input controls
+	such as HTML’s <code>&lt;input type=text></code> and <code>&lt;textarea></code> elements
+	is typically a fixed size,
+	the contents of such elements can be used to determine a content-based intrinsic size,
+	as for non-replaced block containers.
+	The ''width/min-content'' and ''width/max-content'' keywords of the <a>sizing properties</a>
+	thus represent content-based sizes
+	for form controls which render their value
+	as text contained within their box,
+	allowing such controls to size to fit their visible contents
+	similarly to regular non-replaced elements.
+
+	The content in this case is defined to be the input control's values
+	(the <l spec=html>[=raw value=]</l> in the case of <{textarea}>,
+	or the <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#concept-fe-value">value</a> in the case of <{input}>),
+	possibly transformed to a localized display format,
+	which is then treated as child <a>text runs</a> of the input control.
+	If the input control has <a>placeholder text</a> overlaid,
+	then that text is also measured for the purpose of calculating the content-based size--
+	whether or not the placeholder text is visible at the moment.
+	(Thus the content-based intrinsic size of the input control
+	is the larger of the size to fit the placeholder text and the size to fit the value.)
+
+	Issue: So that this gives sensible results,
+	ensure minimum height via UA style sheet
+	<code>textarea { min-height: 1lh; }</code>.
+
+	Issue: <code>&lt;input type=text></code> only ever displays its value on a single line.
+	This appears to be accomplished by "magic":
+	newlines are removed by a sanitization step on the <code>.value</code> setter,
+	and then single-line display is further applied via magic,
+	rather than the 'white-space' property in the UA stylesheet.
+	Thus, the ''width/min-content'' size should probably automatically treat it as if it had ''white-space: pre''.
 
 	Note: See <a href="https://github.com/w3c/csswg-drafts/issues/1771">discussion about this functionality</a>.
 	This might be extended to <{iframe}> or other content-containing replaced elements,
-	but <{textarea}> is the major use-case
-	and has the least additional complications.
+	but text inputs are the major use-case
+	and have the least additional complications.
 
 <h3 id="intrinsic-contribution">
 Intrinsic Contributions</h3>