Bug 1818807 [wpt PR 38701] - Change popover invoking attributes, a=te…

…stonly

Automatic update from web-platform-tests
Change popover invoking attributes

See [1] for discussion. This changes the Popover invoking attribute
behavior. Previously, three attributes were used to set the invoking
relationship and behavior:
 - popovertoggletarget
 - popovershowtarget
 - popoverhidetarget

Those each could point to an idref for a popover, and the behavior
would be controlled by which attribute was used. However, there was
a confusing situation in the case that multiple such attributes
were used on a single element, and even more so when they pointed
to different elements. While there was concrete logic for resolving
that situation, it was confusing at best.

The new logic is controlled by two attributes:
 - popovertarget
 - popovertargetaction

The element reference is dictated by `popovertarget`, via an idref
or through element reflection (via `foo.popoverTargetElement = bar`).
The behavior is dictated by the (string valued) popovertargetaction
attribute, which can be one of "toggle", "show", or "hide". If any
other value is used (including missing attribute or invalid value),
the behavior and IDL reflected value is "toggle".

[1] whatwg/html#8894 (comment)

Bug: 1307772
Change-Id: I2e530efe26032599f9376c8d5f4fe2a7f430a26b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4288730
Auto-Submit: Mason Freed <[email protected]>
Reviewed-by: Joey Arhar <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Commit-Queue: Joey Arhar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1109867}

--

wpt-commits: 588e82830bb860050168fa89eddc93ac32293662
wpt-pr: 38701

testing/web-platform/tests/html/semantics/popovers/popover-anchor-idl-property.html

@@ -8,7 +8,7 @@
 
 <button id=b1>This is an anchor button</button>
 <div popover id=p1 anchor=b1>This is a popover</div>
-<button id=b2 popovertoggletarget=p1>This button invokes the popover but isn't an anchor</button>
+<button id=b2 popovertarget=p1>This button invokes the popover but isn't an anchor</button>
 
 <script>
   test(function() {

testing/web-platform/tests/html/semantics/popovers/popover-anchor-nested-display.html

@@ -5,11 +5,11 @@
 <link rel=help href="https://html.spec.whatwg.org/multipage/popover.html">
 <link rel=match href="popover-anchor-nested-display-ref.html">
 
-<button id=main-menu-button popovertoggletarget=main-menu>Show menu</button>
+<button id=main-menu-button popovertarget=main-menu>Show menu</button>
 
 <div id=main-menu popover anchor=main-menu-button>
   <div>Foo</div>
-  <button id=nested-menu-button popovertoggletarget=nested-menu>
+  <button id=nested-menu-button popovertarget=nested-menu>
     Show nested menu
   </button>
   <div>Bar</div>

testing/web-platform/tests/html/semantics/popovers/popover-focus-2.html

@@ -14,15 +14,15 @@
   <button id=button1>Button1</button>
   <div popover id=popover1 style="top:100px">
     <button id=inside_popover1>Inside1</button>
-    <button id=invoker2 popovertoggletarget=popover2>Nested Invoker 2</button>
+    <button id=invoker2 popovertarget=popover2>Nested Invoker 2</button>
     <button id=inside_popover2>Inside2</button>
   </div>
   <button id=button2>Button2</button>
-  <button popovertoggletarget=popover1 id=invoker1>Invoker1</button>
+  <button popovertarget=popover1 id=invoker1>Invoker1</button>
   <button id=button3>Button3</button>
   <div popover id=popover2 style="top:200px">
     <button id=inside_popover3>Inside3</button>
-    <button id=invoker3 popovertoggletarget=popover3>Nested Invoker 3</button>
+    <button id=invoker3 popovertarget=popover3>Nested Invoker 3</button>
   </div>
   <div popover id=popover3 style="top:300px">
     Non-focusable popover
@@ -90,11 +90,11 @@
 }, "Popover focus navigation");
 </script>
 
-<button id=circular0 popovertoggletarget=popover4>Invoker</button>
+<button id=circular0 popovertarget=popover4>Invoker</button>
 <div id=popover4 popover>
-  <button id=circular1 autofocus popoverhidetarget=popover4></button>
-  <button id=circular2 popovershowtarget=popover4></button>
-  <button id=circular3 popovertoggletarget=popover4></button>
+  <button id=circular1 autofocus popovertarget=popover4 popovertargetaction=hide></button>
+  <button id=circular2 popovertarget=popover4 popovertargetaction=show></button>
+  <button id=circular3 popovertarget=popover4></button>
 </div>
 <button id=circular4>after</button>
 <script>
