diff --git a/source b/source index cdf8c070818..7e420916488 100644 --- a/source +++ b/source @@ -3444,7 +3444,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
    • @@ -3487,9 +3503,27 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=CSSBG>

    CSS Backgrounds and Borders also defines the following border properties:

    @@ -3702,7 +3736,37 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute @@ -3807,9 +3871,17 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=CSSCASCADE>

    The CanvasRenderingContext2D object's use of fonts depends on the features @@ -118021,6 +118093,7 @@ input, select, button, textarea { text-transform: initial; text-indent: initial; text-shadow: initial; + appearance: auto; } input, select, textarea { @@ -118035,6 +118108,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; @@ -118724,13 +118801,192 @@ input[type=image i][align=bottom i], object[align=bottom i] {

    Widgets

    -

    Introduction

    +

    Native appearance

    + +

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

    -

    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.

    - + + + + +
    + +

    Determine what widget an HTML element can be

    + +

    The CSS Basic User Interface specification defines how to determine what + kind of widget an element can be. This section defines which elements match these + concepts for HTML.

    + +

    To determine if an element element can be a button, given + computedAppearance:

    + +
      +

    1. If element is a button element, then return true.

      2. + +
    2. +

      If element is an input element, then:

      + +
        +

      1. Let inputState be element's type attribute's state.

        2. + +

      2. If inputState is one of Button, Submit, Reset, or Color, then return true.

        3. +
      +
      3. + +

    3. Return false.

      4. +
    + +

    To determine if an element element can be a textfield, given + computedAppearance:

    + +
      +
    1. +

      If element is an input element, then:

      + +
        +

      1. Let inputState be element's type attribute's state.

        2. + +
      2. +

        If either of the following are true, then return true:

        + +
          +
        • inputState is one of Text, Telephone, URL, + E-mail, Password, Date, Month, + Week, Time, Local Date and Time, or Number; or
          • + +
        • inputState is Search and + computedAppearance is 'textfield'.
          • +
        +
        3. +
      +
      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a searchfield, given + computedAppearance:

    + +
      +

    1. If element is an input element, element's type attribute's state is Search, and computedAppearance is not + 'textfield', then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a slider-horizontal, given + computedAppearance:

    + +
      +

    1. If element is an input element and element's type attribute's state is Range, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a checkbox, given + computedAppearance:

    + +
      +

    1. If element is an input element and element's type attribute's state is Checkbox, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a radio, given + computedAppearance:

    + +
      +

    1. If element is an input element and element's type attribute's state is Radio, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a listbox, given + computedAppearance:

    + +
      +

    1. If element is a select element and element is a + list box, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a menulist, given + computedAppearance:

    + +
      +

    1. If element is a select element, element is a + drop-down box, and computedAppearance is not 'menulist-button', then + return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a menulist-button, given + computedAppearance:

    + +
      +

    1. If element is a select element, element is a + drop-down box, and computedAppearance is 'menulist-button', then return + true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a textarea, given + computedAppearance:

    + +
      +

    1. If element is a textarea element, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a progress-bar, given + computedAppearance:

    + +
      +

    1. If element is a progress element, then return true.

      2. + +

    2. Return false.

      3. +
    + +

    To determine if an element element can be a meter, given + computedAppearance:

    + +
      +

    1. If element is a meter element, then return true.

      2. + +

    2. Return false.

      3. +
    @@ -118801,6 +119057,10 @@ input[type=image i][align=bottom i], object[align=bottom i] { box's contents (if there is an anonymous button content box) are the child boxes the element's box would otherwise have.

    +

    Need to define expected rendering when the kind of widget + is none and button.

    + @@ -118900,6 +119160,10 @@ details[open] > summary { containers and support scrolling in the inline axis, but not the block axis.

    +

    Need to define expected rendering when the kind of widget + is none and textfield.

    + @@ -118934,6 +119198,10 @@ details[open] > summary {

    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 define expected rendering when the kind of widget + is none and textfield.

    + @@ -118959,6 +119227,9 @@ 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 define expected rendering when the kind of widget + is none and slider-horizontal.

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

    +

    Need to define expected rendering when the kind of widget + is none and button.

    + @@ -118992,10 +119267,18 @@ details[open] > summary { the Checkbox state is expected to render as an 'inline-block' box containing a single checkbox control, with no label.

    +

    Need to define expected rendering when the kind of widget + is none and checkbox.

    +

    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.

    +

    Need to define expected rendering when the kind of widget + is none and radio.

    + @@ -119031,6 +119314,10 @@ details[open] > summary { data-x="attr-input-type">type attribute in an implementation-defined (and probably locale-specific) fashion, if not.

    +

    Need to define expected rendering when the kind of widget + is none and button.

    + @@ -119194,8 +119481,13 @@ 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 + 

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

    The meter element whose kind is meter 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.

    When the element is wider than it is tall (or square), the depiction is expected to be of a @@ -119210,6 +119502,9 @@ marquee {

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

    +

    Need to define expected rendering when the kind of widget + is none.

    + @@ -119217,9 +119512,14 @@ 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 - 'vertical-align' of '-0.2em'.

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

    The progress element whose kind is progress-bar is expected to render as an + 'inline-block' box with a 'height' of '1em' and a 'width' + of '10em', and a 'vertical-align' of '-0.2em'.

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

    +

    Need to define expected rendering when the kind of widget + is none.

    + @@ -119302,6 +119605,12 @@ marquee { any alignment remains consistent whether the label is being displayed as part of the page or in a menu control.

    +

    Need to define expected rendering when the kind of widget + is none, button, menulist, and menulist-button.

    + @@ -119354,6 +119663,10 @@ marquee { data-x="presentational hints">presentational hint setting the element's 'white-space' property to 'pre'.

    +

    Need to define expected rendering when the kind of widget + is none and textarea

    +