Skip to content

Add the :open pseudo-class #10126

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 17 commits into from
Dec 10, 2024
Merged
Changes from 15 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 64 additions & 33 deletions source
Original file line number Diff line number Diff line change
Expand Up @@ -48198,6 +48198,40 @@ 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
data-x="attr-input-type-file">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,
    data-x="attr-input-type-month">Month, Week,
    Time,
    data-x="attr-input-type-datetime-local">Local Date and Time, and
    data-x="attr-input-type-color">Color states;


  • input elements in various states that have a

  • 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


  • 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
    data-x="attr-input-type-password">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,
    data-x="concept-fe-dirty">dirty value flag,
    Expand Down Expand Up @@ -52827,8 +52861,10 @@ 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

    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.

    Expand Down Expand Up @@ -53159,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

    data-x="attr-input-type">type attribute is in the
    Expand Down Expand Up @@ -53199,11 +53238,10 @@ 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.)

    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
    data-x="attr-input-type">type attribute state. (For example, various sections describe
    restrictions on the resulting value string.)

    Expand All @@ -53213,33 +53251,6 @@ You cannot submit this form when the field is incorrect.
    firing either input and
    data-x="event-change">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,
      data-x="attr-input-type-month">Month, Week,
      Time,
      data-x="attr-input-type-datetime-local">Local Date and Time, and
      data-x="attr-input-type-color">Color states;


    • input elements in various states that have a

    • 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


    • 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
      data-x="attr-input-type-password">Password state, then this method would be expected to
      show that picker UI when called on a password input.


      Expand Down Expand Up @@ -75069,6 +75080,26 @@ Demos:

      The :volume-locked pseudo-class

      must match all media elements when the user agent's
      volume locked is true.


      :open

      An Element matches the :open

      pseudo-class if it matches one of the following:


      1. A details element which has the

      2. data-x="attr-details-open">open attribute.


      3. A dialog element which has the open

      4. attribute.


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

      6. is open.


      7. An input element which supports a

      8. picker and whose picker is open.


        This specification does not define when an element matches the

        Expand Down