- From: Simon Pieters via GitHub <sysbot+gh@w3.org>
- Date: Tue, 08 Sep 2020 21:29:55 +0000
- To: public-css-archive@w3.org
Thinking about this again, I think most of the logic around 'appearance' could be in css-ui. HTML would only provide algorithms to determine whether an element, given a computed 'appearance' value, can be a specific kind of widget.
Something like this, using the current state of https://github.com/whatwg/html/pull/4857
## css-ui
The possible **kinds of widgets** are none, button, searchfield, textfield, slider-horizontal, checkbox, radio, listbox, menulist, menulist-button, textarea, progress-bar, and meter.
UA must run this at used value time: **compute the kind of widget** to use for an element element:
1. If computedAppearance is 'none', then return none.
2. Let computedAppearance be the computed value of element's 'appearance' property.
3. Let authorProps be a map of all properties that have a cascaded value for element, where the Author Origin, Animation Origin and Transition Origin cascade origins are included and the User Origin and User Agent Origin cascade origins are ignored, where the key is the property name and the value is that cascaded value.
4. If element _can be a button_, given computedAppearance, then return the appropriate widget with authorProps set to authorProps, expected set to button, and fallback set to none.
5. If element _can be a textfield_, given computedAppearance, then return the appropriate widget with authorProps set to authorProps, expected set to textfield, and fallback set to none.
6. If element _can be a searchfield_, given computedAppearance, then return the appropriate widget with authorProps set to authorProps, expected set to searchfield, and fallback set to none.
7. If element _can be a slider-horizontal_, given computedAppearance, then return slider-horizontal.
8. If element _can be a menulist-button_, given computedAppearance, then return menulist-button.
9. If element _can be a menulist_, given computedAppearance, then return menulist.
10. If element _can be a textarea_, given computedAppearance, then return the appropriate widget with authorProps set to authorProps, expected set to textarea, and fallback set to none.
11. If element _can be a progress-bar_, given computedAppearance, then return progress-bar.
12. If element _can be a meter_, given computedAppearance, then return meter.
13. Return none.
The **appropriate widget**, given a map of properties authorProps, and an expected kind of widget expected, and a fallback kind of widget fallback, is as follows:
1. For each prop of the properties that disable native appearance for widgets:
1. If authorProps[prop] exists, and it is not "revert", then return fallback.
2. Return expected.
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'
## HTML
To determine if an HTML element **can be a button**, given computedAppearance: localName is "button", or localName is "input" and inputState is one of Button, Submit, Reset, or Color.
(etc, see "compute the kind of widget" in https://github.com/whatwg/html/pull/4857)
--
GitHub Notification of comment by zcorpan
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3526#issuecomment-689146382 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 8 September 2020 21:29:57 UTC