[css-ui-4] Provide hooks for HTML to define rendering for widgets

Relates to #3526

This is part of an editorial rewrite of the prior work by Bocoup
(@zcorpan and @howard-e):
* whatwg/html#7004
* #6537

Co-authored-by: fantasai <fantasai.bugs@inkedblade.net>
Co-authored-by: Simon Pieters <zcorpan@gmail.com>
Co-authored-by: Howard Edwards <howarde.edwards@gmail.com>

Author: 4 people

css-ui-4/Overview.bs

@@ -1999,7 +1999,7 @@ to match the control to platform conventions for the use of the accent color.
 
 <pre class="propdef">
 Name: appearance
-Value: ''appearance/none'' | ''auto'' | ''textfield'' | ''menulist-button'' | <<compat-auto>>
+Value: ''appearance/none'' | ''auto'' | <<compat-auto>> | <<compat-special>>
 Initial: none
 Applies To: all elements
 Inherited: no
@@ -2020,7 +2020,8 @@ This specification introduces the 'appearance' property
 to provide some control over this behavior.
 In particular, using ''appearance: none'' allows authors
 to suppress the <a>native appearance</a> of <a>widgets</a>,
-so that CSS can be used to restyle them.
+giving them a <dfn export>primitive appearance</dfn>
+where CSS can be used to restyle them.
 
 <details class=note>
 	<summary>Note on the history of this feature</summary>
@@ -2071,35 +2072,23 @@ so that CSS can be used to restyle them.
 		The element is rendered following the usual rules of CSS.
 		Replaced elements other than <a>widgets</a> are not affected by this
 		and remain replaced elements.
-		<a>Widgets</a> must not have their <a>native appearance</a>.
+		<a>Widgets</a> must not have their <a>native appearance</a>,
+		and instead must have their <a>primitive appearance</a>.
 		See [[#appearance-decorative]] and [[#appearance-semantics]] for details.
 
 	<dt><dfn>auto</dfn>
 	<dd>
-		<a>Widgets</a> may have their <a>native appearance</a>.
+		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]].
 
-		Elements other than <a>widgets</a> must be rendered as if ''appearance/none'' had been specified.
+		The host language is responsible for defining
+		which elements represent which <a>widgets</a>.
 
-	<dt><dfn>textfield</dfn>
-	<dd>
-		For <{input}> elements where the <{input/type}> attribute is in the Search state,
-		the element is rendered as a "normal" text entry widget,
-		similar to an <{input}> element where the <{input/type}> attribute is in the Text state.
-
-		For all other elements, this value has the same effect as ''appearance/auto''.
-
-	<dt><dfn>menulist-button</dfn>
-	<dd>
-		For <a spec="html">drop-down box</a> <{select}> elements,
-		the element is rendered as a drop-down box, including a "drop-down button",
-		but not necessarily using a native control of the host operating system.
-		For such elements, CSS properties such as 'color', 'background-color', and 'border'
-		(that can be disregarded for ''appearance/auto'') should not be disregarded.
+		Elements other than <a>widgets</a> must be rendered as for ''appearance/none''.
 
-		For all other elements, this value has the same effect as ''appearance/auto''.
-
-	<dt><dfn type="">&lt;compat-auto></dfn>
-	<dd>
+	 <dt><dfn type="">&lt;compat-auto></dfn>
+	 <dd>
 		These values exist for compatibility of content developed
 		for earlier non-standard versions of this property.
 		They all have the same effect as ''appearance/auto''.
@@ -2119,6 +2108,27 @@ so that CSS can be used to restyle them.
 		or that
 		some of these values need to have some side effects on some <a>widgets</a>.
 
+	 <dt><dfn type="">&lt;compat-special></dfn>
+	 <dd>
+		These values exist for compatibility of content developed
+		for earlier non-standard versions of this property.
+		For the purpose of this specification,
+		they all have the same effect as ''appearance/auto''.
+		However, the host language may also take these values into account
+		when defining the <a>native appearance</a> of the element.
+
+		<pre class=prod style="white-space: normal"><<compat-special>> =  <dfn>textfield</dfn> | <dfn>menulist-button</dfn> </pre>
+
+		<div class=example>
+			For instance, in [[HTML]]:
+			* The native appearance of <{input}> elements with a <code>"search"</code> <{input/type}> attribute changes
+				to match the appearance of <{input}> elements with a <code>"text"</code> <{input/type}> attribute
+				when 'appearance' is ''textfield''.
+			* The native appearance of drop-down box <{select}> elements changes
+				to match that of its <a>devolved</a> state
+				when 'appearance' is ''menulist-button''.
+		</div>
+
 </dl>
 
 <div class=issue>
