From 95f1472ee1e9534559e791f3e8c7dc2e66182681 Mon Sep 17 00:00:00 2001 From: Florian Rivoal Date: Tue, 26 Apr 2022 06:50:20 +0900 Subject: [PATCH] Define which elements can be which kinds of widgets for CSS 'appearance' Closes https://github.com/whatwg/html/pull/7004 by superseding it. See also https://github.com/w3c/csswg-drafts/pull/6537 and https://github.com/w3c/csswg-drafts/pull/7224. Co-authored-by: fantasai Co-authored-by: Simon Pieters Co-authored-by: Howard Edwards --- source | 232 ++++++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 182 insertions(+), 50 deletions(-) diff --git a/source b/source index 99311a6de95..301b7feeb16 100644 --- a/source +++ b/source @@ -3457,7 +3457,23 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute 'padding-block-end', 'padding-inline-start', and 'padding-inline-end' properties -
  • The 'border-block-start-width' property
    • +
  • The 'border-block-start-width', + 'border-block-end-width', + 'border-inline-start-width', + 'border-inline-end-width', + 'border-block-start-style', + 'border-block-end-style', + 'border-inline-start-style', + 'border-inline-end-style', + 'border-block-start-color', + 'border-block-end-color', + 'border-inline-start-color', + 'border-inline-end-color', + 'border-start-start-radius', + 'border-start-end-radius', + 'border-end-start-radius', and + 'border-end-end-radius' + properties
  • The 'block-size' property
  • The 'inline-size' property
  • The 'inset-block-start' property
    • @@ -3500,9 +3516,27 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=CSSBG>

      -
    • The 'background-color' property
      • -
    • The 'background-image' property
      • -
    • The 'border-radius' property
      • +
    • The 'background-color', + 'background-image', + 'background-repeat', + 'background-attachment', + 'background-position', + 'background-clip', + 'background-origin', and + 'background-size' + properties
      • +
    • The 'border-radius', + 'border-top-left-radius', + 'border-top-right-radius', + 'border-bottom-right-radius', + 'border-bottom-left-radius' + properties
      • +
    • The 'border-image-source', + 'border-image-slice', + 'border-image-width', + 'border-image-outset', and + 'border-image-repeat' + properties

    CSS Backgrounds and Borders also defines the following border properties:

    @@ -3715,7 +3749,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    • The 'outline' property
    • The 'cursor' property
      • -
    • The 'appearance' property
      • +
    • The 'appearance' property, its + <compat-auto> non-terminal value type, its + 'textfield' value, and its + 'menulist-button' value.
      • +
    • The concept widget
      • +
    • The concept native appearance
      • +
    • The concept primitive appearance
      • +
    • The non-devolvable widget and + devolvable widget classification, and the related + devolved widget state.
    • The 'pointer-events' property
    • The 'user-select' property
    @@ -3820,9 +3863,17 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=CSSCASCADE>

      +
    • cascaded value
    • specified value
    • computed value
    • used value
      • +
    • cascade origin
      • +
    • Author Origin
      • +
    • User Origin
      • +
    • User Agent Origin
      • +
    • Animation Origin
      • +
    • Transition Origin
      • +
    • initial value

    The CanvasRenderingContext2D object's use of fonts depends on the features @@ -118542,6 +118593,7 @@ input, select, button, textarea { text-transform: initial; text-indent: initial; text-shadow: initial; + appearance: auto; } input, select, textarea { @@ -118556,6 +118608,10 @@ input, button { display: inline-block; } +input[type=hidden i], input[type=file i], input[type=image i] { + appearance: none; +} + input:is([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=color i], [type=search i]), select, button { box-sizing: border-box; @@ -119245,13 +119301,28 @@ input[type=image i][align=bottom i], object[align=bottom i] {

    Widgets

    -

    Introduction

    +

    Native appearance

    + +

    The CSS Basic User Interface specification calls elements that can have a + native appearance widgets, and defines whether to use that native + appearance depending on the 'appearance' property. That logic, in + turn, depends on whether on whether each the element is classified as a devolvable + widget or non-devolvable widget. This section defines which elements match + these concepts for HTML, what their native appearance is, and any particularity of + their devolved state or primitive appearance. +

    -

    The elements defined in this section can be rendered in a variety of manners, within the - guidelines provided below. User agents are encouraged to set the 'appearance' CSS - property appropriately to achieve platform-native appearances for widgets, and are expected to - implement any relevant animations, etc, that are appropriate for the platform.

    - +

    The following elements can have a native appearance for the purpose of the CSS + 'appearance' property.

    + +
      +
    • button
      • +
    • input
      • +
    • meter
      • +
    • progress
      • +
    • select
      • +
    • textarea
      • +
    @@ -119260,6 +119331,9 @@ input[type=image i][align=bottom i], object[align=bottom i] {

    Button layout

    +

    When an element uses button layout, it is a devolvable widget, and + it's native appearance is that of a button.

    +

    Button layout is as follows:

      @@ -119314,6 +119388,7 @@ input[type=image i][align=bottom i], object[align=bottom i] {
    +

    Need to define the expected primitive appearance.

    The button element

    @@ -119324,7 +119399,6 @@ input[type=image i][align=bottom i], object[align=bottom i] { -

    The details and summary elements

    @@ -119373,14 +119447,22 @@ details[open] > summary {

    An input element whose type attribute is in the Text, Search, Telephone, URL, or - Email state, is expected to render as an - 'inline-block' box depicting a text control.

    + Email state, is a devolvable widget. Its + expected native appearance is to render as an 'inline-block' box depicting + a one-line text control.

    An input element whose type attribute is in - the Password state is expected to render as an - 'inline-block' box depicting a text control that obscures data entry.

    + the Search state is a devolvable widget. + Its expected native appearance is to render as an 'inline-block' box + depicting a one-line text control. If the computed value of the element's + 'appearance' property is not 'textfield', it may have a distinct style + indicating that it is a search field.

    + +

    An input element whose type attribute is in + the Password state is a devolvable + widget. Its expected native appearance is to render as an + 'inline-block' box depicting a one-line text control that obscures data entry.

    For input elements whose type attribute is in one of the above states, the used value of the 'line-height' property @@ -119421,6 +119503,9 @@ details[open] > summary { containers and support scrolling in the inline axis, but not the block axis.

    +

    Need to detail the expected native appearance and primitive + appearance.

    +
    @@ -119429,32 +119514,36 @@ details[open] > summary {

    The input element as domain-specific widgets

    An input element whose type attribute is in - the Date state is expected to render as an - 'inline-block' box depicting a date control.

    + the Date state is a devolvable widget + expected to render as an 'inline-block' box depicting a date control.

    An input element whose type attribute is in - the Month state is expected to render as an - 'inline-block' box depicting a month control.

    + the Month state is a devolvable widget + expected to render as an 'inline-block' box depicting a month control.

    An input element whose type attribute is in - the Week state is expected to render as an - 'inline-block' box depicting a week control.

    + the Week state is a devolvable widget + expected to render as an 'inline-block' box depicting a week control.

    An input element whose type attribute is in - the Time state is expected to render as an - 'inline-block' box depicting a time control.

    + the Time state is a devolvable widget + expected to render as an 'inline-block' box depicting a time control.

    An input element whose type attribute is in - the Local Date and Time state is expected to - render as an 'inline-block' box depicting a local date and time control.

    + the Local Date and Time state is a + devolvable widget expected to render as an 'inline-block' box depicting + a local date and time control.

    An input element whose type attribute is in - the Number state is expected to render as an - 'inline-block' box depicting a number control.

    + the Number state is a devolvable widget + expected to render as an 'inline-block' box depicting a number control.

    These controls are all expected to be about one line high, and about as wide as necessary to show the widest possible value.

    +

    Need to detail the expected native appearance and primitive + appearance.

    + @@ -119463,7 +119552,8 @@ details[open] > summary {

    The input element as a range control

    An input element whose type attribute is in - the Range state is expected to render as an + the Range state is a non-devolvable + widget. Its expected native appearance is to render as an 'inline-block' box depicting a slider control.

    When the control is wider than it is tall (or square), the control is expected to be a @@ -119480,6 +119570,7 @@ details[open] > summary { left-to-right ('ltr') horizontal control would have the lowest value on the left and the highest value on the right, and vice versa.

    +

    Need to detail the expected primitive appearance.

    @@ -119502,6 +119593,9 @@ details[open] > summary { attribute) are expected to be shown in the color picker interface, not on the color well itself.

    +

    Need to detail the expected native appearance and primitive + appearance.

    + @@ -119510,12 +119604,20 @@ details[open] > summary {

    The input element as a checkbox and radio button widgets

    An input element whose type attribute is in - the Checkbox state is expected to render as an - 'inline-block' box containing a single checkbox control, with no label.

    + the Checkbox state is a non-devolvable + widget expected to render as an 'inline-block' box containing a single + checkbox control, with no label.

    + +

    Need to detail the expected native appearance and primitive + appearance.

    An input element whose type attribute is in - the Radio Button state is expected to render as an - 'inline-block' box containing a single radio button control, with no label.

    + the Radio Button state is a non-devolvable + widget expected to render as an 'inline-block' box containing a single radio + button control, with no label.

    + +

    Need to detail the expected native appearance and primitive + appearance.

    @@ -119715,9 +119817,14 @@ marquee {

    The meter element

    -

    The meter element is expected to render as an 'inline-block' box with - a 'height' of '1em' and a 'width' of '5em', a - 'vertical-align' of '-0.2em', and with its contents depicting a gauge.

    + 
    @namespace url(http://www.w3.org/1999/xhtml);
+
+meter { appearance: auto; }
    + +

    The meter element is a devolvable widget. Its expected native + appearance is to render as an 'inline-block' box with a 'height' + of '1em' and a 'width' of '5em', a 'vertical-align' of '-0.2em', and + with its contents depicting a gauge.

    When the element is wider than it is tall (or square), the depiction is expected to be of a horizontal gauge, with the minimum value on the right if the 'direction' property on @@ -119731,6 +119838,8 @@ marquee {

    Requirements for what must be depicted in the gauge are included in the definition of the meter element.

    +

    Need to detail the expected primitive appearance.

    + @@ -119738,8 +119847,13 @@ marquee {

    The progress element

    -

    The progress element is expected to render as an 'inline-block' box - with a 'height' of '1em' and a 'width' of '10em', and a + 

    @namespace url(http://www.w3.org/1999/xhtml);
+
+progress { appearance: auto; }
    + +

    The progress element is a devolvable widget. Its expected + native appearance is to render as an 'inline-block' box with a + 'height' of '1em' and a 'width' of '10em', and a 'vertical-align' of '-0.2em'.

    @@ -119766,6 +119880,8 @@ marquee { indeterminate, and what progress a determinate progress bar is to show, are included in the definition of the progress element.

    +

    Need to detail the expected primitive appearance.

    + @@ -119783,17 +119899,27 @@ marquee { attribute is absent, and whose display size is greater than 1, is expected to render as a single-select list box.

    -

    When the element renders as a list box, it is expected to render as an - 'inline-block' box whose 'height' is the height necessary to contain as - many rows for items as given by the element's display - size, or four rows if the attribute is absent, and whose 'width' is the - width of the select's labels plus the width of a scrollbar.

    +

    When the element renders as a list box, it is a devolvable widget + expected to render as an 'inline-block' box whose 'height' is the height + necessary to contain as many rows for items as given by the element's display size, or four rows if the attribute is absent, and + whose 'width' is the width of the select's labels plus the + width of a scrollbar.

    A select element whose multiple attribute is absent, and whose display size is 1, is expected to render as an 'inline-block' one-line drop-down box whose width is the width of the select's labels.

    +

    When the element renders as a drop-down box, it is a devolvable + widget. Its appearance in the devolved state, as well as its appearance when the + computed value of the element's 'appearance' property is + 'menulist-button', is that of a drop-down box, including a "drop-down button", + but not necessarily rendered using a native control of the host operating system. In such a state, + CSS properties such as 'color', 'background-color', and 'border' should + not be disregarded (as is generally permissible when rendering an element according to its + native appearance).

    +

    In either case (list box or drop-down box), the element's items are expected to be the element's list of options, with the element's optgroup element children @@ -119823,6 +119949,9 @@ marquee { any alignment remains consistent whether the label is being displayed as part of the page or in a menu control.

    +

    Need to detail the expected native appearance and primitive + appearance.

    + @@ -119830,12 +119959,12 @@ marquee {

    The textarea element

    -

    The textarea element is expected to render as an 'inline-block' box - depicting a multiline text control. If this multiline text control provides a selection, then, - when the user changes the current selection, the user agent is expected to queue an element - task on the user interaction task source given the textarea - element to fire an event named select at the element, with the The textarea element is a devolvable widget expected to render as an + 'inline-block' box depicting a multiline text control. If this multiline text control + provides a selection, then, when the user changes the current selection, the user agent is + expected to queue an element task on the user interaction task source + given the textarea element to fire an event + named select at the element, with the bubbles attribute initialized to true.

    If the element has a cols attribute, and parsing that @@ -119875,6 +120004,9 @@ marquee { data-x="presentational hints">presentational hint setting the element's 'white-space' property to 'pre'.

    +

    Need to detail the expected native appearance and primitive + appearance.

    +