From 86d1be8444a907f244cc913fe18a96960b280ffd Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Mon, 29 Oct 2018 20:58:02 +0100 Subject: [PATCH 01/12] Define button layout This specifies the layout model of buttons (the button element, the input element in the Button, Reset, Submit states, and the button part of input in the File Upload state). Fixes #1024. Fixes #2948. Part of #4081 and #4082. Tests: TODO --- source | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 80 insertions(+), 12 deletions(-) diff --git a/source b/source index b4b2752adb5..b03bb95298b 100644 --- a/source +++ b/source @@ -3632,6 +3632,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute specification:

@@ -112397,6 +112398,10 @@ input, select, option, optgroup, button, textarea { text-indent: initial; } +input:matches([type=reset i], [type=button i], [type=submit i]), button { + display: inline-block; +} + input:matches([type=radio i], [type=checkbox i], [type=reset i], [type=button i], [type=submit i], [type=search i]), select, button { box-sizing: border-box; @@ -113070,10 +113075,68 @@ input[type=image i][align=bottom i], object[align=bottom i] {
+

Button layout

+ +

Button layout is as follows:

+ +
    +
  • +

    The 'display' property is expected to act as follows:

    + +
      +

    • If the computed value of 'display' is 'inline-grid', 'grid', + 'inline-flex', or 'flex', then behave as the computed value.

      • + +

    • Otherwise, if the computed value of 'display' is inline-level, then + behave as 'inline-block'.

      • + +

    • Otherwise, behave as 'flow-root'.

      • +
    +
    • + +

  • The element is expected to establish a new formatting context for its contents. The type + of this formatting context is determined by its 'display' value, as usual.

    • + +

  • If the element is absolutely positioned, then for the purpose of the CSS visual + formatting model, act as if the element is a replaced element.

    • + +

  • The element's box shrink-wraps.

    • + +

  • For the purpose of the 'normal' keyword of the 'align-self' property, act + as if the element is a replaced element.

    • + +

  • If the computed value of the 'display' property is 'inline', then behave as + 'inline-block'.

    • + +
  • +

    If the element is an input element, or if it is a button element + and its computed style for 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', + then the element's box has a child anonymous button content box with the following + behaviors:

    + +
      +

    • It shrink-wraps.

      • + +

    • The 'display' property is set to 'flow-root'.

      • + +

    • If the box does not overflow in the horizontal axis, then it is centered + horizontally.

      • + +

    • If the box does not overflow in the vertical axis, then it is centered + vertically.

      • +
    + +

    Otherwise, there is no anonymous button content box.

    +
    • +
+ +

The button element

-

The button element expected to render as an 'inline-block' box - depicting a button whose contents are the contents of the element.

+

The button element expected to depict a button and to use button + layout whose anonymous button content box's contents (if there is an + anonymous button content box) are the child boxes the element's box would + otherwise have.

@@ -113219,10 +113282,13 @@ details[open] > summary { well

An input element whose type attribute is in - the Color state is expected to render as an - 'inline-block' box depicting a color well, which, when activated, provides the user - with a color picker (e.g. a color wheel or color palette) from which the color can be - changed.

+ the Color state is expected to depict a color well, + which, when activated, provides the user with a color picker (e.g. a color wheel or color + palette) from which the color can be changed. The element is expected to use button + layout, that has no child boxes of the anonymous button content box. The + anonymous button content box is expected to have a presentational hint setting the 'background-color' property to the + element's value.

Predefined suggested values (provided by the list attribute) are expected to be shown in the color picker interface, not on the color well @@ -113255,7 +113321,9 @@ details[open] > summary { 'inline-block' box containing a span of text giving the file name(s) of the selected files, if any, followed by a button that, when activated, provides the user with a file picker from which the selection can be - changed.

+ changed. The button is expected to use button layout and the contents of the + anonymous button content box are expected to be user-agent-defined (and possibly + locale-specific) text, for example "Choose file".

@@ -113267,11 +113335,11 @@ details[open] > summary {

An input element whose type attribute is in the Submit Button, Reset Button, or Button state is expected to render as an - 'inline-block' box depicting a button, about one line high, containing the contents - of the element's value attribute, if any, or text derived - from the element's type attribute in a user-agent-defined - (and probably locale-specific) fashion, if not.

+ data-x="attr-input-type-button">Button state is expected to depicting a button and use + button layout and the contents of the anonymous button content box + are expected to be the text of the element's value + attribute, if any, or text derived from the element's type + attribute in a user-agent-defined (and probably locale-specific) fashion, if not.

From 502b678829843f7a2c396a993ecbcebcd0448119 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 30 Oct 2018 13:33:31 +0100 Subject: [PATCH 02/12] Exclude button layout rule for display:none/contents --- source | 28 +++++++++++++++------------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/source b/source index b03bb95298b..0637e00c714 100644 --- a/source +++ b/source @@ -113110,9 +113110,9 @@ input[type=image i][align=bottom i], object[align=bottom i] {

  • If the element is an input element, or if it is a button element - and its computed style for 'display' is not 'inline-grid', 'grid', 'inline-flex', or 'flex', - then the element's box has a child anonymous button content box with the following - behaviors:

    + and its computed value for 'display' is not 'inline-grid', 'grid', 'inline-flex', + or 'flex', then the element's box has a child anonymous button content box with the + following behaviors:

    • It shrink-wraps.

      • @@ -113133,10 +113133,10 @@ input[type=image i][align=bottom i], object[align=bottom i] {

      The button element

      -

      The button element expected to depict a button and to use button - layout whose anonymous button content box's contents (if there is an - anonymous button content box) are the child boxes the element's box would - otherwise have.

      +

      The button element, when it generates a box (i.e., is not 'display: none' or + 'display: contents') is expected to depict a button and to use button layout whose + anonymous button content box's contents (if there is an anonymous button + content box) are the child boxes the element's box would otherwise have.

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

      The input element as a file upload control

      An input element whose type attribute is in - the File Upload state is expected to render as an + the File Upload state, when it generates a box (i.e., + is not 'display: none' or 'display: contents'), is expected to render as an 'inline-block' box containing a span of text giving the file name(s) of the selected files, if any, followed by a button that, when activated, provides the user with a file picker from which the selection can be @@ -113335,11 +113336,12 @@ details[open] > summary {

      An input element whose type attribute is in the Submit Button, Reset Button, or Button state is expected to depicting a button and use - button layout and the contents of the anonymous button content box - are expected to be the text of the element's value - attribute, if any, or text derived from the element's type - attribute in a user-agent-defined (and probably locale-specific) fashion, if not.

      + data-x="attr-input-type-button">Button state, when it generates a box (i.e., is not + 'display: none' or 'display: contents'), is expected to depict a button and use button + layout and the contents of the anonymous button content box are expected to + be the text of the element's value attribute, if any, or + text derived from the element's type attribute in a + user-agent-defined (and probably locale-specific) fashion, if not.

      From c1e1f6f9e7d83af5affca071775a98f4b6abc29d Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 30 Oct 2018 14:38:21 +0100 Subject: [PATCH 03/12] Allow opting out of button layout with appearance:none; display:inline Fixes https://github.com/w3c/csswg-drafts/issues/3226 --- source | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/source b/source index 0637e00c714..9908483245e 100644 --- a/source +++ b/source @@ -113134,9 +113134,15 @@ input[type=image i][align=bottom i], object[align=bottom i] {

      The button element

      The button element, when it generates a box (i.e., is not 'display: none' or - 'display: contents') is expected to depict a button and to use button layout whose - anonymous button content box's contents (if there is an anonymous button - content box) are the child boxes the element's box would otherwise have.

      + 'display: contents') and the conditions below do not both apply is expected to depict a button + and to use button layout whose anonymous button content box's contents + (if there is an anonymous button content box) are the child boxes the element's box + would otherwise have.

      + +
        +
      • The computed value of 'display' is 'inline'
        • +
      • The computed value of 'appearance' is 'none'
        • +
      From 63dc22ef0fb65840d42b3db93c037b61adde82c7 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Mon, 7 Jan 2019 17:14:50 +0100 Subject: [PATCH 04/12] Link to issue about web compat of display: inline --- source | 3 +++ 1 file changed, 3 insertions(+) diff --git a/source b/source index 9908483245e..6d0ff01d32a 100644 --- a/source +++ b/source @@ -113144,6 +113144,9 @@ input[type=image i][align=bottom i], object[align=bottom i] {
    • The computed value of 'appearance' is 'none'
    +

    It is not yet known if these conditions are web-compatible. See issue w3c/csswg-drafts #3226.

    + From b174eaf924a25de72a21eca4fdf2bcafed8a1d3d Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 10 Jan 2019 11:01:37 +0100 Subject: [PATCH 05/12] Make input type=color inline-block again --- source | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source b/source index 6d0ff01d32a..c9f2f162ce4 100644 --- a/source +++ b/source @@ -112398,7 +112398,7 @@ input, select, option, optgroup, button, textarea { text-indent: initial; } -input:matches([type=reset i], [type=button i], [type=submit i]), button { +input:matches([type=reset i], [type=button i], [type=submit i], [type=color i]), button { display: inline-block; } From 107faee29ddf762cb38654cf9f8dea90d1bbdbc8 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Thu, 10 Jan 2019 11:02:00 +0100 Subject: [PATCH 06/12] Make input type=color have box-sizing: border-box This matches WebKit/Chromium and is consistent with other buttons. Fixes #4281. --- source | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source b/source index c9f2f162ce4..6c914aba88e 100644 --- a/source +++ b/source @@ -112403,7 +112403,7 @@ input:matches([type=reset i], [type=button i], [type=submit i], [type=color i]), } input:matches([type=radio i], [type=checkbox i], [type=reset i], [type=button i], -[type=submit i], [type=search i]), select, button { +[type=submit i], [type=color i], [type=search i]), select, button { box-sizing: border-box; } From 88869d5d60a0a4eadbaeadf71c06fde92f345beb Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Fri, 11 Jan 2019 19:31:47 +0100 Subject: [PATCH 07/12] Remove a duplicate requirement --- source | 3 --- 1 file changed, 3 deletions(-) diff --git a/source b/source index 6c914aba88e..4b681470adb 100644 --- a/source +++ b/source @@ -113105,9 +113105,6 @@ input[type=image i][align=bottom i], object[align=bottom i] {

  • For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.

    • -

  • If the computed value of the 'display' property is 'inline', then behave as - 'inline-block'.

    • -

  • If the element is an input element, or if it is a button element and its computed value for 'display' is not 'inline-grid', 'grid', 'inline-flex', From 685252a60e182ee380f70d8c40c9b640e95c8643 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 16 Jan 2019 11:56:43 +0100 Subject: [PATCH 08/12] The anonymous button content box shouldn't shrink-wrap --- source | 2 -- 1 file changed, 2 deletions(-) diff --git a/source b/source index 4b681470adb..0caa5e03b3a 100644 --- a/source +++ b/source @@ -113112,8 +113112,6 @@ input[type=image i][align=bottom i], object[align=bottom i] { following behaviors:

      -

    • It shrink-wraps.

      • -

    • The 'display' property is set to 'flow-root'.

    • If the box does not overflow in the horizontal axis, then it is centered From b8cfad9789930d54daf6387f75faa10d3b3ba674 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Wed, 30 Jan 2019 18:13:38 +0100 Subject: [PATCH 09/12] Remove display: inline; appearance: none; proposal --- source | 15 +++------------ 1 file changed, 3 insertions(+), 12 deletions(-) diff --git a/source b/source index 0caa5e03b3a..ae025dd3ed5 100644 --- a/source +++ b/source @@ -113129,18 +113129,9 @@ input[type=image i][align=bottom i], object[align=bottom i] {

      The button element

      The button element, when it generates a box (i.e., is not 'display: none' or - 'display: contents') and the conditions below do not both apply is expected to depict a button - and to use button layout whose anonymous button content box's contents - (if there is an anonymous button content box) are the child boxes the element's box - would otherwise have.

      - -
        -
      • The computed value of 'display' is 'inline'
        • -
      • The computed value of 'appearance' is 'none'
        • -
      - -

      It is not yet known if these conditions are web-compatible. See issue w3c/csswg-drafts #3226.

      + 'display: contents') is expected to depict a button and to use button layout whose + anonymous button content box's contents (if there is an anonymous button + content box) are the child boxes the element's box would otherwise have.

      From 3c763998659de5910a81f021b1a35e1b3519f803 Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Mon, 13 May 2019 16:48:03 +0200 Subject: [PATCH 10/12] Address domenic's feedback --- source | 68 ++++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 47 insertions(+), 21 deletions(-) diff --git a/source b/source index ae025dd3ed5..c8bd9fec3c1 100644 --- a/source +++ b/source @@ -3491,7 +3491,6 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
    • line box
    • out-of-flow
    • in-flow
      • -
    • replaced element
    • intrinsic dimensions
    • content area
    • content box
      • @@ -3579,6 +3578,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute 'padding-inline-end' properties
    • The 'border-block-start-width' property
    • The 'block-size' property
      • +
    • The 'inline-size' property

    The following terms and features are defined in the CSS Color specification: @@ -3617,17 +3617,27 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute spec=CSSALIGN>

      -
    • The 'align-content' property
      • -
    • The 'align-items' property
      • -
    • The 'justify-self' property
      • -
    • The 'justify-content' property
      • -
    • The 'justify-items' property
      • +
    • The 'align-content' property
      • +
    • The 'align-items' property
      • +
    • The 'justify-self' property
      • +
    • The 'justify-content' property
      • +
    • The 'justify-items' property
    -

    The term block-level is defined in +

    The following terms and features are defined in theis defined in the CSS Display specification.

    +
      +
    • outer display type
      • +
    • block-level
      • +
    • block container
      • +
    • formatting context
      • +
    • block formatting context
      • +
    • inline formatting context
      • +
    • absolutely positioned
      • +
    • replaced element
      • +
    +

    The following features are defined in the CSS Flexible Box Layout specification:

    @@ -3661,6 +3671,13 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'grid-template-rows' property
    • +

    The following terms and features are defined in the CSS Intrinsic & Extrinsic Sizing Module specification: +

    + +
      +
    • fit-content inline size
      • +
    +

    The 'list-style-type' property is defined in the CSS Lists and Counters specification.

      -

    • The element is expected to establish a new block formatting context.

      • +

    • The element is expected to establish a new block formatting context.

    • The 'display' property is expected to act as follows:

        -

      • If the computed value of 'display' is inline-level, then behave as - 'inline-block'.

        • +

      • If the computed value of 'display' is a value such that the outer + display type is 'inline', then behave as 'inline-block'.

      • Otherwise, behave as 'flow-root'.

      @@ -112595,8 +112612,9 @@ legend[align=right i] { follows:

        -

      • The element is expected to establish a new formatting context for its contents. The type - of this formatting context is determined by its 'display' value, as usual.

        • +

      • The element is expected to establish a new formatting context for its + contents. The type of this formatting context is determined by its + 'display' value, as usual.

      • The 'display' property is expected to behave as if its computed value was @@ -113087,20 +113105,23 @@ input[type=image i][align=bottom i], object[align=bottom i] {

      • If the computed value of 'display' is 'inline-grid', 'grid', 'inline-flex', or 'flex', then behave as the computed value.

        • -

      • Otherwise, if the computed value of 'display' is inline-level, then - behave as 'inline-block'.

        • +

      • Otherwise, if the computed value of 'display' is a value such that the + outer display type is 'inline', then behave as 'inline-block'.

      • Otherwise, behave as 'flow-root'.

      • -

    • The element is expected to establish a new formatting context for its contents. The type - of this formatting context is determined by its 'display' value, as usual.

      • +

    • The element is expected to establish a new formatting context for its + contents. The type of this formatting context is determined by its 'display' value, + as usual.

      • -

    • If the element is absolutely positioned, then for the purpose of the CSS visual - formatting model, act as if the element is a replaced element.

      • +

    • If the element is absolutely positioned, then for the purpose of the + CSS visual formatting model, act as if + the element is a replaced element.

      • -

    • The element's box shrink-wraps.

      • +

    • If 'inline-size' is 'auto', then the used value is the + fit-content inline size.

    • For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.

      • @@ -113112,7 +113133,9 @@ input[type=image i][align=bottom i], object[align=bottom i] { following behaviors:

        -

      • The 'display' property is set to 'flow-root'.

        • +

      • The box is a block-level block container that establishes a + new block formatting context (i.e., 'display' is + 'flow-root').

      • If the box does not overflow in the horizontal axis, then it is centered horizontally.

        • @@ -121124,6 +121147,9 @@ INSERT INTERFACES HERE
        [CSSRUBY]
        CSS3 Ruby Module, R. Ishida. W3C.
        +
        [CSSSIZING]
        +
        CSS Intrinsic & Extrinsic Sizing Module, T. Atkins, E. Etemad. W3C.
        +
        [CSSTRANSITIONS]
        (Non-normative) CSS Transitions, D. Jackson, D. Hyatt, C. Marrin, L. Baron. W3C.
        From ae59e6d89b308729db3180ccb8da24a6f09ad56f Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Mon, 13 May 2019 16:56:18 +0200 Subject: [PATCH 11/12] Add 'when it generates a box' to color wells --- source | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/source b/source index c8bd9fec3c1..8baca0c3d56 100644 --- a/source +++ b/source @@ -113302,11 +113302,12 @@ details[open] > summary {

        An input element whose type attribute is in the Color state is expected to depict a color well, which, when activated, provides the user with a color picker (e.g. a color wheel or color - palette) from which the color can be changed. The element is expected to use button - layout, that has no child boxes of the anonymous button content box. The - anonymous button content box is expected to have a presentational hint setting the 'background-color' property to the - element's value.

        + palette) from which the color can be changed. The element, when it generates a box (i.e., + is not 'display: none' or 'display: contents'), is expected to use button layout, + that has no child boxes of the anonymous button content box. The anonymous + button content box is expected to have a presentational + hint setting the 'background-color' property to the element's value.

        Predefined suggested values (provided by the list attribute) are expected to be shown in the color picker interface, not on the color well From 2c45e0d6f99712bc7b542f5a2b525d3b5936e50c Mon Sep 17 00:00:00 2001 From: Simon Pieters Date: Tue, 14 May 2019 01:49:49 +0200 Subject: [PATCH 12/12] Clarify that computed value is checked --- source | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/source b/source index 8baca0c3d56..d48c746b885 100644 --- a/source +++ b/source @@ -112623,7 +112623,8 @@ legend[align=right i] {

        This does not change the computed value.

        -

      • In the absence of an explicit inline size, the box should shrink-wrap.

        • +

      • If the computed value of 'inline-size' is 'auto', then the + used value is the fit-content inline size.

      • The element is expected to be positioned in the inline direction as is normal for blocks (e.g., taking into account margins and the 'justify-self' @@ -113120,8 +113121,8 @@ input[type=image i][align=bottom i], object[align=bottom i] { CSS visual formatting model, act as if the element is a replaced element.

        • -

      • If 'inline-size' is 'auto', then the used value is the - fit-content inline size.

        • +

      • If the computed value of 'inline-size' is 'auto', then the + used value is the fit-content inline size.

      • For the purpose of the 'normal' keyword of the 'align-self' property, act as if the element is a replaced element.