From 55422c51735ec4ca82da93cea1979dc7e058f4a7 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Thu, 14 Apr 2022 15:19:13 +0900 Subject: [PATCH] [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): * https://github.com/whatwg/html/pull/7004/ * https://github.com/w3c/csswg-drafts/pull/6537 Co-authored-by: fantasai Co-authored-by: Simon Pieters Co-authored-by: Howard Edwards --- css-ui-4/Overview.bs | 136 ++++++++++++++++++++++++++++++++++--------- 1 file changed, 107 insertions(+), 29 deletions(-) diff --git a/css-ui-4/Overview.bs b/css-ui-4/Overview.bs index 66dc1b0c3078..d38aceeba58c 100644 --- a/css-ui-4/Overview.bs +++ b/css-ui-4/Overview.bs @@ -1999,7 +1999,7 @@ to match the control to platform conventions for the use of the accent color. 
 Name: appearance
-Value: ''appearance/none'' | ''auto'' | ''textfield'' | ''menulist-button'' | <>
+Value: ''appearance/none'' | ''auto'' | <> | <>
 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 native appearance of widgets,
-so that CSS can be used to restyle them.
+giving them a primitive appearance
+where CSS can be used to restyle them.
 
 

 	Note on the history of this feature
@@ -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 widgets are not affected by this
 		and remain replaced elements.
-		Widgets must not have their native appearance.
+		Widgets must not have their native appearance,
+		and instead must have their primitive appearance.
 		See [[#appearance-decorative]] and [[#appearance-semantics]] for details.
 
 	
auto
 	

-		Widgets may have their native appearance.
+		Elements representing widgets should have the native appearance of that widget,
+		if the properties that disable native appearance for widgets are not in effect.
+		See [[#appearance-disabling-properties]].
 
-		Elements other than widgets must be rendered as if ''appearance/none'' had been specified.
+		The host language is responsible for defining
+		which elements represent which widgets.
 
-	
textfield
-	

-		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''.
-
-	
menulist-button
-	

-		For drop-down box <{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 widgets must be rendered as for ''appearance/none''.
 
-		For all other elements, this value has the same effect as ''appearance/auto''.
-
-	
<compat-auto>
-	

+	 
<compat-auto>
+	 

 		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 widgets.
 
+	 
<compat-special>
+	 

+		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 native appearance of the element.
+
+		
<> =  textfield | menulist-button 

+
+		

+			For instance, in [[HTML]]:
+			* The native appearance of <{input}> elements with a "search" <{input/type}> attribute changes
+				to match the appearance of <{input}> elements with a "text" <{input/type}> attribute
+				when 'appearance' is ''textfield''.
+			* The native appearance of drop-down box <{select}> elements changes
+				to match that of its devolved state
+				when 'appearance' is ''menulist-button''.
+		

+
 
 
 

@@ -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.
 

 
-On widgets where the computed value is ''appearance/auto'',
-''appearance/textfield'',
-''appearance/menulist-button'',
-or one of the <> 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 -webkit-appearance
 as a [=legacy name alias=] of 'appearance'.
 
+
+

+Properties Disabling Native Appearance

+
+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 property that disables native appearance for widgets,
+then that [=widget=] is rendered as a devolved widget.
+The rendering of a devolved widget
+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 devolvable widgets.
+Widgets whose appearance remains native
+regardless of any properties that disable native appearance for widgets
+are called non-devolvable widgets.
+
+The properties that disable native appearance for widgets are:
+
    
+    
  • 'background-color'
+    
  • 'border-top-color'
+    
  • 'border-top-style'
+    
  • 'border-top-width'
+    
  • 'border-right-color'
+    
  • 'border-right-style'
+    
  • 'border-right-width'
+    
  • 'border-bottom-color'
+    
  • 'border-bottom-style'
+    
  • 'border-bottom-width'
+    
  • 'border-left-color'
+    
  • 'border-left-style'
+    
  • 'border-left-width'
+    
  • 'border-block-start-color'
+    
  • 'border-block-end-color'
+    
  • 'border-inline-start-color'
+    
  • 'border-inline-end-color'
+    
  • 'border-block-start-style'
+    
  • 'border-block-end-style'
+    
  • 'border-inline-start-style'
+    
  • 'border-inline-end-style'
+    
  • 'border-block-start-width'
+    
  • 'border-block-end-width'
+    
  • 'border-inline-start-width'
+    
  • 'border-inline-end-width'
+    
  • 'background-image'
+    
  • 'background-attachment'
+    
  • 'background-position'
+    
  • 'background-clip'
+    
  • 'background-origin'
+    
  • 'background-size'
+    
  • 'border-image-source'
+    
  • 'border-image-slice'
+    
  • 'border-image-width'
+    
  • 'border-image-outset'
+    
  • 'border-image-repeat'
+    
  • 'border-top-left-radius'
+    
  • 'border-top-right-radius'
+    
  • 'border-bottom-right-radius'
+    
  • 'border-bottom-left-radius'
+    
  • 'border-start-start-radius'
+    
  • 'border-start-end-radius'
+    
  • 'border-end-start-radius'
+    
  • 'border-end-end-radius'
+

+
 

 Effects of 'appearance' on Decorative Aspects of Elements