[css-ui-4] Define appearance:auto box rendering and integration with CSS (#11972)

* Define appearance:auto box rendering and integration with CSS

* Editorial fixes

---------

Co-authored-by: Chris Harrelson <chrishtr@google.com>

Author: chrishtr

css-ui-4/Overview.bs

@@ -2227,7 +2227,7 @@ Switching appearance: the 'appearance' property</h3>
 	<a>widgets</a> are typically rendered by UAs using native UI controls of the host operating system,
 	which can neither be replicated nor styled using CSS.
 
-	The term <dfn export>widget</dfn> in this specification denotes elements that can have <dfn export>native appearance</dfn>,
+	The term <dfn export>widget</dfn> in this specification denotes [=replaced=] elements that can have <dfn export>native appearance</dfn>,
 	meaning that they are rendered like analogous native widgets or controls of the host operating system or platform,
 	or with a look and feel not otherwise expressible in CSS.
 	It is up to the host language (e.g., HTML [[HTML]]) to define which elements can have <a>native appearance</a>.
@@ -2310,14 +2310,14 @@ Switching appearance: the 'appearance' property</h3>
 
 		<dt><dfn>auto</dfn>
 		<dd>
-			Elements representing <a>widgets</a> should have the <a>native appearance</a> of that widget,
-			if the <a>properties that disable native appearance for widgets</a> are not in effect.
-			See [[#appearance-disabling-properties]].
+		  The element's box is laid out like a regular replaced element. 
 
-			The host language is responsible for defining
-			which elements represent which <a>widgets</a>.
+		  Within that box, elements representing <a>widgets</a> should have the <a>native appearance</a> of that widget.
 
-			Elements other than <a>widgets</a> must be rendered as for ''appearance/none''.
+		  The host language is responsible for defining
+		  which elements represent which <a>widgets</a>.
+
+		  Elements other than <a>widgets</a> must be rendered as for ''appearance/none''.
 
 		<dt><dfn>base</dfn>
 		<dd>
@@ -2417,42 +2417,36 @@ Switching appearance: the 'appearance' property</h3>
 		and activating (for example by clicking) the element would toggle the state as usual.
 	</div>
 
-	User agents may [=disregard=] some CSS properties
-	on [=widgets=] rendered with their [=native appearance=]
+	User agents may [=disregard=] some CSS properties used to size and paint the contents
+	of [=widgets=] rendered with their [=native appearance=]
 	to ensure that the intended appearance is preserved,
 	or because these properties may not be meaningful for the chosen appearance.
+
 	<dfn>Disregarding</dfn> a property means that
 	the user agent treats it as if it didn't [=apply to=] the widget in question.
 	Nevertheless,
 	unless an explicit exception is specified (for compatibility reasons),
 	the user agent must still determine the [=computed value=] of any [=disregarded=] property
 	according to the usual rules.
-	However, the following properties must not be [=disregarded=]:
 
+  In more detail, the rules for disregarding properties for [=natively rendered=] widgets are:
 	<ul>
-		<li>'appearance'
-		<li>'display' (the [=inner display type=] may be ignored)
-		<li>'visibility'
-		<li>'position'
-		<li>'top'
-		<li>'right'
-		<li>'bottom'
-		<li>'left'
-		<li>'float'
-		<li>'clear'
-		<li>'margin' and related long-hand properties
-		<li>'unicode-bidi'
-		<li>'direction'
-		<li>'cursor'
-		<li>'z-index'
+  	<li>	CSS properties that impact the box sizing or position of the widget's box (such as the [=sizing properties=]),
+	or their visual appearance outside of the box (such as 'transform', 'filter' or 'box-shadow'), must be applied to
+	 [=widgets=] rendered with their [=native appearance=]. The widget's box participates in the rest of layout like any other replaced element.
+	  <li> Properties that affect the internal box model sizing of the widget's box (such as 'box-sizing', 'padding', 'border' or 'margin') may be disregarded when needed.
+	  <li> Other properties that affect painting (like 'background-color') may be disregarded when needed.
+	  <li> User agents should take into account CSS properties that affect writing modes or font-related properties when possible,
+	when rendering text within the widget.
+	  <li> The 'object-fit' property does not apply.
 	</ul>
 
-	Issue: Are there more properties that should be included in this list?
-	Should we remove some?
-	Should we whitelist the properties that are ok to ignore instead of
-	blacklisting those that are not?
-	Either way, UAs do ignore some properties when rendering <a>widgets</a>,
-	so this specification needs to say something about this.
+	<div class=example>
+	  Some user agents respect the 'border' and 'padding' CSS properties for a &lt;select&gt; rendered with [=native appearance=], but
+	  not for &lt;input type=checkbox&gt;.
+	</div>
+
+	Native rendering of widgets may overflow the size of its box if its intrinsic sizing exceeds that size.
 
 	For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
 	as a [=legacy name alias=] of 'appearance'.