@@ -2156,11 +2166,8 @@ so that CSS can be used to restyle them.
 	and activating (for example by clicking) the element would toggle the state as usual.
 </div>
 
-On <a>widgets</a> where the computed value is ''appearance/auto'',
-''appearance/textfield'',
-''appearance/menulist-button'',
-or one of the <<compat-auto>> values,
-UAs may disregard some CSS properties
+User agents may disregard some CSS properties
+on [=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.
 However, the following properties must not be disregarded:
@@ -2193,6 +2200,77 @@ so this specification needs to say something about this.
 For compatibility with legacy content, UAs must also support <dfn property export>-webkit-appearance</dfn>
 as a [=legacy name alias=] of 'appearance'.
 
+
+<h4 id="appearance-disabling-properties">
+Properties Disabling Native Appearance</h4>
+
+Certain properties, when declared in the [=Author Origin=] or [=Animation Origin=],
+will disable the [=native appearance=] of certain [=widgets=].
+Specifically,
+if all the declarations of the [=Author Origin=] and [=Animation Origin=]
+pertaining to such a [=widget=] are cascaded
+and a [=cascaded value=] exists--
+and is not ''revert'' or ''revert-level''--
+for any <a>property that disables native appearance for widgets</a>,
+then that [=widget=] is rendered as a <a>devolved widget</a>.
+The rendering of a <dfn export lt="devolved|devolved widget">devolved widget</dfn>
+is identical to that of the [=widget=] in its [=primitive appearance=],
+except when specified otherwise by the host language.
+
+The host language defines
+which elements represent <dfn export lt="devolvable|devolvable widget">devolvable widgets</dfn>.
+Widgets whose appearance remains native
+regardless of any <a>properties that disable native appearance for widgets</a>
+are called <dfn export lt="non-devolvable|non-devolvable widget">non-devolvable widgets</dfn>.
+
+The <dfn lt="property that disables native appearance for widgets|properties that disable native appearance for widgets">properties that disable native appearance for widgets</dfn> are:
+<ul>
+    <li>'background-color'
+    <li>'border-top-color'
+    <li>'border-top-style'
+    <li>'border-top-width'
+    <li>'border-right-color'
+    <li>'border-right-style'
+    <li>'border-right-width'
+    <li>'border-bottom-color'
+    <li>'border-bottom-style'
+    <li>'border-bottom-width'
+    <li>'border-left-color'
+    <li>'border-left-style'
+    <li>'border-left-width'
+    <li>'border-block-start-color'
+    <li>'border-block-end-color'
+    <li>'border-inline-start-color'
+    <li>'border-inline-end-color'
+    <li>'border-block-start-style'
+    <li>'border-block-end-style'
+    <li>'border-inline-start-style'
+    <li>'border-inline-end-style'
+    <li>'border-block-start-width'
+    <li>'border-block-end-width'
+    <li>'border-inline-start-width'
+    <li>'border-inline-end-width'
+    <li>'background-image'
+    <li>'background-attachment'
+    <li>'background-position'
+    <li>'background-clip'
+    <li>'background-origin'
+    <li>'background-size'
+    <li>'border-image-source'
+    <li>'border-image-slice'
+    <li>'border-image-width'
+    <li>'border-image-outset'
+    <li>'border-image-repeat'
+    <li>'border-top-left-radius'
+    <li>'border-top-right-radius'
+    <li>'border-bottom-right-radius'
+    <li>'border-bottom-left-radius'
+    <li>'border-start-start-radius'
+    <li>'border-start-end-radius'
+    <li>'border-end-start-radius'
+    <li>'border-end-end-radius'
+</ul>
+
 <h4 id=appearance-decorative>
 Effects of 'appearance' on Decorative Aspects of Elements</h4>