@@ -107,16 +107,16 @@
 </script>
 
 <div id=deleted>
-  <button popovershowtarget=deleted1>Show popover</button>
+  <button popovertarget=deleted1 popovertargetaction=show>Show popover</button>
   <div popover id=deleted1>
-    <button popoverhidetarget=deleted1 autofocus>Hide popover</button>
+    <button popovertarget=deleted1 popovertargetaction=hide autofocus>Hide popover</button>
   </div>
 </div>
 <script>
 promise_test(async t => {
   const invoker = document.querySelector('#deleted>button');
   const popover = document.querySelector('#deleted>[popover]');
-  const hideButton = popover.querySelector('[popoverhidetarget]');
+  const hideButton = popover.querySelector('[popovertargetaction=hide]');
   invoker.focus(); // Make sure button is focused.
   assert_equals(document.activeElement,invoker);
   await sendEnter(); // Activate the invoker

testing/web-platform/tests/html/semantics/popovers/popover-focus.html

@@ -71,7 +71,7 @@
       button.remove();
     });
     popover.id = popoverId;
-    button.setAttribute('popovertoggletarget', popoverId);
+    button.setAttribute('popovertarget', popoverId);
     return button;
   }
   function addPriorFocus(t) {
@@ -187,7 +187,7 @@
       const priorFocus = addPriorFocus(t);
       assert_false(popover.matches(':open'), 'popover should start out hidden');
       let button = addInvoker(t, popover);
-      assert_equals(button.getAttribute('popovertoggletarget'), popover.id, 'This test assumes the button uses `popovertoggletarget`.');
+      assert_equals(button.getAttribute('popovertarget'), popover.id, 'This test assumes the button uses `popovertarget`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
       assert_false(popover.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
@@ -200,8 +200,8 @@
       assert_false(isElementVisible(popover));
 
       // Same thing, but the button is contained within the popover
-      button.removeAttribute('popovertoggletarget');
-      button.setAttribute('popoverhidetarget', popover.id);
+      button.setAttribute('popovertarget', popover.id);
+      button.setAttribute('popovertargetaction', 'hide');
       popover.appendChild(button);
       t.add_cleanup(() => button.remove());
       priorFocus.focus();
@@ -216,7 +216,7 @@
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
       assert_false(isElementVisible(popover));
 
-      // Same thing, but the button is unrelated (no popovertoggletarget)
+      // Same thing, but the button is unrelated (no popovertarget)
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();

testing/web-platform/tests/html/semantics/popovers/popover-invoking-attribute.html

@@ -13,19 +13,15 @@
 
 <body>
 <script>
-const buttonLogic = (t,s,h) => {
-  // This mimics the expected logic for button invokers:
-  let expectedBehavior = t ? "toggle" : (s ? "show" : (h ? "hide" : "none"));
-  let expectedId = t || s || h || 1;
-  if (!t && s && h) {
-    // Special case - only use toggle if the show/hide idrefs match.
-    expectedBehavior = (s === h) ? "toggle" : "show";
+const actionReflectionLogic = (action) => {
+  switch (action?.toLowerCase()) {
+    case "show": return "show";
+    case "hide": return "hide";
+    default: return "toggle";
   }
-  return {expectedBehavior, expectedId};
 }
-const noActivationLogic = (t,s,h) => {
-  // This does not activate any popovers.
-  return {expectedBehavior: "none", expectedId: 1};
+const noActivationLogic = (action) => {
+  return "none";
 }
 function makeElementWithType(element,type) {
   return (test) => {
@@ -35,26 +31,20 @@
     return el;
   };
 }
-function setInvokingContentAttribute(invoker,attr,idref) {
-  invoker.setAttribute(attr,idref);
-  assert_equals(invoker[attr + "Element"],document.getElementById(idref));
-}
 const supportedButtonTypes = ['button','reset','submit',''].map(type => {
   return   {
     name: `<button type="${type}">`,
     makeElement: makeElementWithType('button',type),
     invokeFn: el => {el.focus(); el.click()},
-    getExpectedLogic: buttonLogic,
-    supported: true,
+    getExpectedLogic: actionReflectionLogic,
   };
 });
 const supportedInputButtonTypes = ['button','reset','submit','image'].map(type => {
   return   {
     name: `<input type="${type}">`,
     makeElement: makeElementWithType('input',type),
     invokeFn: el => {el.focus(); el.click()},
-    getExpectedLogic: buttonLogic,
-    supported: true,
+    getExpectedLogic: actionReflectionLogic,
   };
 });
 const unsupportedTypes = ['text','email','password','search','tel','url','checkbox','radio','range','file','color','date','datetime-local','month','time','week','number'].map(type => {
@@ -63,7 +53,6 @@
     makeElement: makeElementWithType('input',type),
     invokeFn: (el) => {el.focus();},
     getExpectedLogic: noActivationLogic, // None of these support popover invocation
-    supported: false,
   };
 });
 const invokers = [
@@ -74,86 +63,70 @@
 window.addEventListener('load', () => {
   ["auto","manual"].forEach(type => {
     invokers.forEach(testcase => {
-      let t_set = [1], s_set = [1], h_set = [1];
-      if (testcase.supported) {
-        t_set = s_set = h_set = [0,1,2]; // Test all permutations
-      }
-      t_set.forEach(t => {
-        s_set.forEach(s => {
-          h_set.forEach(h => {
-            [false,true].forEach(use_idl => {
-              promise_test(async test => {
-                const popover1 = Object.assign(document.createElement('div'),{popover: type, id: 'popover-1'});
-                const popover2 = Object.assign(document.createElement('div'),{popover: type, id: 'popover-2'});
-                assert_equals(popover1.popover,type);
-                assert_equals(popover2.popover,type);
-                assert_not_equals(popover1.id,popover2.id);
-                const invoker = testcase.makeElement(test);
-                if (use_idl) {
-                  invoker.popoverToggleTargetElement = t===1 ? popover1 : (t===2 ? popover2 : null);
-                  invoker.popoverShowTargetElement = s===1 ? popover1 : (s===2 ? popover2 : null);
-                  invoker.popoverHideTargetElement = h===1 ? popover1 : (h===2 ? popover2 : null);
-                } else {
-                  if (t) setInvokingContentAttribute(invoker,'popoverToggleTarget',t===1 ? popover1.id : popover2.id);
-                  if (s) setInvokingContentAttribute(invoker,'popoverShowTarget',s===1 ? popover1.id : popover2.id);
-                  if (h) setInvokingContentAttribute(invoker,'popoverHideTarget',h===1 ? popover1.id : popover2.id);
-                }
-                assert_true(!document.getElementById(popover1.id));
-                assert_true(!document.getElementById(popover2.id));
-                document.body.appendChild(popover1);
-                document.body.appendChild(popover2);
-                test.add_cleanup(() => {
-                  popover1.remove();
-                  popover2.remove();
-                });
-                const {expectedBehavior, expectedId} = testcase.getExpectedLogic(t,s,h);
-                const otherId = expectedId !== 1 ? 1 : 2;
-                function assertPopoverShowing(num,state,message) {
-                  assert_true(num>0,`Invalid expectedId ${num}`);
-                  assert_equals((num===1 ? popover1 : popover2).matches(':open'),state,message || "");
-                }
-                assertPopoverShowing(expectedId,false);
-                assertPopoverShowing(otherId,false);
-                await testcase.invokeFn(invoker);
-                assert_equals(document.activeElement,invoker,'Focus should end up on the invoker');
-                assertPopoverShowing(otherId,false,'The other popover should never change');
-                switch (expectedBehavior) {
-                  case "toggle":
-                  case "show":
-                    assertPopoverShowing(expectedId,true,'Toggle or show should show the popover');
-                    (expectedId===1 ? popover1 : popover2).hidePopover(); // Hide the popover
-                    break;
-                  case "hide":
-                  case "none":
-                    assertPopoverShowing(expectedId,false,'Hide or none should leave the popover hidden');
-                    break;
-                  default:
-                    assert_unreached();
-                }
-                if (expectedBehavior === "none") {
-                  // If no behavior is expected, then there is nothing left to test. Even re-focusing
-                  // a control that has no expected behavior may hide an open popover via light dismiss.
-                  return;
-                }
-                (expectedId===1 ? popover1 : popover2).showPopover(); // Show the popover directly
-                assert_equals(document.activeElement,invoker,'The popover should not shift focus');
-                assertPopoverShowing(expectedId,true);
-                assertPopoverShowing(otherId,false);
-                await testcase.invokeFn(invoker);
-                assertPopoverShowing(otherId,false,'The other popover should never change');
-                switch (expectedBehavior) {
-                  case "toggle":
-                  case "hide":
-                    assertPopoverShowing(expectedId,false,'Toggle or hide should hide the popover');
-                    break;
-                  case "show":
-                    assertPopoverShowing(expectedId,true,'Show should leave the popover showing');
-                    break;
-                  default:
-                    assert_unreached();
-                }
-              },`Test ${testcase.name}, t=${t}, s=${s}, h=${h}, ${use_idl ? "IDL" : "Content Attr"}, with popover=${type}`);
-            });
+      ["toggle","hide","show","ShOw","garbage",null,undefined].forEach(action => {
+        [false,true].forEach(use_idl_for_target => {
+          [false,true].forEach(use_idl_for_action => {
+            promise_test(async test => {
+              const popover = Object.assign(document.createElement('div'),{popover: type, id: 'my-popover'});
+              assert_equals(popover.popover,type,'reflection');
+              const invoker = testcase.makeElement(test);
+              if (use_idl_for_target) {
+                invoker.popoverTargetElement = popover;
+                assert_equals(invoker.getAttribute('popovertarget'),'','attribute value');
+              } else {
+                invoker.setAttribute('popovertarget',popover.id);
+              }
+              if (use_idl_for_action) {
+                invoker.popoverTargetAction = action;
+                assert_equals(invoker.getAttribute('popovertargetaction'),String(action),'action reflection');
+              } else {
+                invoker.setAttribute('popovertargetaction',action);
+              }
+              assert_true(!document.getElementById(popover.id));
+              assert_equals(invoker.popoverTargetElement,null,'targetElement should be null before the popover is in the document');
+              assert_equals(invoker.popoverTargetAction,actionReflectionLogic(action),'action should be correct immediately');
+              document.body.appendChild(popover);
+              test.add_cleanup(() => {popover.remove();});
+              assert_equals(invoker.popoverTargetElement,popover,'target element should be returned once it\'s in the document');
+              assert_false(popover.matches(':open'));
+              await testcase.invokeFn(invoker);
+              assert_equals(document.activeElement,invoker,'Focus should end up on the invoker');
+              expectedBehavior = testcase.getExpectedLogic(action);
+              switch (expectedBehavior) {
+                case "toggle":
+                case "show":
+                  assert_true(popover.matches(':open'),'Toggle or show should show the popover');
+                  popover.hidePopover(); // Hide the popover
+                  break;
+                case "hide":
+                case "none":
+                  assert_false(popover.matches(':open'),'Hide or none should leave the popover hidden');
+                  break;
+                default:
+                  assert_unreached();
+              }
+              if (expectedBehavior === "none") {
+                // If no behavior is expected, then there is nothing left to test. Even re-focusing
+                // a control that has no expected behavior may hide an open popover via light dismiss.
+                return;
+              }
+              assert_false(popover.matches(':open'));
+              popover.showPopover(); // Show the popover directly
+              assert_equals(document.activeElement,invoker,'The popover should not shift focus');
+              assert_true(popover.matches(':open'));
+              await testcase.invokeFn(invoker);
+              switch (expectedBehavior) {
+                case "toggle":
+                case "hide":
+                  assert_false(popover.matches(':open'),'Toggle or hide should hide the popover');
+                  break;
+                case "show":
+                  assert_true(popover.matches(':open'),'Show should leave the popover showing');
+                  break;
+                default:
+                  assert_unreached();
+              }
+            },`Test ${testcase.name}, action=${action}, ${use_idl_for_target ? "popoverTarget IDL" : "popovertarget attr"}, ${use_idl_for_action ? "popoverTargetAction IDL" : "popovertargetaction attr"}, with popover=${type}`);
           });
         });
       });
@@ -164,7 +137,7 @@
 
 
 
-<button popovertoggletarget=p1>Toggle Popover 1</button>
+<button popovertarget=p1>Toggle Popover 1</button>
 <div popover id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popover #1</div>
 
 <script>
@@ -206,7 +179,7 @@
     await assertState(true,2,1);
     popover.hidePopover();
     await assertState(false,2,2);
-  }, "Clicking a popovertoggletarget button opens a closed popover (also check event counts)");
+  }, "Clicking a popovertarget button opens a closed popover (also check event counts)");
 
   promise_test(async () => {
     showCount = hideCount = 0;
@@ -215,6 +188,6 @@
     await assertState(true,1,0);
     await clickOn(button);
     await assertState(false,1,1);
-  }, "Clicking a popovertoggletarget button closes an open popover (also check event counts)");
+  }, "Clicking a popovertarget button closes an open popover (also check event counts)");
 });
 </script>