From 842c489e83744fda2df403d6208149c9cc3a3824 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Wed, 7 Feb 2024 14:04:24 -0800 Subject: [PATCH 01/14] Add the :open and :closed pseudo-selectors These pseudo-selectors are defined in CSS here: https://drafts.csswg.org/selectors-4/#open-state --- source | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/source b/source index d373caac6c9..fb119a709be 100644 --- a/source +++ b/source @@ -74232,6 +74232,56 @@ Demos:

The :volume-locked pseudo-class must match all media elements when the user agent's volume locked is true.

+ +
:open
+
+

The :open pseudo-class must match any + element that matches the open selector.

+ +

To determine if an Element element matches the open + selector:

+ +
    +
  1. +

    If element is a details or dialog element:

    + +
      +

    1. Return true if element has the open + attribute, otherwise false.

      2. +
    +
    2. + +

  2. If element is a select element and element is being + rendered as a button with a popup and the popup is open, then return true.

    3. + +

  3. Return false.

    4. +
+
+ +
:closed
+
+

The :closed pseudo-class must match any + element that matches the closed selector.

+ +

To determine if an Element element matches the closed + selector:

+ +
    +
  1. +

    If element is a details or dialog element:

    + +
      +

    1. Return false if element has the open + attribute, otherwise true.

      2. +
    +
    2. + +

  2. If element is a select element and element is being + rendered as a button with a popup and the popup is closed, then return true.

    3. + +

  3. Return false.

    4. +
+

