From 4c555ebf12a62220184683c976c6ab4f537775a4 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Fri, 29 Apr 2022 12:39:36 -0700
Subject: [PATCH] Add showpopup and hidepopup invoking attributes for popup

This CL adds 'showpopup' and 'hidepopup' as two more invoking
attributes for the Popup API. Details of the expected behavior
are discussed here:

  https://github.com/openui/open-ui/issues/523#issuecomment-1106686358

Bug: 1307772
Change-Id: Ie6c0d72b36cedd827e0b484b5635fcc6b99fb8f6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3609067
Reviewed-by: Joey Arhar <jarhar@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#997841}
---
 .../popup-invoking-attribute.tentative.html   | 150 +++++++++++++-----
 1 file changed, 111 insertions(+), 39 deletions(-)

diff --git a/html/semantics/popups/popup-invoking-attribute.tentative.html b/html/semantics/popups/popup-invoking-attribute.tentative.html
index 22ffce6b5b5d00..7108acc9ae6a83 100644
--- a/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -21,47 +21,119 @@
 </style>
 
 <script>
-  function clickOn(element) {
-    const actions = new test_driver.Actions();
-    return actions.pointerMove(0, 0, {origin: element})
-      .pointerDown({button: actions.ButtonType.LEFT})
-      .pointerUp({button: actions.ButtonType.LEFT})
-      .send();
-  }
+function clickOn(element) {
+  const actions = new test_driver.Actions();
+  return actions.pointerMove(0, 0, {origin: element})
+    .pointerDown({button: actions.ButtonType.LEFT})
+    .pointerUp({button: actions.ButtonType.LEFT})
+    .send();
+}
 
-  const popup = document.querySelector('[popup]');
-  const button = document.querySelector('button');
-  let showCount = 0;
-  let hideCount = 0;
-  popup.addEventListener('show',() => ++showCount);
-  popup.addEventListener('hide',() => ++hideCount);
+const popup = document.querySelector('[popup]');
+const button = document.querySelector('button');
+let showCount = 0;
+let hideCount = 0;
+popup.addEventListener('show',() => ++showCount);
+popup.addEventListener('hide',() => ++hideCount);
 
-  async function assertState(expectOpen,expectShow,expectHide) {
-    assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
-    await new Promise(resolve => requestAnimationFrame(resolve));
-    assert_equals(showCount,expectShow,'Show count is incorrect');
-    assert_equals(hideCount,expectHide,'Hide count is incorrect');
-  }
+async function assertState(expectOpen,expectShow,expectHide) {
+  assert_equals(popup.matches(':popup-open'),expectOpen,'Popup open state is incorrect');
+  await new Promise(resolve => requestAnimationFrame(resolve));
+  assert_equals(showCount,expectShow,'Show count is incorrect');
+  assert_equals(hideCount,expectHide,'Hide count is incorrect');
+}
+
+promise_test(async () => {
+  showCount = hideCount = 0;
+  await assertState(false,0,0);
+  await clickOn(button);
+  await assertState(true,1,0);
+  popup.hidePopup();
+  await assertState(false,1,1);
+  button.click();
+  await assertState(true,2,1);
+  popup.hidePopup();
+  await assertState(false,2,2);
+}, "Clicking a togglepopup button opens a closed popup");
 
-  promise_test(async () => {
-    showCount = hideCount = 0;
-    await assertState(false,0,0);
-    await clickOn(button);
-    await assertState(true,1,0);
-    popup.hidePopup();
-    await assertState(false,1,1);
-    button.click();
-    await assertState(true,2,1);
-    popup.hidePopup();
-    await assertState(false,2,2);
-  }, "Clicking a togglepopup button opens a closed popup");
+promise_test(async () => {
+  showCount = hideCount = 0;
+  await assertState(false,0,0);
+  await clickOn(button);
+  await assertState(true,1,0);
+  await clickOn(button);
+  await assertState(false,1,1);
+}, "Clicking a togglepopup button closes an open popup");
 
-  promise_test(async () => {
-    showCount = hideCount = 0;
-    await assertState(false,0,0);
-    await clickOn(button);
-    await assertState(true,1,0);
-    await clickOn(button);
-    await assertState(false,1,1);
-  }, "Clicking a togglepopup button closes an open popup");
+["popup","hint","async"].forEach(type => {
+  [0,1,2].forEach(t => {
+    [0,1,2].forEach(s => {
+      [0,1,2].forEach(h => {
+        const popup1 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-1'});
+        const popup2 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-2'});
+        assert_not_equals(popup1.id,popup2.id);
+        assert_true(!document.getElementById(popup1.id));
+        assert_true(!document.getElementById(popup2.id));
+        const button = document.createElement('button');
+        document.body.appendChild(popup1);
+        document.body.appendChild(popup2);
+        document.body.appendChild(button);
+        if (t) button.setAttribute('togglepopup',t===1 ? popup1.id : popup2.id);
+        if (s) button.setAttribute('showpopup',s===1 ? popup1.id : popup2.id);
+        if (h) button.setAttribute('hidepopup',h===1 ? popup1.id : popup2.id);
+        test(() => {
+          // This mimics the expected logic:
+          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 otherId = expectedId !== 1 ? 1 : 2;
+          function assert_popup(num,state,message) {
+            assert_true(num>0);
+            assert_equals((num===1 ? popup1 : popup2).matches(':popup-open'),state,message || "");
+          }
+          assert_popup(expectedId,false);
+          assert_popup(otherId,false);
+          button.click();
+          assert_popup(otherId,false,'The other popup should never change');
+          switch (expectedBehavior) {
+            case "toggle":
+            case "show":
+              assert_popup(expectedId,true,'Toggle or show should show the popup');
+              (expectedId===1 ? popup1 : popup2).hidePopup(); // Hide the popup
+              break;
+            case "hide":
+            case "none":
+              assert_popup(expectedId,false,'Hide or none should leave the popup hidden');
+              break;
+            default:
+              assert_unreached();
+          }
+          (expectedId===1 ? popup1 : popup2).showPopup(); // Show the popup
+          assert_popup(expectedId,true);
+          assert_popup(otherId,false);
+          button.click();
+          assert_popup(otherId,false,'The other popup should never change');
+          switch (expectedBehavior) {
+            case "toggle":
+            case "hide":
+              assert_popup(expectedId,false,'Toggle or hide should hide the popup');
+              break;
+            case "show":
+            case "none":
+              assert_popup(expectedId,true,'Show or none should leave the popup showing');
+              break;
+            default:
+              assert_unreached();
+          }
+        },`Test ${button.outerHTML} with popup=${type}`);
+        button.remove();
+        popup1.remove();
+        popup2.remove();
+      });
+    });
+  });
+});
 </script>