From 23295b0a9f138cc2749cd191cf9a7c06ecb1d1a4 Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Wed, 17 Aug 2022 19:14:52 -0700 Subject: [PATCH] Add popup attribute https://github.com/whatwg/html/issues/7785 --- source | 1388 ++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 1360 insertions(+), 28 deletions(-) diff --git a/source b/source index 65fcc08c6a6..000c9e40264 100644 --- a/source +++ b/source @@ -1823,6 +1823,11 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute element.

+ +

  • If removedNode is not in the no pop-up + state, then run the hide pop-up algorithm with element set to + removedNode, focus previous element set to false, and hide immediately set to + true.

    • A preventDefault() method

  • id attribute
  • setAttribute() method
    • +
  • getAttribute() method
  • textContent attribute
  • The tree, shadow tree, and node tree concepts
    • @@ -3184,6 +3190,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • click event
  • contextmenu event
  • dblclick event
    • +
  • focusin event
  • input event
  • mousedown event
  • mouseenter event
    • @@ -3792,10 +3799,16 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
  • The 'user-select' property
    • -

    The algorithm to update - animations and send events is defined in Web Animations. .

    +

    The following features and terms are defined in the Web Animations + specification:

    + +

    Implementations that support scripting must support the CSS Object Model. The following features and terms are defined in the CSSOM specifications: @@ -10001,6 +10014,21 @@ partial interface Document {

    The Document has a navigation id, which is a navigation id or null.

    +

    The Document has a pop-up stack, which is a stack, + initially empty.

    + +

    The Document has a pop-up hint showing, which is an + HTMLElement, initially null.

    + +

    The Document has pop-ups waiting to hide, which is a set, + initially empty.

    + +

    The Document has all open pop-ups, which is a set, + initially empty.

    + +

    The Document has a pop-up mousedown target, which is an + Element, initially null.

    +

    The DocumentOrShadowRoot interface

    DOM defines the outerText; ElementInternals attachInternals(); + + // The Pop-up API + [RaisesException] void showPopUp(); + [RaisesException] void hidePopUp(); + [Unscopable,CEReactions,Reflect,ReflectOnly=("auto","hint","manual"),ReflectEmpty="auto",ReflectInvalid] attribute DOMString? popUp; + [CEReactions,Reflect] attribute boolean defaultOpen; + [CEReactions,Reflect] attribute DOMString? popUpToggleTarget; + [CEReactions,Reflect] attribute DOMString? popUpHideTarget; + [CEReactions,Reflect] attribute DOMString? popUpShowTarget; }; HTMLElement includes GlobalEventHandlers; @@ -46378,6 +46415,9 @@ interface HTMLInputElement : HTMLElement {

  • Run this element's input activation behavior, if any, and do nothing otherwise.

    • + +

  • Run the pop-up target attribute activation behavior on + this.

    • Recall that an element's activation behavior runs for both @@ -51432,13 +51472,11 @@ interface HTMLButtonElement : HTMLElement {

  • If element is disabled, then return.

    • -

  • If element does not have a form owner, then return.

    • -

  • If element's node document is not fully active, then return.

  • -

    Switch on element's type attribute's state:

    +

    If element has a form owner then switch on element's type attribute's state:

    Submit Button
    @@ -51453,6 +51491,9 @@ interface HTMLButtonElement : HTMLElement {

    Do nothing.

    • + +

  • Run the pop-up target attribute activation behavior on + this.

    • @@ -59316,19 +59357,19 @@ interface HTMLDialogElement : HTMLElement { modifications to the focused area of the document will apply.

    -

  • Let topDocument be the active document of control's +

  • Let top document be the active document of control's node document's browsing context's top-level browsing context.

  • If control's node document's origin is not the same - as the origin of topDocument, then + as the origin of top document, then return.

    • -

  • Empty topDocument's +

  • Empty top document's autofocus candidates.

    • -

  • Set topDocument's autofocus processed flag to true.

    • +

  • Set top document's autofocus processed flag to true.

    • If at any time a dialog element is :top-layer +

    +

    The :top-layer pseudo-class is defined + to match an open pop-up element.

    +
    +
    :enabled

    The :enabled pseudo-class must match any @@ -77070,15 +77117,15 @@ END:VCARD

  • If old focus target is not a focusable area, then return.

    • -

  • Let topDocument be old chain's last entry.

    • +

  • Let top document be old chain's last entry.

  • -

    If topDocument's browsing context has +

    If top document's browsing context has system focus, then run the focusing steps - for topDocument's viewport.

    + for top document's viewport.

    Otherwise, apply any relevant platform-specific conventions for removing system focus from topDocument's system focus from top document's browsing context, and run the focus update steps with old chain, an empty list, and null respectively.

    • @@ -77660,6 +77707,7 @@ END:VCARD +

    The autofocus attribute

    @@ -77711,42 +77759,42 @@ END:VCARD origin with target's origin, then return.

    -

  • Let topDocument be the active document of target's +

  • Let top document be the active document of target's browsing context's top-level browsing context.

    • -

  • If topDocument's autofocus processed flag is false, then - remove the element from topDocument's +

  • If top document's autofocus processed flag is false, then + remove the element from top document's autofocus candidates, and append the element to - topDocument's autofocus candidates.

    • + top document's autofocus candidates.

    We do not check if an element is a focusable area before storing it in the autofocus candidates list, because even if it is not a focusable area when it is inserted, it could become one by the time flush autofocus candidates sees it.

    -

    To flush autofocus candidates for a document topDocument, run these +

    To flush autofocus candidates for a document top document, run these steps:

      -

    1. If topDocument's autofocus processed flag is true, then +

    2. If top document's autofocus processed flag is true, then return.

      3. -

    3. Let candidates be topDocument's autofocus +

    4. Let candidates be top document's autofocus candidates.

    5. If candidates is empty, then return.

    6. -

      If topDocument's focused area - is not topDocument itself, or topDocument has non-null +

      If top document's focused area + is not top document itself, or top document has non-null target element, then:

      1. Empty candidates.

        2. -

      2. Set topDocument's autofocus processed flag to true.

        3. +

      3. Set top document's autofocus processed flag to true.

      4. Return.

      @@ -77765,7 +77813,7 @@ END:VCARD continue.

    7. If doc's browsing context's - top-level browsing context is not same as topDocument's + top-level browsing context is not same as top document's browsing context, then remove element from candidates, and continue.

      8. @@ -77813,7 +77861,7 @@ END:VCARD

      1. Empty candidates.

        2. -

      2. Set topDocument's autofocus processed flag to true.

        3. +

      3. Set top document's autofocus processed flag to true.

      4. Run the focusing steps for target.

      @@ -81007,6 +81055,1197 @@ dictionary DragEventInit : MouseEventInit { +

      The popup attribute

      + +

      All Elements may have the popup content attribute set. The popup attribute is an enumerated attribute. The + following table lists the states for this attribute:

      + + + + + + + + +
      State + Keywords +
      Auto state + auto +
      The empty string +
      Hint state + hint +
      Manual state + manual +
      + +

      The attribute may be omitted. The invalid value default + and the missing value default are both the no pop-up state. + +

      Every element which is not in the no pop-up state + has an additional pop-up visibility state with these potential values:

      +
        +

      1. pop-up hidden state

        2. + +

      2. pop-up transitioning state

        3. + +

      3. pop-up showing state

        4. +
      + +

      Elements in the pop-up showing state must match the :top-layer pseudo selector.

      + +

      Elements in the pop-up hidden state must have a user-agent style of + display:none.

      + +
      +

      The pop-up transitioning state and :top-layer pseudo selectors exist to allow pop-ups to animate + open or closed because animating between display:none and other display values is not + possible.

      +
      + +

      Every element which is not in the no pop-up state + has the following members:

      +
        +

      1. An Element called pop-up previously focused element, initially set to + null.

        2. + +

      2. An Element called pop-up invoker, initially set to null.

        3. + +

      3. A map from Element to DOMHighResTimeStamp called + pop-up hover show tasks, initially empty.

        4. + +

      4. A DOMHighResTimeStamp called pop-up hover hide task, initially + null.

        5. +
      + +

      When an element's popup attribute is modified such + that it goes from a valid value to the no pop-up state + while it is in the pop-up showing state, the hide pop-up algorithm + should be run with element set to element, focus previous element set to true, and hide + immediately set to false.

      + +

      The showPopUp() method + steps are:

      +
        +

      1. If this's pop-up attribute is in the no pop-up state, then throw a + "NotSupportedError" DOMException.

        2. + +

      2. If this is not in the pop-up hidden + state, then throw a "InvalidStateError" + DOMException.

        3. + +

      3. If this is not connected, then throw a + "InvalidStateError" DOMException.

        4. + +

      4. Let show event be an Event named show.

        5. + +

      5. Fire show event at + this.

        6. + +

      6. If show event's canceled flag is true, then return.

        7. + +
        +

        These validity checks are repeated because firing the show + event could have disconnected this element or changed its popup + attribute.

        +
        + +

      7. If this is not connected, return.

        8. + +

      8. If this is in the no pop-up state, + return.

        9. + +

      9. If this is in the pop-up showing state, return.

        10. + +

      10. Let document be this's node document.

        11. + +

      11. Let should restore focus be false.

        12. + +
      12. +

        If this is in the hint state, then + run the following steps:

        + +
          +

        1. If document's pop-up hint showing is not null, then run hidePopUp on document's pop-up hint + showing.

          2. + +

        2. Let ancestor be the result of running the nearest open ancestral + pop-up algorithm with node set to this and inclusive set to false.

          3. + +

        3. If ancestor is not null, then run hide + all pop-ups until with endpoint set to ancestor, focus previous element set + to false, hide immediately set to false, and hide unrelated set to true.

          4. +
        +
        13. + +
      13. +

        If this is in the auto state, then + run the following steps:

        + +
          +

        1. Let ancestor be the result of running the nearest open ancestral + pop-up algorithm with node set to this and inclusive set to false.

          2. + +

        2. Run hide all pop-ups until with endpoint + set to ancestor, focus previous element set to false, hide immediately set to false, + and hide unrelated set to true.

          3. +
        +
        14. + +
      14. +

        If this is in the auto state or + in the hint state, then run the following + steps:

        + +
          +
          +

          These validity checks are repeated because running hide all pop-ups until above could have fired the hide event, and an event handler could have disconnected this + element or changed its popup attribute.

          +
          + +

        1. If this's pop-up attribute is in the no pop-up state, then return.

          2. + +

        2. If this is not in the pop-up hidden state, then + return.

          3. + +

        3. If this is not connected, then return.

          4. + +
          +

          This ensures that focus is returned to the previously-focused element only for the first + pop-up in a stack.

          +
          + +

        4. If the result of running topmost pop-up auto or hint on document + is null, then set should restore focus to true. Otherwise, set + should restore focus to false.

          5. +
        +
        15. + +

      15. If this is in the auto state, + then push this onto document's pop-up stack.

        16. + +

      16. If this is in the hint state, + then set document's pop-up hint showing to this.

        17. + +

      17. Add this to document's all open pop-ups.

        18. + +

      18. Stop this from waiting for any animations to resolve before running pop-up hide finish if needed.

        19. + +

      19. If should restore focus is true, then set this's pop-up + previously focused element to the focused element. Otherwise, set + this's pop-up previously focused element to null.

        20. + +

      20. Add this to document's top layer.

        21. + +

      21. Set this's pop-up visibility state to pop-up transitioning + state.

        22. + + +

      22. Update the rendering for document.

        23. + +

      23. Set this's pop-up visibility state to pop-up showing + state.

        24. + +

      24. If no element is currently being hovered or + running is node pop-up descendant with element set to this and + potential descendant set to the currently hovered + element returns false, then run maybe queue pop-up hide event with element set + to this.

        25. + +

      25. Run the pop-up focusing steps for this.

        26. +
      + +

      The hidePopUp() method + steps are:

      +
        +

      1. If this's pop-up attribute is in the no pop-up state, then throw a + "NotSupportedError" DOMException.

        2. + +

      2. If this is not in the pop-up showing state, then throw a + "InvalidStateError" DOMException.

        3. + +

      3. Run the hide pop-up algorithm with element set to this, focus + previous element set to true, and hide immediately set to false.

        4. +
      + +

      The hide pop-up algorithm, given an Element element, a + boolean focus previous element, and a boolean hide immediately is as + follows:

      +
        +

      1. Let document be element's node document.

        2. + +
      2. +

        If element is in the auto state or the + hint state:

        +
          +

        1. Run hide all pop-ups until with endpoint + set to element, focus previous element set to focus previous element, + hide immediately set to hide immediately, and hide unrelated set to false.

          2. + +
          +

          These validity checks are repeated because running hide all pop-ups until above could have fired the hide event, and an event handler could have disconnected this + element or changed its popup attribute.

          +
          + +

        2. If element is in the no pop-up + state, return.

          3. + +

        3. If element is not connected, return.

          4. + +

        4. If element is not in the pop-up showing state, return.

          5. + +

        5. If element is in the auto state, + pop the top value from document's pop-up stack.

          6. + +

        6. If element is in the hint state, + set document's pop-up hint showing to null.

          7. +
        +
        3. + +

      3. Remove element from document's all open + pop-ups.

        4. + +

      4. Add element to document's pop-ups waiting to + hide.

        5. + +

      5. Let previous animations be the result of running getAnimations on element.

        6. + +

      6. Set element's pop-up invoker to null.

        7. + +

      7. Set element's pop-up visibility state to pop-up transitioning + state.

        8. + +
      8. +

        If hide immediately is true:

        +
          +

        1. Queue a global task on the user interaction task source given + element's relevant global object to fire an event named hide at + element.

          2. + +

        2. Run pop-up hide finish if needed on + element.

          3. + +

        3. Return.

          4. +
        +
        9. + +

      9. Fire an event named hide at element.

        10. + +

      10. If element is not connected, return.

        11. + +

      11. If element is in the no pop-up state, + return.

        12. + +

      12. If element is in the pop-up transitioning state, return.

        13. + +

      13. Let animations be a set containing the result of running getAnimations on element.

        14. + +

      14. Remove all items in animations which exist in + previous animations.

        15. + +

      15. If animations is empty, run pop-up hide finish if needed on + element.

        16. + +

      16. Let previously focused element be element's previously focused + element.

        17. + +
      17. +

        If previously focused element is not null:

        +
          +

        1. Set element's previously focused element to null.

          2. + +

        2. If focus previous element is true, run focus + on previously focused element with preventScroll set to true.

          3. +
        +
        18. + +
      18. +

        If animations is not empty:

        +
          +

        1. Wait for each animation in animations to resolve as either canceled or finished.

          2. + +

        2. Run pop-up hide finish if needed on + element.

          3. +
        +
        19. +
      + +

      The pop-up hide finish if needed algorithm, + given an Element element, is as follows:

      +
        +

      1. Remove element from element's node document's + pop-ups waiting to hide.

        2. + +

      2. Remove element from the top layer.

        3. + +

      3. Set element's pop-up visibility state to the pop-up hidden + state.

        4. + +

      4. Stop element from waiting for any animations to resolve before running this + algorithm.

        5. +
      + +

      The hide all pop-ups until algorithm, given an + Element endpoint, a boolean focus previous element, a boolean + hide immediately, and a boolean hide unrelated, is as follows:

      +
        +

      1. Let document be endpoint's node document.

        2. +
      2. +

        If hide immediately is true, then run the following steps:

        +
          +
        1. +

          For each element waiting to hide in document's pop-ups waiting to + hide, run the following steps:

          +
            +

          1. Run pop-up hide finish if needed + with element set to element waiting to hide.

            2. +
          +
          2. + +

        2. Clear document's pop-ups waiting to hide.

          3. +
        +
        3. + +
      3. +

        If endpoint is in the hint state and + hide unrelated is true, then run the following steps:

        +
          +

        1. If document's pop-up hint showing is not equal to + endpoint, then run the hide pop-up algorithm with element set to + endpoint, focus previous element set to focus previous element, and hide + immediately set to hide immediately.

          2. + +
        2. +

          While document's pop-up stack is not empty, run the following + steps:

          +
            +

          1. Run the hide pop-up algorithm with element set to endpoint, + focus previous element set to focus previous element, and hide immediately set to + hide immediately.

            2. +
          +
          3. + +
        +
        4. + +
      4. +

        If endpoint is in the auto state or + endpoint is null, then run the following steps:

        +
          +

        1. Let hint ancestor be null.

          2. + +
        2. +

          If document's pop-up hint showing is not null:

          +
            +

          1. Let hint ancestor be the result of running the nearest open ancestral + pop-up algorithm with node set to document's pop-up hint + showing and inclusive set to false.

            2. + +

          2. If hint ancestor is null and hide unrelated is true, then run the + hide pop-up algorithm with element set to document's pop-up + hint showing, focus previous element set to focus previous element and hide + immediately set to hide immediately.

            3. +
          +
          3. + +
        3. +

          While document's pop-up stack is not empty:

          +
            +

          1. If document's pop-up stack's top element is + hint ancestor, then run the hide pop-up algorithm with element set to + document's pop-up hint showing with focus previous element set to + focus previous element and hide immediately set to hide + immediately.

            2. + +

          2. If document's pop-up stack's top element is equal to + endpoint, break.

            3. + +

          3. Run the hide pop-up algorithm with element set to document's + pop-up stack's top element, focus previous element set to focus previous + element, and hide immediately set to hide immediately.

            4. +
          +
          4. +
        +
        5. +
      + +
      +

      The hide all pop-ups until algorithm is used in + several cases to hide all pop-ups that don't stay open when something happens. For example, + during light-dismiss of a pop-up, this algorithm ensures that we close only the pop-ups that + aren't related to the Node clicked by the user. The interaction between popup=auto and popup=hint + is captured here, where a popup=hint that is "nested" inside a popup=auto is only hidden at the + appropriate time.

      +
      + +

      The nearest open ancestral pop-up algorithm, given a Node + node and a boolean inclusive, is as follows:

      +
        +

      1. Let document be node's node document.

        2. + +

      2. Let hint showing be document's pop-up hint + showing.

        3. + +

      3. Let anchors to pop-ups be an empty map.

        4. + +
      4. +

        For each pop-up in document's pop-up stack:

        +
          +

        1. Let anchor be the result of getting the + pop-up anchor element of pop-up.

          2. + +

        2. If anchor is not null, map anchor to pop-up in + anchors to pop-ups.

          3. +
        +
        5. + +
      5. +

        If hint showing is not null:

        +
          +

        1. Let anchor be the result of running getting the pop-up anchor element of hint + showing.

          2. + +

        2. If anchor is not null, map anchor to hint showing in + anchors to pop-ups.

          3. +
        +
        6. + +

      6. Let pop-up positions be an empty map.

        7. + +

      7. Let index be 0.

        8. + +
      8. +

        For each pop-up in document's pop-up stack:

        +
          +

        1. Map pop-up to index in pop-up positions.

          2. + +

        2. Increment index by 1.

          3. +
        +
        9. + +
      9. +

        If hint showing is not null:

        +
          +

        1. Map hint showing to index in pop-up positions.

          2. + +

        2. Increment index by 1.

          3. +
        +
        10. + +

      10. Let new element be true if node is not in the no pop-up state and node is not in the + pop-up showing state.

        11. + +
      11. +

        If new element is true, then:

        +
          +

        1. Map node to index in pop-up positions.

          2. +
        +
        12. + +

      12. Let upper bound be 2147483647.

        13. + +

      13. If pop-up positions has a value for node, set upper bound to + pop-up position's value for node.

        14. + +

      14. If hint showing is not null and new element is true, set + upper bound to pop-up position's value for hint showing.

        15. + +
      15. +

        If inclusive is true:

        +
          +

        1. Let current node be node.

          2. + +
        2. +

          While current node has a parent node within the flat tree:

          +
            +
          1. +

            If current node is not in the no pop-up + state and current node is in the pop-up showing state and + current node is not in the manual + state

            : +
              +

            1. Let current element plus one be pop-up position's value for + current node plus 1.

              2. + +

            2. If current element plus one is greater than upper bound, then set + upper bound to current element plus one.

              3. +
            +
            2. + +

          2. Let target pop-up be current node's pop-up target + element.

            3. + +
          3. +

            If target pop-up is not null and target pop-up is in the pop-up + showing state and target pop-up is not in the manual state:

            +
              +

            1. Let target pop-up plus one be pop-up position's value for + target pop-up plus 1.

              2. + +

            2. If target pop-up plus one is greater than upper bound, then set + upper bound to target pop-up plus one.

              3. +
            +
            4. + +

          4. Set current node to the parent node of current node within the + flat tree.

            5. +
          +
          3. +
        +
        16. + +

      16. Let seen be an empty set.

        17. + +

      17. Return the result of running the nearest open ancestral pop-up recursive + algorithm with node, pop-up positions, anchors to pop-ups, + upper bound, and seen.

        18. +
      + +

      The nearest open ancestral pop-up + recursive algorithm, given a Node node, a map + pop-up positions, a map anchors to pop-ups, an integer upper bound, + and a set seen, is as follows:

      +
        +

      1. If node is null, return null.

        2. + +

      2. If seen contains node, return null.

        3. + +

      3. Add node to seen.

        4. + +

      4. Let ancestor be null.

        5. + +

      5. Let position be -1.

        6. + +
      6. +

        Let update be to run the following steps on pop-up:

        +
          +
        1. +

          If pop-up is not null and pop-up is not in the pop-up showing + state and pop-up is not is not in the manual state:

          +
            +

          1. Let new position be pop-up position's value for + pop-up.

            2. + +
          2. +

            If new position is greater than position and new position + is less than upper bound:

            +
              +

            1. Set ancestor to pop-up.

              2. + +

            2. Set position to new position.

              3. +
            +
            3. +
          +
          2. +
        +
        7. + +
      7. +

        Let recurse and update be to run the following steps on node:

        +
          +

        1. Let nearest open ancestor be the result of running nearest open ancestral pop-up recursive with + node, pop-up positions, anchors to pop-ups, upper bound, + and seen.

          2. + +

        2. Run update with pop-up set to nearest open ancestor.

          3. +
        +
        8. + +

      8. Run update with node.

        9. + +
      9. +

        If pop-up positions has a value for node:

        +
          +

        1. Run recurse and update with node's pop-up anchor element.

          2. + +

        2. Run recurse and update with node's pop-up + invoker.

          3. +
        +
        10. + +

      10. If node has a pop-up target element, then run + recurse and update with node's pop-up target element.

        11. + +

      11. If node has a hover pop-up + element, then run recurse and update with node's hover pop-up element.

        12. + +

      12. If anchors to pop-ups has a value for node, then run + recurse and update with anchors to pop-ups's value for node.

        13. + +

      13. Run recurse and update on node's parent node in the flat + tree.

        14. + +

      14. Return ancestor.

        15. +
      + +

      To get the pop-up anchor element of an + Element element, run these steps:

      +
        +

      1. If element is in the no pop-up state, + then return null.

        2. + +

      2. Let anchor attribute be the result of running getAttribute on element with qualifiedName set + to 'anchor'.

        3. + +

      3. If anchor attribute is null, then return null.

        4. + +

      4. Return the result of running getElementById on element's + root with elementId set to anchor attribute.

        5. +
      + +

      The topmost pop-up auto or hint algorithm given a Document + document is as follows:

      +
        +

      1. If document's pop-up hint showing is not null, then return + document's pop-up hint showing.

        2. + +

      2. If document's pop-up stack is not empty, then return + document's pop-up stack's last element.

        3. + +

      3. Return null.

        4. +
      + +

      The pop-up focusing steps for an Element subject are as + follows:

      +
        +

      1. Let control be the result of running pop-up focusable area on + subject with autofocus only set to true.

        2. + +

      2. Run the focusing steps for control.

        3. + +

      3. Let top document be the active document of control's + node document's browsing context's + top-level browsing context.

        4. + +

      4. If control's node document's origin is not the same + as the origin of top document, then + return.

        5. + +

      5. Empty top document's + autofocus candidates.

        6. + +

      6. Set top document's autofocus processed flag to true.

        7. +
      + +

      The pop-up focusable area given an element subject and boolean + autofocus only is as follows:

      +
        +

      1. If subject has the autofocus attribute, + then return subject.

        2. + +
      2. +

        For each node in the flat tree within subject:

        +
          +

        1. If node is a dialog element or node is not in the + no pop-up state, then continue without traversing + into the child nodes of node.

          2. + +

        2. If node is not focusable, continue.

          3. + +

        3. If autofocus only is true and node does not have the autofocus attribute, continue.

          4. + +

        4. Return node.

          5. +
        +
        3. + +

      3. Return null.

        4. +
      + +

      To get the hover pop-up element of an Element element, run + these steps:

      +
        +

      1. Let hover attribute be the result of running getAttribute on element with qualifiedName + set to popuphovertarget.

        2. + +

      2. If hover attribute is null, then return null.

        3. + +

      3. Let popup element be the result of running getElementById on element's + root with elementId set to hover attribute.

        4. + +

      4. If popup element is null or popup element is in the no pop-up state, then return null.

        5. + +

      5. Return popup element.

        6. +
      + +

      The is node pop-up descendant algorithm, given an Element + element and a Node potential descendant, is as follows:

      +
        +
      1. +

        If element is in the manual pop-up + state:

        +
          +
        1. +

          For each inclusive ancestor of potential descendant up the flat + tree:

          +
            +

          1. If ancestor is element, return true.

            2. +
          +
          2. +
        +
        2. + +
      2. +

        Otherwise:

        +
          +

        1. Let ancestor be the result of running nearest open ancestral + pop-up on potential ancestor with inclusive set to true.

          2. + +
        2. +

          While ancestor is not null:

          +
            +

          1. If ancestor is element, return true.

            2. + +

          2. Set ancestor to the result of running nearest open ancestral + pop-up on ancestor.

            3. +
          +
          3. +
        +
        3. + +

      3. Return false.

        4. +
      + +

      The pop-up target attributes

      + +

      All Elements may have the following content attributes, known as the + pop-up target attributes:

      +
        +

      1. popUpToggleTarget

        2. + +

      2. popUpHideTarget

        3. + +

      3. popUpShowTarget

        4. +
      + +

      The pop-up target attributes are only supported on the following elements:

      +
        +

      1. button elements

        2. + +

      2. input elements in the button + state.

        3. + +

      3. input elements in the submit button + state.

        4. + +

      4. input elements in the image button + state.

        5. + +

      5. input elements in the reset button + state.

        6. +
      + +

      The pop-up target attribute activation behavior algorithm given a Node + node is as follows:

      +
        +

      1. If node has the disabled attribute, then + return.

        2. + +

      2. If node is not supported by the pop-up target + attributes, then return.

        3. + +

      3. Let pop-up be node's pop-up target element.

        4. + +

      4. If pop-up is null, then return.

        5. + +
      5. +

        If node doesn't have the popuptoggletarget attribute:

        + +
          +

        1. If node has the popupshowtarget + attribute and pop-up is in the pop-up showing state, then return.

          2. + +

        2. If node has the popuphidetarget + attribute and pop-up is in the pop-up hidden state, then return.

          3. + +

        3. If node doesn't have the popupshowtarget attribute and node doesn't + have the popuphidetarget attribute, then + return.

          4. +
        +
        6. + +
      6. +

        If node has a form owner and node is in any of the + following states, then return:

        +
          +

        1. node is a button element in the submit state.

          2. + +

        2. node is an input element in the submit state.

          3. + +

        3. node is an input element in the image state.

          4. +
        +
        7. + +

      7. If pop-up is in the pop-up showing state, then run the hide + pop-up algorithm with element set to pop-up, focus previous element set to + true, and hide immediately set to false.

        8. + +
      8. +

        Otherwise, run the following steps:

        +
          +

        1. Set pop-up's pop-up invoker to node.

          2. + +

        2. Run showPopUp on pop-up.

          3. +
        +
        9. +
      + +

      The pop-up target element algorithm given a Node node is as + follows:

      +
        +

      1. If node is not supported, then return null.

        2. + +

      2. Let idref be null.

        3. + +

      3. If node has the popuptoggletarget attribute, then set idref + to the value of node's popuptoggletarget attribute.

        4. + +

      4. Otherwise, if node has the popupshowtarget attribute, then set idref to + the value of node's popupshowtarget + attribute.

        5. + +

      5. Otherwise, if node has the popuphidetarget attribute, then set idref to + the value of node's popuphidetarget + attribute.

        6. + +

      6. If idref is null, then return null.

        7. + +

      7. Let popup element be the result of running getElementById on node's root + with idref.

        8. + +

      8. If popup element is null, then return null.

        9. + +

      9. If popup element is in the no pop-up + state, then return null.

        10. + +

      10. Return popup element.

        11. +
      + +

      pop-up light dismiss

      + +
      +

      Clicking outside of a hint pop-up or an auto pop-up will close the pop-up.

      +
      + +

      When a Document document receives an Event + event in the capture phase, run the following steps:

      +
        +

      1. Let topmost popup be the result of running topmost pop-up auto or + hint on document.

        2. + +

      2. If topmost popup is null, then return.

        3. + +

      3. Let target be event's target.

        4. + +

      4. If target is null, then return.

        5. + +
      5. +

        If event is a mousedown event then:

        +
          +

        1. Set document's pop-up mousedown target to the result of running + nearest open ancestral pop-up with node set to target and inclusive set + to true.

          2. +
        +
        6. + +
      6. +

        If event is a mouseup event then:

        +
          +

        1. Let ancestor be the result of running nearest open ancestral + pop-up with node set to target and inclusive set to true.

          2. + +

        2. Let same target be true if ancestor is document's + pop-up mousedown target.

          3. + +

        3. Set document's pop-up mousedown target to null.

          4. + +

        4. If same target is true, then run hide + all pop-ups until with endpoint set to ancestor, focus previous element set + to false, hide immediately set to false, and hide unrelated set to true.

          5. +
        +
        7. + +
      7. +

        If event is a keydown event for the + Escape key:

        +
          +

        1. Run the hide pop-up algorithm with element set to topmost popup, + focus previous element set to true, and hide immediately set to false.

          2. +
        +
        8. + +
      8. +

        If event is a focusin event, then:

        +
          +

        1. Let ancestor be the result of running nearest open ancestral + pop-up with node set to target and inclusive set to true.

          2. + +

        2. Run hide + all pop-ups until with endpoint set to ancestor, focus previous element set + to false, hide immediately set to false, and hide unrelated set to true.

          3. +
        +
        9. +
      + +

      The defaultopen attribute

      + +

      All Elements may have the defaultopen content attribute set. defaultopen is a boolean attribute.

      + +

      When any Element element is inserted by the parser, run the following steps:

      +
        +
      1. +

        If element has the defaultopen attribute + set:

        +
          +
        1. +

          Queue a global task on the user interaction task source given + element's relevant global object to run the following steps:

          +
            +

          1. If element is not connected, return.

            2. + +

          2. If element is in the no pop-up + state, return.

            3. + +

          3. If element is in the hint + state, return.

            4. + +
            +

            This ensures that only the first popup=auto element with defaultopen is shown.

            +
            + +

          4. If element is in the auto state + and element's node document's pop-up stack is not empty, + return.

            5. + +

          5. Run showPopUp on element.

            6. +
          +
          2. +
        +
        2. +
      + +

      The popuphovertarget attribute

      + +

      All Elements may have the popuphovertarget content attribute.

      + +

      When an Element element becomes hovered, run the following steps:

      +
        +
      1. +

        For each ancestor pop-up in element's node document's + all open pop-ups:

        +
          +

        1. If ancestor pop-up is node pop-up descendant of + element, then run maybe queue pop-up hide event on ancestor + pop-up.

          2. + +
        2. +

          If ancestor pop-up is node pop-up descendant of + element:

          +
            +

          1. Let task be ancestor pop-up's pop-up hover hide + task.

            2. + +
          2. +

            If task is not null:

            +
              +

            1. Cancel + task.

              2. + +

            2. Set ancestor pop-up's pop-up hover hide task to + null.

              3. +
            +
            3. +
          +
          3. +
        +
        2. + +

      2. Let popup element be the result of running pop-up hover target + element on element.

        3. + +

      3. If popup element is null, return.

        4. + +

      4. Let hover tasks be popup element's pop-up hover show + tasks.

        5. + + +

      5. Let hover delay be element's computed value for + 'pop-up-show-delay' multiplied by 1000.

        6. + +

      6. If hover delay is not a valid floating-point number, + return.

        7. + +
      7. +

        Set hover tasks's value for element to the result of queueing a delayed cancelable task with source + set to the DOM manipulation task source, element set to popup element, + milliseconds set to hover delay, and steps set to the following steps:

        +
          +

        1. Set hover tasks's value for element to null.

          2. + +

        2. If popup element is in the no pop-up + state, return.

          3. + +

        3. If popup element is not connected, return.

          4. + +

        4. If popup element is in the pop-up showing state, return.

          5. + +

        5. If element's pop-up hover target element is not + popup element, return.

          6. + +

        6. Set popup element's pop-up invoker to element.

          7. + +

        7. Run showPopUp on popup element.

          8. +
        +
        8. +
      + +

      When an Element element becomes no longer hovered, run the following steps:

      +
        +
      1. +

        For each ancestor pop-up in element's node document's + all open pop-ups:

        +
          +

        1. If ancestor pop-up is node pop-up descendant of + element, then run maybe queue pop-up hide event on ancestor + pop-up.

          2. +
        +
        2. + +

      2. Let popup element be the result of running pop-up hover target element + on element.

        3. + +

      3. If popup element is null, return.

        4. + +

      4. Let hover tasks be popup element's pop-up hover show + tasks.

        5. + +

      5. Let hover task handle be hover tasks's value for + element.

        6. + +

      6. If hover task handle is null, return.

        7. + +

      7. Run cancel a delayed cancelable task with timerKey set to hover task + handle global set to element's relevant global object.

        8. + +

      8. Set hover tasks's value for element to null.

        9. +
      + +

      The pop-up hover target element for an Element element is the + result of the following steps:

      +
        +

      1. If element is in the no pop-up + state, then return null.

        2. + +

      2. Let hover attribute be the result of running getAttribute on element with qualifiedName + set to popuphovertarget.

        3. + +

      3. If hover attribute is null, then return null.

        4. + +

      4. Return the result of running getElementById on element's + root with elementId set to hover attribute.

        5. +
      + +

      The maybe queue pop-up hide event algorithm, given an Element + element, is as follows:

      +
        +

      1. If element is in the pop-up hidden state, return.

        2. + + +

      2. Let hover delay be element's computed value for + 'pop-up-hide-delay' multiplied by 1000.

        3. + +

      3. If hover delay is not a valid floating-point number, + return.

        4. + +
      4. +

        Set element's pop-up hover hide task to the result of queueing a delayed cancelable task with source + set to the DOM manipulation task source, element set to popup element, + milliseconds set to hover delay, and steps set to the following steps:

        +
          +

        1. Let show task be element's pop-up hover show tasks's + value for element.

          2. + +
        2. +

          If show task is not null:

          +
            +

          1. Cancel show + task.

            2. + +

          2. Set element's pop-up hover show tasks's value for + element to null.

            3. +
          +
          3. + +

        3. If element is in the pop-up showing state, then run the + hide pop-up algorithm with element set to element, focus previous + element set to true, and hide imediately set to false.

          4. +
        +
        5. +

      Loading web pages

      @@ -95748,6 +96987,33 @@ import "https://example.com/foo/../module2.mjs"; queue.

    +

    To queue a delayed cancelable task on a task source + source, which performs a series of steps steps, given an + Element element and an integer milliseconds:

    +
      +
    1. +

      Run the following steps after a timeout + with global set to element's relevant global object and milliseconds set + to milliseconds:

      +
        +

      1. Queue a task with task source set to source, steps set to + steps, and document set to element's node document.

        2. +
      +
      2. + +

    2. Let timerKey be the timerKey generated in the previous call to run steps + after a timeout.

      3. + +

    3. Return timerKey.

      4. +
    + +

    To cancel a delayed cancelable task given a timerKey timerKey and + a global global:

    +
      +

    1. Remove timerKey from global's map of active + timers.

      2. +
    +

    It is possible for a microtask to be moved to a regular task queue, if, during its initial execution, it spins the event loop. This is the only case in which the OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl onemptied emptied onended ended onformdata formdata + onhide hide oninput input oninvalid invalid onkeydown keydown @@ -97516,6 +98783,7 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl onseeked seeked onseeking seeking onselect select + onshow show onslotchange slotchange onstalled stalled onsubmit submit @@ -117959,6 +119227,38 @@ dialog::backdrop { slot { display: contents; +} + +[popup="" i], +[popup=auto i], +[popup=hint i], +[popup=manual i] { + position: fixed; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; + width: fit-content; + height: fit-content; + margin: auto; + border: solid; + overflow: auto; + padding: 1em; + color: CanvasText; + background-color: Canvas; +} + +[popup="" i]::backdrop, +[popup=auto i]::backdrop, +[popup=hint i]::backdrop, +[popup=manual i]::backdrop { + position: fixed; + inset-inline-start: 0; + inset-inline-end: 0; + inset-block-start: 0; + inset-block-end: 0; + background: transparent; + pointer-events: none !important; }

    The following rules are also expected to apply, as presentational hints:

    @@ -118012,6 +119312,9 @@ form { margin-block-end: 1em; }
  • 'max-height' property to 'calc(100% - 6px - 2em)'
    • +

    Elements in the pop-up hidden state are expected to have their + 'display' property set to 'none'.

    +

    Phrasing content

    @namespace url(http://www.w3.org/1999/xhtml);
@@ -121035,7 +122338,6 @@ if (s = prompt('What is your name?')) {
 
    
    label on menu elements
    
    
    contextmenu on all elements
    
-   
    onshow on all elements
    
    
    To implement a custom context menu, use script to handle the contextmenu event.
    
 
@@ -126158,6 +127460,12 @@ interface External {
       hashchange event handler for Window object
       Event handler content attribute
 
+    
+      onhide
+      HTML elements
+      hide event handler
+      Event handler content attribute
+
     
       oninput
       HTML elements
@@ -126386,6 +127694,12 @@ interface External {
       select event handler
       Event handler content attribute
 
+    
+      onshow
+      HTML elements
+      show event handler
+      Event handler content attribute
+
     
       onslotchange
       HTML elements
@@ -127049,6 +128363,12 @@ INSERT INTERFACES HERE
       Global scope objects, Worker objects, elements, networking-related objects
       Fired when unexpected errors occur (e.g. networking errors, script errors, decoding errors)
 
+     
+      finish
+      Event
+      Animation
+      Fired on an animation when it completes
+
      
       focus
       Event
@@ -127067,6 +128387,12 @@ INSERT INTERFACES HERE
       Window
       Fired at the Window when the fragment part of the document's URL changes
 
+     
+      hide
+      Event
+      Elements
+      Fired on a pop-up when it is hidden.
+
      
       input
       Event
@@ -127176,6 +128502,12 @@ INSERT INTERFACES HERE
       Form controls
       Fired at form controls when their text selection is adjusted (whether by an API or by the user)
 
+     
+      show
+      Event
+      Elements
+      Fired on a pop-up when it is shown.
+
      
       slotchange
       Event