From 9bed709ef86112e471bcf0a5cae9d721a2f38eed Mon Sep 17 00:00:00 2001 From: Joey Arhar Date: Sun, 9 Oct 2022 10:41:28 -0700 Subject: [PATCH] squash down to one commit --- source | 2098 +++++++++++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 1771 insertions(+), 327 deletions(-) diff --git a/source b/source index 6bad8a47add..f1b73dc1e40 100644 --- a/source +++ b/source @@ -1823,6 +1823,10 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute element.

+ +

  • If removedNode's popup attribute is not in the + no pop-up state, then run the hide pop-up + algorithm given removedNode, false, and true.

    • A The tree, shadow tree, and node tree concepts

  • The tree order and shadow-including tree order concepts
    • +
  • The element concept
  • The child concept
  • The root and shadow-including root concepts
  • The inclusive ancestor, @@ -3174,6 +3179,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute is value
  • MutationObserver interface and mutation observers in general
    • +
  • The get an attribute by name algorithm

    • The following features are defined in UI Events:

    @@ -3810,10 +3816,18 @@ 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: @@ -10993,6 +11007,12 @@ interface HTMLElement : Element { [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText; ElementInternals attachInternals(); + + // The pop-up API + void showPopUp(); + void hidePopUp(); + [Unscopable, CEReactions] attribute DOMString? popUp; + [CEReactions] attribute boolean defaultOpen; }; HTMLElement includes GlobalEventHandlers; @@ -12228,6 +12248,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%

  • autofocus
  • contenteditable
  • dir
    • +
  • defaultopen
  • draggable
  • enterkeyhint
  • hidden
    • @@ -12241,6 +12262,7 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • itemtype
  • lang
  • nonce
    • +
  • popup
  • spellcheck
  • style
  • tabindex
    • @@ -12409,6 +12431,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • onpause
  • onplay
  • onplaying
    • +
  • onpopuphide
    • +
  • onpopupshow
  • onprogress
  • onratechange
  • onreset
    • @@ -44886,6 +44910,9 @@ interface HTMLLabelElement : HTMLElement {
    name
    pattern
    placeholder
    +
    popuphidetarget
    +
    popupshowtarget
    +
    popuptoggletarget
    readonly
    required
    size
    @@ -45051,7 +45078,8 @@ interface HTMLInputElement : HTMLElement { undefined showPicker(); // also has obsolete members -}; +}; +HTMLInputElement includes PopUpTargetElement;
    Uses HTMLInputElement.
    @@ -45732,79 +45760,7 @@ interface HTMLInputElement : HTMLElement { - readonly - · - Yes - - Yes - Yes - Yes - Yes - - - - Yes - Yes - · - · - · - - · - · - · - · - - - - required - · - Yes - - Yes - Yes - Yes - Yes - - - - Yes - Yes - · - · - Yes - - Yes - · - · - · - - - - size - · - Yes - - Yes - Yes - Yes - · - - - - · - · - · - · - · - - · - · - · - · - - - - src + popuphidetarget · · @@ -45822,37 +45778,13 @@ interface HTMLInputElement : HTMLElement { · · - · + Yes Yes - · - + Yes + - step - · - · - - · - · - · - Yes - - - - Yes - Yes - Yes - · - · - - · - · - · - · - - - - width + popupshowtarget · · @@ -45870,17 +45802,13 @@ interface HTMLInputElement : HTMLElement { · · - · + Yes Yes - · - + Yes + - - IDL attributes and methods - - - checked + popuptoggletarget · · @@ -45891,78 +45819,6 @@ interface HTMLInputElement : HTMLElement { - · - · - · - · - Yes - - · - · - · - · - - - - files - · - · - - · - · - · - · - - - - · - · - · - · - · - - Yes - · - · - · - - - - value - default - value - - value - value - value - value - - - - value - value - value - value - default/on - - filename - default - default - default - - - - valueAsDate - · - · - - · - · - · - Yes - - - · · · @@ -45970,26 +45826,26 @@ interface HTMLInputElement : HTMLElement { · · - · - · - · - + Yes + Yes + Yes + - valueAsNumber + readonly · - · - - · - · - · + Yes + + Yes + Yes + Yes Yes Yes Yes - Yes + · · · @@ -46000,132 +45856,36 @@ interface HTMLInputElement : HTMLElement { - list + required · Yes Yes Yes - · + Yes Yes Yes Yes - Yes - Yes - · - - · - · - · - · - - - - select() - · - Yes - - Yes - Yes† - Yes - Yes† - - - - Yes† - Yes† - · - Yes† - · - - Yes† - · - · - · - - - - selectionStart - · - Yes - - Yes - · - Yes - · - - - - · - · - · - · - · - - · - · - · - · - - - - selectionEnd - · - Yes - - Yes - · - Yes - · - - - - · - · · · - · - - · - · - · - · - - - - selectionDirection - · - Yes - - Yes - · - Yes - · - - - - · - · - · - · - · - - · + Yes + + Yes · · · - setRangeText() + size · Yes Yes - · + Yes Yes · @@ -46144,13 +45904,13 @@ interface HTMLInputElement : HTMLElement { - setSelectionRange() + src · - Yes - - Yes + · + + · · - Yes + · · @@ -46163,12 +45923,352 @@ interface HTMLInputElement : HTMLElement { · · - · + Yes · - stepDown() + step + · + · + + · + · + · + Yes + + + + Yes + Yes + Yes + · + · + + · + · + · + · + + + + width + · + · + + · + · + · + · + + + + · + · + · + · + · + + · + · + Yes + · + + + + + IDL attributes and methods + + + checked + · + · + + · + · + · + · + + + + · + · + · + · + Yes + + · + · + · + · + + + + files + · + · + + · + · + · + · + + + + · + · + · + · + · + + Yes + · + · + · + + + + value + default + value + + value + value + value + value + + + + value + value + value + value + default/on + + filename + default + default + default + + + + valueAsDate + · + · + + · + · + · + Yes + + + + · + · + · + · + · + + · + · + · + · + + + + valueAsNumber + · + · + + · + · + · + Yes + + + + Yes + Yes + Yes + · + · + + · + · + · + · + + + + list + · + Yes + + Yes + Yes + · + Yes + + + + Yes + Yes + Yes + Yes + · + + · + · + · + · + + + + select() + · + Yes + + Yes + Yes† + Yes + Yes† + + + + Yes† + Yes† + · + Yes† + · + + Yes† + · + · + · + + + + selectionStart + · + Yes + + Yes + · + Yes + · + + + + · + · + · + · + · + + · + · + · + · + + + + selectionEnd + · + Yes + + Yes + · + Yes + · + + + + · + · + · + · + · + + · + · + · + · + + + + selectionDirection + · + Yes + + Yes + · + Yes + · + + + + · + · + · + · + · + + · + · + · + · + + + + setRangeText() + · + Yes + + Yes + · + Yes + · + + + + · + · + · + · + · + + · + · + · + · + + + + setSelectionRange() + · + Yes + + Yes + · + Yes + · + + + + · + · + · + · + · + + · + · + · + · + + + + stepDown() · · @@ -46376,6 +46476,8 @@ 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 element.

    • Recall that an element's activation behavior runs for both @@ -46654,6 +46756,9 @@ interface HTMLInputElement : HTMLElement { multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, readonly, required, size, @@ -46789,6 +46894,9 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, step, and width.

    @@ -46890,6 +46998,9 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, step, and width.

    @@ -46993,6 +47104,9 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, step, and width.

    @@ -47261,6 +47375,9 @@ ldh-str = < as defined in height, max, min, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, step, and width.

    @@ -47357,6 +47474,9 @@ ldh-str = < as defined in     max, min, multiple, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, step, and width.

    @@ -47530,6 +47650,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -47681,6 +47804,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -47836,6 +47962,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -47987,6 +48116,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -48131,6 +48263,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -48293,6 +48428,9 @@ ldh-str = < as defined in     minlength, multiple, pattern, + popuphidetarget, + popupshowtarget, + popuptoggletarget, size, src, and width.

    @@ -48563,6 +48701,9 @@ ldh-str = < as defined in     multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, readonly, required, size, @@ -48669,6 +48810,9 @@ ldh-str = < as defined in multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, readonly, required, size, @@ -48783,6 +48927,9 @@ ldh-str = < as defined in multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, readonly, size, src, @@ -48958,6 +49105,9 @@ ldh-str = < as defined in multiple, pattern, placeholder, + popuphidetarget, + popupshowtarget, + popuptoggletarget, readonly, size, src, @@ -49208,6 +49358,9 @@ ldh-str = < as defined in min, minlength, pattern, + popuphidetarget, + popupshowtarget, + popuptoggletarget, placeholder, readonly, size, @@ -49291,9 +49444,12 @@ ldh-str = < as defined in formaction, formenctype, formmethod, - formnovalidate, and - formtarget content attributes; - value IDL attribute.

    + formnovalidate, + formtarget, + popuphidetarget, + popupshowtarget, and + popuptoggletarget, content + attributes; value IDL attribute.

    The value IDL attribute is in mode default.

    @@ -49563,6 +49719,9 @@ ldh-str = < as defined in     formnovalidate, formtarget, height, + popuphidetarget, + popupshowtarget, + popuptoggletarget, src, and width content attributes; value IDL attribute.

    @@ -49682,6 +49841,13 @@ ldh-str = < as defined in     applies to this element and is in mode default.

    +

    The following common input element content attributes apply to the element: + popuphidetarget, + popupshowtarget, and + popuptoggletarget content + attributes.

    +

    The following content attributes must not be specified and do not apply to the element: accept, @@ -49762,6 +49928,13 @@ ldh-str = < as defined in applies to this element and is in mode default.

    +

    The following common input element content attributes apply to the element: + popuphidetarget, + popupshowtarget, and + popuptoggletarget content + attributes.

    +

    The following content attributes must not be specified and do not apply to the element: accept, @@ -51340,6 +51513,9 @@ You cannot submit this form when the field is incorrect.

    formnovalidate
    formtarget
    name
    +
    popuphidetarget
    +
    popupshowtarget
    +
    popuptoggletarget
    type
    value
    HTMLButtonElement : HTMLElement { undefined setCustomValidity(DOMString error); readonly attribute NodeList labels; -}; +}; +HTMLButtonElement includes PopUpTargetElement;
    Uses HTMLButtonElement.
    @@ -51430,13 +51607,12 @@ 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, then:

    Submit Button
    @@ -51451,6 +51627,9 @@ interface HTMLButtonElement : HTMLElement {

    Do nothing.

    • + +

  • Run the pop-up target attribute activation behavior given + element.

    • @@ -71715,6 +71894,14 @@ Demos: not null, or containing no elements, if it is.

    +
    :open
    +
    +

    The :open pseudo-class is defined to match + any element whose popup attribute not in the no pop-up state and whose pop-up visibility + state is showing.

    +
    +
    :enabled

    The :enabled pseudo-class must match any @@ -77124,9 +77311,28 @@ partial interface Navigator { focus target be null.

  • -

    If focus event target is not null, fire a focus event - named focus at focus event target, with - related focus target as the related target.

    +

    If focus event target is not null, then:

    + +
      +

    1. Let defaultNotPreventedbe the result of firing a focus event + named focus at focus event target, with + related focus target as the related target.

      2. + +
    2. +

      If defaultNotPrevented is false, then:

      + +
        +

      1. Let ancestor be the result of running nearest open ancestral + pop-up given focus event target and "inclusive".

        2. + +

      2. Run hide all pop-ups until given + ancestor, false, false, and true.

        3. +
      +
      3. +
    +

    In some cases, e.g. if entry is an area element's shape, a scrollable region, or a viewport, no event is fired.

    @@ -77136,12 +77342,11 @@ partial interface Navigator {

    To fire a focus event named e at an element t with a given - related target r, fire an event named - e at t, using FocusEvent, with the r, return the result of firing an + event named e at t, using FocusEvent, with the relatedTarget attribute initialized to r, - the view attribute initialized to t's - node document's relevant global object, and the composed - flag set.

    + the view attribute initialized to t's node + document's relevant global object, and the composed flag set.

    @@ -77589,15 +77794,22 @@ partial interface Navigator {

    The autofocus content attribute allows the author to indicate that an element is to be focused as soon as the - page is loaded or as soon as the dialog within which it finds itself is shown, - allowing the user to just start typing without having to manually focus the main element.

    + page is loaded, allowing the user to just start typing without having to manually focus the main + element.

    + +

    When the autofocus attribute is specified on an element + inside dialog elements or elements whose popup + attribute is set, then it will be focused when the dialog or pop-up becomes shown.

    The autofocus attribute is a boolean attribute.

    An element's nearest ancestor autofocus scoping root element is the element itself - if the element is a dialog element, or else is the element's nearest ancestor - dialog element, if any, or else is the element's last inclusive ancestor + if the element is a dialog or has the popup + attribute not in the no pop-up state, or else is the + element's nearest ancestor dialog or element whose popup attribute is not in the no + pop-up state, if any, or else is the element's last inclusive ancestor element.

    There must not be two elements with the same nearest ancestor autofocus scoping root @@ -80931,6 +81143,1124 @@ dictionary DragEventInit : MouseEventInit { +

    The popup attribute

    + +

    All elements may have the popup content attribute set. When specified, the element won't be + rendered until it becomes shown, at which point it will be rendered on top of other page + content.

    + +

    The popup attribute is an enumerated attribute. + The following table lists the states for this attribute:

    + + + + + + + + +
    State + Keywords + Description +
    Auto state + auto + Closes other pop-ups when opened; has light + dismiss. +
    The empty string +
    Hint state + hint + Closes other hint pop-ups when opened; has light + dismiss. +
    Manual state + manual + Does not close other pop-ups; does not light + dismiss. +
    + +

    The popUp IDL attribute + must reflect the popup attribute.

    + +

    The attribute may be omitted. The invalid value default + and the missing value default are both the manual state. + +

    When the popup attribute is not set on an element, then the + element's popup attribute is considered to be in the no pop-up state.

    + +

    Every element has a pop-up visibility state with these potential values:

    + +
      +

    • hidden

      • + +

    • transitioning

      • + +

    • showing

      • +
    + +
    +

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

    +
    + +
    +

    The following is an example of an animated pop-up:

    + + 
    <div popup="auto" id="foo">
+  A fancy pop-up with no Javascript
+</div>
+<style>
+  [popup] {
+    opacity: 0;
+    transform: translate(-100px,100px);
+    transition: all 1.5s;
+  }
+  [popup]:open {
+    transform: translate(0,0);
+    opacity: 1;
+  }
+</style>
    +
    + +

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

    + +

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

    + +

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

    + +

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

    + +

    Every element has the following members:

    + +
      +

    • A pop-up previously focused element, which is an Element or null, + initially set to null.

      • + +

    • A pop-up invoker, which is an Element or null, initially set to + null.

      • +
    + +

    The following attribute change steps + are used for the popup attribute:

    + +
      +

    1. If localName is not popup, then + return.

      2. + +

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

      3. + +

    3. If value is not in the no pop-up + state, then return.

      4. + +

    4. Run the hide pop-up algorithm given element, true, and + false.

      5. +
    + +
    +
    element.showPopUp()
    + +
    Shows the pop-up element by adding it to the top layer. If element's + popup attribute is in the auto state or hint + state, then this will also close all other auto and hint + pop-ups unless they are an ancestor of element according to the nearest open + ancestral pop-up algorithm.
    + +
    element.hidePopUp()
    + +
    Hides the pop-up element by removing it from the top layer and applying + display: none to it.
    +
    + +

    The showPopUp() method steps + are:

    + +
      +

    1. Run show pop-up given this.

      2. +
    + +

    To show pop-up, given an Element element:

    + +
      +

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

      2. + +

    2. If element's pop-up visibility state is not hidden, then throw a + "InvalidStateError" DOMException.

      3. + +

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

      4. + +

    4. If the result of firing an event named popupshow at element is false, then return.

      5. + +

    5. If element is not connected, then return.

      6. + +

    6. If element's popup attribute is in the no pop-up state, then return.

      7. + +
    7. +

      If element's pop-up visibility state is showing, then return.

      + +
      +

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

      +
      +
      8. + +

    8. Let document be element's node document.

      9. + +

    9. Let shouldRestoreFocus be false.

      10. + +
    10. +

      If element's popup attribute is in the hint state, then:

      + +
        +

      1. If document's currently-showing hint pop-up is not null, then + run the hide pop-up algorithm given document's currently-showing + hint pop-up, true, and false.

        2. + +

      2. Let ancestor be the result of running the nearest open ancestral + pop-up algorithm given element and "new-pop-up".

        3. + +

      3. If ancestor is not null, then run hide + all pop-ups until given ancestor, false, false, and true.

        4. +
      +
      11. + +
    11. +

      If element's popup attribute is in the auto state, then:

      + +
        +

      1. Let ancestor be the result of running the nearest open ancestral + pop-up algorithm given element and "new-pop-up".

        2. + +

      2. Run hide all pop-ups until given + ancestor, false, false, and true.

        3. +
      +
      12. + +
    12. +

      If element's popup attribute is in the auto state or in the hint state, then:

      + +
        +

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

        2. + +

      2. If element's pop-up visibility state is not hidden, then return.

        3. + +
      3. +

        If element is not connected, then return.

        + +
        +

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

        +
        +
        4. + +
      4. +

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

        + +
        +

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

        +
        +
        5. +
      +
      13. + +

    13. If element's popup attribute is in the auto state, then push element onto + document's auto pop-up stack.

      14. + +

    14. If element's popup attribute is in the hint state, then set document's + currently-showing hint pop-up to element.

      15. + +

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

      16. + +

    16. Set element's pop-up previously focused element to null.

      17. + +

    17. Let originallyFocusedElement be document's focused area of the + document.

      18. + +

    18. Add element to document's top layer.

      19. + +

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

      20. + +

    20. Recalculate styles and update layout for document.

      21. + +

    21. Set element's pop-up visibility state to showing.

      22. + +

    22. Run the hide pop-up algorithm given element, true, and + false.

      23. + +

    23. Run the pop-up focusing steps given element.

      24. + +

    24. If shouldRestoreFocus is true, element's popup attribute is not in the no + pop-up state, and originallyFocusedElement is not the focused + element, then set element's pop-up previously focused element to + originallyFocusedElement.

      25. +
    + +

    The hidePopUp() method steps + are:

    + +
      +

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

      2. + +

    2. If this's pop-up visibility state is not showing, then throw a + "InvalidStateError" DOMException.

      3. + +

    3. Run the hide pop-up algorithm given this, true, and + false.

      4. +
    + +

    To hide a pop-up given an Element + element, a boolean focusPreviousElement, and a boolean + hideImmediately:

    + +
      +

    1. Let document be element's node document.

      2. + +
    2. +

      If element's popup attribute is in the auto state or the hint state, then:

      + +
        +

      1. Run hide all pop-ups until given + element, focusPreviousElement, hideImmediately, and + false.

        2. + +

      2. If element's popup attribute is in the no pop-up state, then return.

        3. + +

      3. If element is not connected, then return.

        4. + +
      4. +

        If element's pop-up visibility state is not showing, then return.

        + +
        +

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

        +
        +
        5. + +

      5. If element's popup attribute is in the auto state, then pop from + document's auto pop-up stack.

        6. + +

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

        7. +
      +
      3. + +

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

      4. + +

    4. Let previousAnimations be the set of all relevant Animation objects that contain at least one + animation effect whose effect target is element.

      5. + +

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

      6. + +

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

      7. + +
    7. +

      If hideImmediately is true, then:

      + +
        +

      1. Queue an element task given user interaction task source and + element to fire an event named popuphide at element.

        2. + +

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

        3. + +

      3. Return.

        4. +
      +
      8. + +

    8. Fire an event named popuphide at element.

      9. + +

    9. If element is not connected, then return.

      10. + +

    10. If element's popup attribute is in the no pop-up state, then return.

      11. + +

    11. If element's pop-up visibility state is transitioning, then return.

      12. + +

    12. Let animations be the set of all relevant Animation objects that contain at least one + animation effect whose effect target is element.

      13. + +

    13. Remove all items in animations which exist in + previousAnimations.

      14. + +

    14. If animations is empty, then run pop-up hide finish if needed given + element.

      15. + +

    15. Let previouslyFocusedElement be element's previously focused + element.

      16. + +
    16. +

      If previouslyFocusedElement is not null, then:

      + +
        +

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

        2. + +

      2. If focusPreviousElement is true, then run the focusing steps for + previouslyFocusedElement.

        3. +
      +
      17. + +
    17. +

      If animations is not empty, then run these steps in parallel:

      + +
        +

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

        2. + +

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

        3. +
      +
      18. +
    + +

    To finish hiding a pop-up if needed, given an + Element element:

    + +
      +

    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 hidden.

      4. + +

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

      5. +
    + +

    To hide all pop-ups until, given an + Element endpoint, a boolean focusPreviousElement, a boolean + hideImmediately, and a boolean hideUnrelated:

    + +
      +

    1. Let document be endpoint's node document.

      2. +
    2. +

      If hideImmediately is true, then:

      + +
        +
      1. +

        For each elementWaitingToHide in document's pop-ups waiting to + hide:

        + +
          +

        1. Run pop-up hide finish if needed + given elementWaitingToHide.

          2. +
        +
        2. + +

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

        3. +
      +
      3. + +
    3. +

      If endpoint's popup attribute is in the hint state and hideUnrelated is true, then:

      + +
        +

      1. If document's currently-showing hint pop-up is not equal to + endpoint, then run the hide pop-up algorithm given endpoint, + focusPreviousElement, and hideImmediately.

        2. + +
      2. +

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

        + +
          +

        1. Run the hide pop-up algorithm given endpoint, + focusPreviousElement, and hideImmediately.

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

      If endpoint's popup attribute is in the auto state or endpoint is null, then:

      + +
        +

      1. Let hintAncestor be null.

        2. + +
      2. +

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

        + +
          +

        1. Let hintAncestor be the result of running the nearest open ancestral + pop-up algorithm given document's currently-showing hint + pop-up and "default"

          2. + +

        2. If hintAncestor is null and hideUnrelated is true, then run the + hide pop-up algorithm given document's currently-showing hint + pop-up, focusPreviousElement and hideImmediately.

          3. +
        +
        3. + +
      3. +

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

        + +
          +

        1. If document's auto pop-up stack's top element is + hintAncestor, then run the hide pop-up algorithm given + document's currently-showing hint pop-up, + focusPreviousElement and hideImmediately.

          2. + +

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

          3. + +

        3. Run the hide pop-up algorithm given document's auto + pop-up stack's top element, focusPreviousElement, and + hideImmediately.

          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.

    +
    + +

    To find the nearest open ancestral pop-up, + given a Node node and a string ancestorType, perform the + following steps. They return an Element or null.

    + +
      +

    1. Let document be node's node document.

      2. + +

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

      3. + +

    3. Let anchorsToPopUps be an empty map.

      4. + +
    4. +

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

      + +
        +

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

        2. + +

      2. If anchor is not null, then set + anchorsToPopUps[anchor] to popUp.

        3. +
      +
      5. + +
    5. +

      If hintShowing is not null, then:

      + +
        +

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

        2. + +

      2. If anchor is not null, then set + anchorsToPopUps[anchor] to hintShowing.

        3. +
      +
      6. + +

    6. Let popUpPositions be an empty map.

      7. + +

    7. Let index be 0.

      8. + +
    8. +

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

      + +
        +

      1. Set popUpPositions[popUp] to + index.

        2. + +

      2. Increment index by 1.

        3. +
      +
      9. + +
    9. +

      If hintShowing is not null, then:

      + +
        +

      1. Set popUpPositions[hintShowing] to + index.

        2. + +

      2. Increment index by 1.

        3. +
      +
      10. + +
    10. +

      If ancestorType is "new-pop-up", then:

      + +
        +

      1. Set popUpPositions[node] to + index.

        2. +
      +
      11. + +

    11. Let upperBound be 2147483647.

      12. + +

    12. If popUpPositions[node] exists, then set upperBound to + popUpPositions[node].

      13. + +

    13. If hintShowing is not null and ancestorType is "new-pop-up", then set upperBound to + popUpPositions[hintShowing].

      14. + +
    14. +

      If ancestorType is "inclusive", then:

      + +
        +

      1. Let currentNode be node.

        2. + +
      2. +

        While currentNode has a parent node within the flat tree:

        + +
          +
        1. +

          If currentNode's popup attribute is not in + the no pop-up state and currentNode's + pop-up visibility state is showing + and currentNode's popup attribute is not in the + manual state, then:

          + +
            +

          1. If popUpPositions[currentNode] + 1 is greater than + upperBound, then set upperBound to + popUpPositions[currentNode] + 1.

            2. +
          +
          2. + +

        2. Let targetPopUp be currentNode's pop-up target + element.

          3. + +
        3. +

          If targetPopUp's popup attribute is not + null and targetPopUp's pop-up visibility state is showing and targetPopUp's popup attribute is not in the manual state, then:

          + +
            +

          1. If popUpPositions[targetPopUp] + 1 is greater than + upperBound, then set upperBound to + popUpPositions[targetPopUp] + 1.

            2. +
          +
          4. + +

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

          5. +
        +
        3. +
      +
      15. + +

    15. Let seen be an empty set.

      16. + +

    16. Return the result of finding the nearest open ancestral pop-up recursively + given node, popUpPositions, anchorsToPopUps, + upperBound, and seen.

      17. +
    + +

    To find the nearest open ancestral pop-up + recursively, given a Node node, a map + popUpPositions, a map anchorsToPopUps, an integer upperBound, + and a set seen, perform the following steps. They return an + Element or null.

    + +
      +

    1. If node is null, then return null.

      2. + +

    2. If seen contains node, then 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 an algorithm which performs the following steps given + popUp:

      + +
        +
      1. +

        If popUp is not null and popUp's pop-up visibility state + is not showing and popUp's popup attribute is not in the manual state, then:

        + +
          +

        1. Let newPosition be popUpPositions[popUp].

          2. + +
        2. +

          If newPosition is greater than position and newPosition + is less than upperBound, then:

          + +
            +

          1. Set ancestor to popUp.

            2. + +

          2. Set position to newPosition.

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

      Let recurseAndUpdate be an algorithm which performs the following steps given + node:

      + +
        +

      1. Let nearestOpenAncestor be the result of finding the nearest open ancestral pop-up + recursively given node, popUpPositions, + anchorsToPopUps, upperBound, and seen.

        2. + +

      2. Run update given nearestOpenAncestor.

        3. +
      +
      8. + +

    8. Run update given node.

      9. + +
    9. +

      If popUpPositions[node] exists, then:

      + +
        +

      1. Run recurseAndUpdate given node's pop-up anchor element.

        2. + +

      2. Run recurseAndUpdate given node's pop-up + invoker.

        3. +
      +
      10. + +

    10. If node has a pop-up target element, then run + recurseAndUpdate given node's pop-up target element.

      11. + +

    11. If anchorsToPopUps[node] exists, then run + recurseAndUpdate given anchorsToPopUps[node].

      12. + +

    12. Run recurseAndUpdate given node's parent node in the flat + tree.

      13. + +

    13. Return ancestor.

      14. +
    + +

    To get the pop-up anchor element of an + Element element, perform the following steps. They return an + Element or null.

    + +
      +

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

      2. + +

    2. Let anchorAttribute be the result of running get an attribute by + name given element and 'anchor'.

      3. + +

    3. If anchorAttribute is null, then return null.

      4. + +

    4. Return the first element, in tree + order, within element's root's descendants, whose ID is + anchorAttribute; otherwise, if there is no such element, null.

      5. +
    + +

    To find the topmost pop-up auto or hint given a + Document document, perform the following steps. They return an + Element or null.

    + +
      +

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

      2. + +

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

      3. + +

    3. Return null.

      4. +
    + +

    To perform the pop-up focusing steps for an Element + subject:

    + +
      +

    1. Let control be the result of running pop-up focusable area given + subject.

      2. + +

    2. If control is null, then return.

      3. + +

    3. Run the focusing steps given control.

      4. + +

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

      5. + +

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

      6. + +

    6. Empty topDocument's + autofocus candidates.

      7. + +

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

      8. +
    + +

    To get the pop-up focusable area given an element subject, perform the + following steps. They return an Element or null.

    + +
      +

    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's popup attribute 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, then continue.

        3. + +

      3. If node does not have the autofocus + attribute, then continue.

        4. + +

      4. Return node.

        5. +
      +
      3. + +

    3. Return null.

      4. +
    + +

    The pop-up target attributes

    + +

    Supported elements may have the + following content attributes, known as the pop-up target attributes:

    + +
      +

    • popuptoggletarget

      • + +

    • popuphidetarget

      • + +

    • popupshowtarget

      • +
    + +

    The pop-up target attributes allow certain types of buttons to show and hide + element with the popup attribute. If a pop-up target attribute is + specified, then that attribute's value must be the ID of element with the popup attribute.

    + +
    +

    The following shows how popupshowtarget can be + used to open a pop-up:

    + + 
    <div popup=auto id="foo">
+  This is a pop-up!
+</div>
+
+<button popupshowtarget="foo">
+  Show a pop-up
+</button>
    + +

    The following shows how popuptoggletarget can + open and close a manual pop-up, which can't be closed with light dismiss:

    + + 
    <div popup=manual id="foo">
+  This is a pop-up!
+</div>
+
+<button popuptoggletarget="foo">
+  Show or hide a pop-up
+</button>
    +
    + +

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

    + +
      +

    • button elements

      • + +

    • input elements in the Button + state.

      • + +

    • input elements in the Submit + Button state.

      • + +

    • input elements in the Image + Button state.

      • + +

    • input elements in the Reset + Button state.

      • +
    + + DOM interface: + 
    interface mixin PopUpTargetElement {
+  [CEReactions] attribute DOMString? popUpToggleTarget;
+  [CEReactions] attribute DOMString? popUpHideTarget;
+  [CEReactions] attribute DOMString? popUpShowTarget;
+};
    + +

    The popUpToggleTarget IDL attribute must + reflect the popuptoggletarget + attribute.

    + +

    The popUpHideTarget IDL attribute must reflect + the popuphidetarget attribute.

    + +

    The popUpShowTarget IDL attribute must reflect + the popupshowtarget attribute.

    + +

    To run the pop-up target attribute activation behavior given a Node + node:

    + +
      +

    1. If node is disabled, then + return.

      2. + +

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

      3. + +

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

      4. + +

    4. If popUp is null, then return.

      5. + +
    5. +

      If node doesn't have the popuptoggletarget attribute, then:

      + +
        +

      1. If node has the popupshowtarget + attribute and popUp's pop-up visibility state is showing, then return.

        2. + +

      2. If node has the popuphidetarget + attribute and popUp's pop-up visibility state is hidden, 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:

      + +
        +

      • node is a button element in the submit state.

        • + +

      • node is an input element in the submit state.

        • + +

      • node is an input element in the image state.

        • +
      +
      7. + +

    7. If popUp's pop-up visibility state is showing, then run the hide pop-up algorithm + given popUp, true, and false.

      8. + +
    8. +

      Otherwise:

      + +
        +

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

        2. + +

      2. Run show pop-up given popUp.

        3. +
      +
      9. +
    + +

    To get the pop-up target element given a Node node, perform + the following steps. They return an Element or null.

    + +
      +

    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 popupElement be the first element, in + tree order, within node's root's descendants, whose ID is + idref; otherwise, if there is no such element, + null.

      8. + +

    8. If popupElement is null, then return null.

      9. + +

    9. If popupElement's popup attribute is in the + no pop-up state, then return null.

      10. + +

    10. Return popupElement.

      11. +
    + +

    Pop-up light dismiss

    + +
    +

    "Light dismiss" means that pressing the Esc key or clicking outside of a pop-up + whose popup attribute is in the auto or hint + states will close the pop-up.

    +
    + +

    When a Document document receives an Event + event in the capture phase:

    + +
      +

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

      2. + +

    2. If topmostPopup is null, then return.

      3. + +

    3. Let target be event's target.

      4. + +
    4. +

      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 given target and "inclusive".

        2. +
      +
      5. + +
    5. +

      If event is a mouseup event, then:

      + +
        +

      1. Let ancestor be the result of running nearest open ancestral + pop-up given target and "inclusive".

        2. + +

      2. Let sameTarget 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 sameTarget is true, then run hide + all pop-ups until given ancestor, false, false, and true.

        5. +
      +
      6. + +
    6. +

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

      + +
        +

      1. Run the hide pop-up algorithm given topmostPopup, true, and + false.

        2. +
      +
      7. +
    + +

    The defaultopen attribute

    + +

    All elements may have the defaultopen content attribute set. When specified on an + element whose popup attribute is not in the no pop-up state, it makes the element shown automatically + when the page is loaded. defaultopen is a boolean + attribute.

    + +

    The defaultOpen + IDL attribute must reflect the defaultopen + content attribute.

    Loading web pages

    @@ -98271,6 +99601,8 @@ typedef OnBeforeUnloadEventHandlerNonNull? OnBeforeUnl onseeked seeked onseeking seeking onselect select + onpopuphide popuphide + onpopupshow popupshow onslotchange slotchange onstalled stalled onsubmit submit @@ -113102,6 +114434,40 @@ dictionary StorageEventInit : EventInit { element is dropped on the floor.

    • +
  • +

    If element has the defaultopen attribute + set, then:

    + +
      +
    1. +

      Queue an element task on the user interaction task source given + element to run the following steps:

      + +
        +

      1. If element is not connected, then abort these steps.

        2. + +

      2. If element's popup attribute is in the + no pop-up state, then abort these steps.

        3. + +

      3. If element's popup attribute is in the + hint state, then abort these steps.

        4. + +
      4. +

        If element's popup attribute is in the auto state and element's node + document's auto pop-up stack is not empty, then abort these steps.

        + +
        +

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

        +
        +
        5. + +

      5. Run show pop-up given element.

        6. +
      +
      2. +
    +
    • +

  • Push element onto the stack of open elements so that it is the new current node.

    • @@ -118738,6 +120104,26 @@ dialog::backdrop { background: rgba(0,0,0,0.1); } +[popup] { + position: fixed; + inset: 0; + width: fit-content; + height: fit-content; + margin: auto; + border: solid; + padding: 0.25em; + overflow: auto; + color: CanvasText; + background-color: Canvas; +} + +[popup]:open::backdrop { + position: fixed; + inset: 0; + pointer-events: none !important; + background-color: transparent; +} + slot { display: contents; }     @@ -118793,6 +120179,11 @@ form { margin-block-end: 1em; }
  • 'max-height' property to 'calc(100% - 6px - 2em)'
    • +

    Elements with the popup attribute set whose pop-up + visibility state is hidden are expected to act as + if they had a user-agent-level style sheet rule setting their 'display' property set + to 'none'.

    +

    Phrasing content

    @namespace url(http://www.w3.org/1999/xhtml);
@@ -121816,7 +123207,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.
    
 
@@ -125943,6 +127333,11 @@ interface External {
       track
       Enable the track if no other text track is more suitable
       Boolean attribute
+    
+      defaultopen
+      HTML elements
+      Makes pop-up elements automatically open on page load
+      Boolean attribute
     
       defer
       script
@@ -126391,6 +127786,31 @@ interface External {
       video
       Encourage the user agent to display video content within the element's playback area
       Boolean attribute
+    
+      popup
+      HTML elements
+      Makes the element a pop-up element
+      "auto";
+          "hint";
+          "manual";
+    
+      popuphidetarget
+      input;
+          button
+      Hides the specified pop-up element when clicked
+      Id of the element to hide
+    
+      popupshowtarget
+      input;
+          button
+      Shows the specified pop-up element when clicked
+      Id of the element to show
+    
+      popuptoggletarget
+      input;
+          button
+      Toggles the specified pop-up element when clicked
+      Id of the element to toggle
     
       poster
       video
@@ -127107,6 +128527,18 @@ interface External {
       popstate event handler for Window object
       Event handler content attribute
 
+    
+      onpopuphide
+      HTML elements
+      popuphide event handler
+      Event handler content attribute
+
+    
+      onpopupshow
+      HTML elements
+      popupshow event handler
+      Event handler content attribute
+
     
       onprogress
       HTML elements
@@ -127911,6 +129343,18 @@ INSERT INTERFACES HERE
       Window
       Fired at the Window when the user navigates the session history
 
+     
+      popuphide
+      Event
+      Elements
+      Fired on an element with the popup attribute when it is hidden.
+
+     
+      popupshow
+      Event
+      Elements
+      Fired on an element with the popup attribute when it is shown.
+
      
       readystatechange
       Event