From e4bb54fa53687022944d7b2b68bc1ae607f85899 Mon Sep 17 00:00:00 2001 From: Anne van Kesteren Date: Tue, 28 Feb 2023 17:04:19 -0800 Subject: [PATCH] Revamp the popover target attributes Instead of popoverhidetarget, popovershowtarget, and popovertoggletarget, we will now have popovertarget and popovertargetaction. The former for targeting an element and the latter for determining what to do with the target. Tests: https://github.com/web-platform-tests/wpt/pull/38701. Fixes #8894. --- source | 300 ++++++++++++++++++++++----------------------------------- 1 file changed, 116 insertions(+), 184 deletions(-) diff --git a/source b/source index 6de62d1e183..ba6902ea65d 100644 --- a/source +++ b/source @@ -45318,9 +45318,8 @@ interface HTMLLabelElement : HTMLElement {
name
pattern
placeholder
-
popoverhidetarget
-
popovershowtarget
-
popovertoggletarget
+
popovertarget
+
popovertargetaction
readonly
required
size
@@ -46168,7 +46167,7 @@ interface HTMLInputElement : HTMLElement { - popoverhidetarget + popovertarget · · @@ -46192,31 +46191,7 @@ interface HTMLInputElement : HTMLElement { - popovershowtarget - · - · - - · - · - · - · - - - - · - · - · - · - · - - · - Yes - Yes - Yes - - - - popovertoggletarget + popovertargetaction · · @@ -47164,9 +47139,8 @@ interface HTMLInputElement : HTMLElement { multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, readonly, required, size, @@ -47302,9 +47276,8 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, step, and width.

@@ -47406,9 +47379,8 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, step, and width.

@@ -47512,9 +47484,8 @@ interface HTMLInputElement : HTMLElement { max, min, multiple, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, step, and width.

@@ -47783,9 +47754,8 @@ ldh-str = < as defined in height, max, min, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, step, and width.

@@ -47882,9 +47852,8 @@ ldh-str = < as defined in max, min, multiple, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, step, and width.

@@ -48058,9 +48027,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -48212,9 +48180,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -48370,9 +48337,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -48524,9 +48490,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -48671,9 +48636,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -48836,9 +48800,8 @@ ldh-str = < as defined in minlength, multiple, pattern, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, size, src, and width.

@@ -49109,9 +49072,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, readonly, required, size, @@ -49218,9 +49180,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, readonly, required, size, @@ -49335,9 +49296,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, readonly, size, src, @@ -49513,9 +49473,8 @@ ldh-str = < as defined in multiple, pattern, placeholder, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, readonly, size, src, @@ -49766,9 +49725,8 @@ ldh-str = < as defined in min, minlength, pattern, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, placeholder, readonly, size, @@ -49854,9 +49812,8 @@ ldh-str = < as defined in formmethod, formnovalidate, formtarget, - popoverhidetarget, - popovershowtarget, and - popovertoggletarget content + popovertarget, and + popovertargetaction content attributes; value IDL attribute.

The value IDL attribute is in mode formnovalidate, formtarget, height, - popoverhidetarget, - popovershowtarget, - popovertoggletarget, + popovertarget, + popovertargetaction, src, and width content attributes; value IDL attribute.

@@ -50245,9 +50201,8 @@ ldh-str = < as defined in apply to the element: - popoverhidetarget, - popovershowtarget, and - popovertoggletarget.

+ popovertarget and + popovertargetaction.

The following content attributes must not be specified and do not apply to the element: @@ -50331,9 +50286,8 @@ ldh-str = < as defined in apply to the element: - popoverhidetarget, - popovershowtarget, and - popovertoggletarget.

+ popovertarget and + popovertargetaction.

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

formnovalidate
formtarget
name
-
popoverhidetarget
-
popovershowtarget
-
popovertoggletarget
+
popovertarget
+
popovertargetaction
type
value
DragEventInit : MouseEventInit {

  • The popovers are nested within each other in the DOM tree. In this case, the descendant popover is the "child" and its ancestor popover is the "parent".

    • -

  • An invoking element (e.g. a button) has one of the invoking attributes (e.g. - popovertoggletarget) pointing to a popover. In - this case, the popover is the "child", and the DOM-contained popover of the invoking element is - the "parent". The invoker must be in a popover and reference an open popover.

    • +

  • An invoking element (e.g. a button) has a popovertarget attribute pointing to a popover. In this case, + the popover is the "child", and the DOM-contained popover of the invoking element is the + "parent". The invoker must be in a popover and reference an open popover.

    • In each of the relationships formed above, the parent popover must be strictly lower in the @@ -82368,71 +82321,83 @@ dictionary DragEventInit : MouseEventInit {

  • Return true.

    • -

    The popover target attributes

    +

    The popover target attributes

    -

    Buttons may have the following content attributes, known - as the popover target attributes:

    +

    Buttons may have the following content attributes:

    • popovertoggletarget

      • + data-x="attr-popovertarget">popovertarget

    • popoverhidetarget

      • + data-x="attr-popovertargetaction">popovertargetaction

      +
    -

  • popovershowtarget

    • +

    If specified, the popovertarget attribute value must + be the ID of an element with a popover attribute in the same tree as the button with the popovertarget attribute.

    + +

    The popovertargetaction is an enumerated + attribute with the following keywords and states:

    + +
      +
    • The "toggle" keyword and corresponding + state.
      • + +
    • The "show" keyword and corresponding + state.
      • + +
    • The "hide" keyword and corresponding + state.
    -

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

    +

    The popovertargetaction's invalid value default and missing value + default are both the toggle state.

    -

    The following shows how popovershowtarget can - be used to open a popover:

    +

    The following shows how popovertarget in combination + with popovertargetaction can be used to show a + popover:

    <div popover=auto id="foo">
   This is a popover!
 </div>
 
-<button popovershowtarget="foo">
+<button popovertarget="foo" popovertargetaction="show">
   Show a popover
 </button>
    -

    The following shows how popovertoggletarget - can open and close a manual popover, which can't be closed with light dismiss:

    +

    The following shows how popovertarget can open and + close a manual popover, which can't be closed with light dismiss:

    <div popover=manual id="foo">
   This is a popover!
 </div>
 
-<button popovertoggletarget="foo">
+<button popovertarget="foo">
   Show or hide a popover
 </button>
    DOM interface: 
    interface mixin PopoverTargetElement {
-  [CEReactions] attribute Element? popoverToggleTargetElement;
-  [CEReactions] attribute Element? popoverHideTargetElement;
-  [CEReactions] attribute Element? popoverShowTargetElement;
+  [CEReactions] attribute Element? popoverTargetElement;
+  [CEReactions] attribute DOMString popoverTargetAction;
 };

    The popoverToggleTargetElement IDL attribute must - reflect the popovertoggletarget - attribute.

    - -

    The popoverHideTargetElement IDL attribute must - reflect the popoverhidetarget - attribute.

    + data-x="dom-popoverTargetElement">popoverTargetElement IDL attribute must + reflect the popovertarget attribute.

    The popoverShowTargetElement IDL attribute must - reflect the popovershowtarget + data-x="dom-popoverTargetAction">popoverTargetAction IDL attribute must + reflect the popovertargetaction attribute.

    To run the popover target attribute activation behavior given a Node @@ -82443,22 +82408,15 @@ dictionary DragEventInit : MouseEventInit {

  • If popover is null, then return.

    • -
  • -

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

    - -
      -

    1. If node has a popovershowtarget attribute and popover's - popover visibility state is showing, - then return.

      2. +

    2. If node's popovertargetaction is + in the show state and popover's + popover visibility state is showing, + then return.

      3. -

    3. If node has a popoverhidetarget attribute and popover's - popover visibility state is hidden, - then return.

      4. -
    -
    • +

  • If node's popovertargetaction is + in the hide state and popover's + popover visibility state is hidden, then + return.

  • If popover's popover visibility state is showing and the result of running check popover @@ -82491,29 +82449,8 @@ dictionary DragEventInit : MouseEventInit {

  • If node has a form owner and node is a submit button, then return null.

    • -

  • Let idref be null.

    • - -

  • If node has a popovertoggletarget attribute, then set - idref to the value of node's popovertoggletarget attribute.

    • - -

  • Otherwise, if node has a popovershowtarget attribute, then set idref - to the value of node's popovershowtarget attribute.

    • - -

  • Otherwise, if node has a popoverhidetarget attribute, then set idref - to the value of node's popoverhidetarget attribute.

    • - -

  • If idref is null, then return null.

    • - -

  • Let popoverElement 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.

    • +

  • Let popoverElement be node's popoverTargetElement-associated element.

  • If popoverElement is null, then return null.

    • @@ -128584,9 +128521,8 @@ interface External { formnovalidate; formtarget; name; - popoverhidetarget; - popovershowtarget; - popovertoggletarget; + popovertarget; + popovertargetaction; type; value HTMLButtonElement @@ -129069,9 +129005,8 @@ interface External { name; pattern; placeholder; - popoverhidetarget; - popovershowtarget; - popovertoggletarget; + popovertarget; + popovertargetaction; readonly; required; size; @@ -131068,20 +131003,17 @@ interface External { "auto"; "manual"; - popoverhidetarget - input; button - Hides the specified popover element when clicked - ID of the element to hide - - popovershowtarget + popovertarget input; button - Shows the specified popover element when clicked - ID of the element to show + Targets a popover element to toggle, show, or hide + ID of the element to toggle, show or, hide - popovertoggletarget + popovertargetaction input; button - Toggles the specified popover element when clicked - ID of the element to toggle + Indicates whether a targeted popover element is to be toggled, shown, or hidden + "toggle"; + "show"; + "hide" poster video