This specification does not define when an element matches the Date: Fri, 9 Feb 2024 11:57:09 -0800 Subject: [PATCH 02/14] use drop-down box --- source | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source b/source index fb119a709be..a19edf1dc81 100644 --- a/source +++ b/source @@ -74251,8 +74251,8 @@ Demos: -

  • If element is a select element and element is being - rendered as a button with a popup and the popup is open, then return true.

    • +

  • If element is a select element and element is a + drop-down box and the drop-down is open, then return true.

  • Return false.

    • @@ -74276,8 +74276,8 @@ Demos: -

  • If element is a select element and element is being - rendered as a button with a popup and the popup is closed, then return true.

    • +

  • If element is a select element and element is a + drop-down box and the drop-down is closed, then return true.

  • Return false.

    • From 77fe1ecc9009d334953803531731ba314c88a390 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Fri, 9 Feb 2024 12:11:32 -0800 Subject: [PATCH 03/14] rewrite matching algorithm --- source | 49 ++++++++++++++++++------------------------------- 1 file changed, 18 insertions(+), 31 deletions(-) diff --git a/source b/source index a19edf1dc81..022fbf17eee 100644 --- a/source +++ b/source @@ -74235,51 +74235,38 @@ Demos:
    :open
    -

    The :open pseudo-class must match any - element that matches the open selector.

    - -

    To determine if an Element element matches the open - selector:

    +

    An Element matches the :open + pseudo-class if it matches one of the following:

      -
    1. -

      If element is a details or dialog element:

      +

    2. A details element which has the open attribute.

      3. -
        -

      1. Return true if element has the open - attribute, otherwise false.

        2. -
      - - -

    3. If element is a select element and element is a - drop-down box and the drop-down is open, then return true.

      4. +

    4. A dialog element which has the open + attribute.

      5. -

    5. Return false.

      6. +

    6. A select element which is a drop-down box whose drop-down box + is open.

    :closed
    -

    The :closed pseudo-class must match any - element that matches the closed selector.

    +

    An Element matches the :closed + pseudo-class if it matches one of the following:

    -

    To determine if an Element element matches the closed - selector:

    +

    An Element element matches the closed selector that matches + one of the following:

      -
    1. -

      If element is a details or dialog element:

      - -
        -

      1. Return false if element has the open - attribute, otherwise true.

        2. -
      -
      2. +

    2. A details element which does not have the open attribute.

      3. -

    3. If element is a select element and element is a - drop-down box and the drop-down is closed, then return true.

      4. +

    4. A dialog element which does not have the open attribute.

      5. -

    5. Return false.

      6. +

    6. A select element which is a drop-down box whose drop-down box + is closed.

    From c23f7f9a0ef87e9314799508087c27970acfd489 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 8 Oct 2024 15:15:37 -0700 Subject: [PATCH 04/14] make :closed match all elements --- source | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/source b/source index a179a95594c..13b271374f7 100644 --- a/source +++ b/source @@ -74560,6 +74560,9 @@ Demos:

  • A select element which is a drop-down box whose drop-down box is open.

    • + +

  • An input element which supports a picker popup and whose picker popup is + open.

    • @@ -74578,7 +74581,10 @@ Demos:

  • A dialog element which does not have the open attribute.

    • -

  • A select element which is a drop-down box whose drop-down box +

  • A select element which is not a drop-down box or whose + drop-down box is closed.

    • + +

  • An input element which doesn't support a picker popup or whose picker popup is closed.

    • From 3bedf6eb7b44d8f80f2c732a154bc75e796459b5 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 26 Nov 2024 11:30:38 -0800 Subject: [PATCH 05/14] remove :closed --- source | 23 ----------------------- 1 file changed, 23 deletions(-) diff --git a/source b/source index ec5ee3b4ac8..356f98cea52 100644 --- a/source +++ b/source @@ -74815,29 +74815,6 @@ Demos: open.

    - -
    :closed
    -
    -

    An Element matches the :closed - pseudo-class if it matches one of the following:

    - -

    An Element element matches the closed selector that matches - one of the following:

    - -
      -

    1. A details element which does not have the open attribute.

      2. - -

    2. A dialog element which does not have the open attribute.

      3. - -

    3. A select element which is not a drop-down box or whose - drop-down box is closed.

      4. - -

    4. An input element which doesn't support a picker popup or whose picker popup - is closed.

      5. -
    -

    This specification does not define when an element matches the Date: Tue, 26 Nov 2024 12:39:32 -0800 Subject: [PATCH 06/14] add shared picker dfn --- source | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/source b/source index 356f98cea52..91fded64843 100644 --- a/source +++ b/source @@ -48169,6 +48169,11 @@ interface HTMLInputElement : HTMLElement { data-x="attr-input-type-checkbox">Checkbox state) stop an input element from being mutable.

    +

    Some states of the type attribute support a picker, which is a popup that allows the user to + choose a value. Which states support a picker is up to + the user agent.

    +

    The cloning steps for input elements must propagate the value, dirty value flag,

    input.showPicker()
    -

    Shows any applicable picker UI for input, so that the user can select a value. (If - no picker UI is implemented for the given control, then this method does nothing.)

    +

    If input does not support a picker, + this method does nothing.

    + +

    Shows any applicable picker UI for input, so that the user can select a value.

    Throws an "InvalidStateError" DOMException if input is not mutable.

    @@ -74811,8 +74818,8 @@ Demos:

  • A select element which is a drop-down box whose drop-down box is open.

    • -

  • An input element which supports a picker popup and whose picker popup is - open.

    • +

  • An input element which supports a + picker popup and whose picker popup is open.

    • From 711406192956b7e1f401409437a0d60ce81b0f52 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Tue, 26 Nov 2024 12:43:47 -0800 Subject: [PATCH 07/14] update another reference --- source | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source b/source index 91fded64843..480e1081081 100644 --- a/source +++ b/source @@ -53017,7 +53017,8 @@ You cannot submit this form when the field is incorrect.

  • Otherwise, the user agent should show any relevant user interface for selecting a value for element, in the way it normally would when the user interacts with the control. (If - no such UI applies to element, then this step does nothing.)

    + element does not support a picker, then + this step does nothing.)

    If such a user interface is shown, it must respect the requirements stated in the relevant parts of the specification for how element behaves given its Date: Wed, 4 Dec 2024 11:23:37 -0800 Subject: [PATCH 08/14] resolve comments --- source | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/source b/source index 480e1081081..7148e326278 100644 --- a/source +++ b/source @@ -48169,10 +48169,12 @@ interface HTMLInputElement : HTMLElement { data-x="attr-input-type-checkbox">Checkbox state) stop an input element from being mutable.

    -

    Some states of the type attribute support a picker, which is a popup that allows the user to - choose a value. Which states support a picker is up to - the user agent.

    +

    The input element can support a picker. A + picker is a popup that allows the end user to choose a value. Whether an input + element supports a picker depends on the type attribute + state and implementation-defined behavior. An input element must support a picker + when its type attribute is in the File Upload state.

    The cloning steps for input elements must propagate the value,

  • An input element which supports a - picker popup and whose picker popup is open.

    • + picker and whose picker is open.

    From dd0c6242e71a3adf2945e940f05f722eeb1ed046 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 5 Dec 2024 14:35:14 -0800 Subject: [PATCH 09/14] move paragraph below note --- source | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source b/source index a697e0f22ba..b8246db05b1 100644 --- a/source +++ b/source @@ -48198,13 +48198,6 @@ interface HTMLInputElement : HTMLElement { data-x="attr-input-type-checkbox">Checkbox state) stop an input element from being mutable.

    -

    The input element can support a picker. A - picker is a popup that allows the end user to choose a value. Whether an input - element supports a picker depends on the type attribute - state and implementation-defined behavior. An input element must support a picker - when its type attribute is in the File Upload state.

    -

    The cloning steps for input elements must propagate the value, dirty value flag, +

    The input element can support a picker. A + picker is a popup that allows the end user to choose a value. Whether an input + element supports a picker depends on the type attribute + state and implementation-defined behavior. An input element must support a picker + when its type attribute is in the File Upload state.

    + From f0488e8702514c96a0ca87bd61fa7d2e306a2c34 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 5 Dec 2024 14:35:44 -0800 Subject: [PATCH 10/14] Revert "move paragraph below note" This reverts commit dd0c6242e71a3adf2945e940f05f722eeb1ed046. --- source | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source b/source index b8246db05b1..a697e0f22ba 100644 --- a/source +++ b/source @@ -48198,6 +48198,13 @@ interface HTMLInputElement : HTMLElement { data-x="attr-input-type-checkbox">Checkbox state) stop an input element from being mutable.

    +

    The input element can support a picker. A + picker is a popup that allows the end user to choose a value. Whether an input + element supports a picker depends on the type attribute + state and implementation-defined behavior. An input element must support a picker + when its type attribute is in the File Upload state.

    +

    The cloning steps for input elements must propagate the value, dirty value flag, -

    The input element can support a picker. A - picker is a popup that allows the end user to choose a value. Whether an input - element supports a picker depends on the type attribute - state and implementation-defined behavior. An input element must support a picker - when its type attribute is in the File Upload state.

    - From da44f3632d2b32a36fd1803d4c9f423e1d2e16e1 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Thu, 5 Dec 2024 14:36:23 -0800 Subject: [PATCH 11/14] move note under new paragraph --- source | 54 +++++++++++++++++++++++++++--------------------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/source b/source index a697e0f22ba..9cc81e378ed 100644 --- a/source +++ b/source @@ -48205,6 +48205,33 @@ interface HTMLInputElement : HTMLElement { when its type attribute is in the File Upload state.

    +
    +

    As of the time of this writing, typical browser implementations show such picker UI for:

    + +
      +

    • input elements whose type + attributes are in the Date, Month, Week, + Time, Local Date and Time, and Color states;

      • + +

    • input elements in various states that have a suggestions source element;

      • + +

    • input elements whose type attribute + is in the File Upload state (although those are + handled via the special case above, instead of by this step); and

      • + +

    • select elements.

      • +
    + +

    However, the intent of this step is to trigger any picker UI implementation. So + for example, if a user agent implemented a password picker UI for the Password state, then this method would be expected to + show that picker UI when called on a password input.

    +
    +

    The cloning steps for input elements must propagate the value, dirty value flag, firing either input and change events, or a cancel event.)

    - -
    -

    As of the time of this writing, typical browser implementations show such picker UI for:

    - -
      -

    • input elements whose type - attributes are in the Date, Month, Week, - Time, Local Date and Time, and Color states;

      • - -

    • input elements in various states that have a suggestions source element;

      • - -

    • input elements whose type attribute - is in the File Upload state (although those are - handled via the special case above, instead of by this step); and

      • - -

    • select elements.

      • -
    - -

    However, the intent of this step is to trigger any picker UI implementation. So - for example, if a user agent implemented a password picker UI for the Password state, then this method would be expected to - show that picker UI when called on a password input.

    -
    From e17246bf3b2d4d0cc35a8328f815629f5033f449 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Fri, 6 Dec 2024 09:09:36 +0100 Subject: [PATCH 12/14] nits --- source | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/source b/source index 9cc81e378ed..9eb28e333a5 100644 --- a/source +++ b/source @@ -48201,8 +48201,8 @@ interface HTMLInputElement : HTMLElement {

    The input element can support a picker. A picker is a popup that allows the end user to choose a value. Whether an input element supports a picker depends on the type attribute - state and implementation-defined behavior. An input element must support a picker - when its type attribute is in the implementation-defined behavior. An input element must support + a picker when its type attribute is in the File Upload state.

    @@ -53195,6 +53195,9 @@ You cannot submit this form when the field is incorrect.

  • Consume user activation given element's relevant global object.

    • +

  • If element does not support a + picker, then return.

    • +

  • If element is an input element and element's type attribute is in the

  • -

    Otherwise, the user agent should show any relevant user interface for selecting a value for - element, in the way it normally would when the user interacts with the control. (If - element does not support a picker, then - this step does nothing.)

    +

    Otherwise, the user agent should show the relevant user interface for selecting a value for + element, in the way it normally would when the user interacts with the control.

    -

    If such a user interface is shown, it must respect the requirements stated in the relevant +

    When showing such a user interface, it must respect the requirements stated in the relevant parts of the specification for how element behaves given its type attribute state. (For example, various sections describe restrictions on the resulting value string.)

    From a075bd8a4adbd8d281d3f975ae7cbdec81762c09 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Mon, 9 Dec 2024 12:24:39 -0800 Subject: [PATCH 13/14] address comments --- source | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/source b/source index 9eb28e333a5..c8caba5038e 100644 --- a/source +++ b/source @@ -48199,11 +48199,12 @@ interface HTMLInputElement : HTMLElement { being mutable.

    The input element can support a picker. A - picker is a popup that allows the end user to choose a value. Whether an input - element supports a picker depends on the type attribute - state and implementation-defined behavior. An input element must support - a picker when its type attribute is in the File Upload state.

    + picker is a user interface element that allows the end user to choose a value. Whether an + input element supports a picker depends on the type attribute state and implementation-defined + behavior. An input element must support a picker when its type attribute is in the File + Upload state.

    As of the time of this writing, typical browser implementations show such picker UI for:

    @@ -48220,16 +48221,10 @@ interface HTMLInputElement : HTMLElement { data-x="concept-input-list">suggestions source element;

  • input elements whose type attribute - is in the File Upload state (although those are - handled via the special case above, instead of by this step); and

    • + is in the File Upload state; and

  • select elements.

    • - -

    However, the intent of this step is to trigger any picker UI implementation. So - for example, if a user agent implemented a password picker UI for the Password state, then this method would be expected to - show that picker UI when called on a password input.

    The cloning steps for input elements @@ -52861,11 +52856,11 @@ You cannot submit this form when the field is incorrect.

    input.showPicker()
    +

    Shows any applicable picker UI for input, so that the user can select a value.

    +

    If input does not support a picker, this method does nothing.

    -

    Shows any applicable picker UI for input, so that the user can select a value.

    -

    Throws an "InvalidStateError" DOMException if input is not mutable.

    @@ -75083,10 +75078,10 @@ Demos:
    :open
    -

    An Element matches the :open - pseudo-class if it matches one of the following:

    +

    The :open pseudo-class must any + Element falling into one of the following categories:

    -
      +

      • A details element which has the open attribute.

        • @@ -75098,7 +75093,7 @@ Demos:

      • An input element which supports a picker and whose picker is open.

        • -
    +
    From 5eb02b11cc9c843f78aa4dd90f0c620ceaa2c941 Mon Sep 17 00:00:00 2001 From: Domenic Denicola Date: Tue, 10 Dec 2024 11:28:04 +0900 Subject: [PATCH 14/14] More consistency tweaks --- source | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/source b/source index c8caba5038e..7e485fe18cf 100644 --- a/source +++ b/source @@ -75078,21 +75078,21 @@ Demos:
    :open
    -

    The :open pseudo-class must any - Element falling into one of the following categories:

    +

    The :open pseudo-class must match any + element falling into one of the following categories:

      -

    • A details element which has the open attribute.

      • +

    • details elements that have an open + attribute

      • -

    • A dialog element which has the open - attribute.

      • +

    • dialog elements that have an open + attribute

      • -

    • A select element which is a drop-down box whose drop-down box - is open.

      • +

    • select elements that are a drop-down box and whose drop-down + boxes are open

      • -

    • An input element which supports a - picker and whose picker is open.

      • +

    • input elements that support a + picker and whose pickers are open