Convert 'triggerpopup' attribute to 'togglepopup'

Per the [1] resolution, OpenUI has decided to change from
'triggerpopup' to 'togglepopup', with the corresponding behavior
change that when the popup is already open, clicking the invoking
button again will cause the popup to be hidden.

[1] openui/open-ui#508 (comment)

Bug: 1307772
Change-Id: I9a9720a2acb0c952173bed47424ffbbfc8144714

html/semantics/popups/popup-focus.tentative.html

@@ -129,7 +129,7 @@
         button.remove();
       });
       popup.id = popupId;
-      button.setAttribute('triggerpopup', popupId);
+      button.setAttribute('togglepopup', popupId);
       priorFocus.focus();
       button.click();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);

html/semantics/popups/popup-invoking-attribute.tentative.html

@@ -9,11 +9,15 @@
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<button triggerpopup=p1>Open Popup 1</button>
+<button togglepopup=p1>Toggle Popup 1</button>
 <div popup=popup id=p1>This is popup #1</div>
 
 <style>
-  [popup] { border: 5px solid red; }
+  [popup] {
+    border: 5px solid red;
+    top: 100px;
+    left: 100px;
+  }
 </style>
 
 <script>
@@ -27,14 +31,37 @@
 
   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');
+  }
 
   promise_test(async () => {
-    assert_false(popup.matches(':popup-open'));
+    showCount = hideCount = 0;
+    await assertState(false,0,0);
     await clickOn(button);
-    assert_true(popup.matches(':popup-open'));
+    await assertState(true,1,0);
     popup.hidePopup();
-    assert_false(popup.matches(':popup-open'));
+    await assertState(false,1,1);
     button.click();
-    assert_true(popup.matches(':popup-open'));
-  }, "Basic test of the 'popup' attribute on a button");
+    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");
 </script>

html/semantics/popups/popup-light-dismiss.tentative.html

@@ -9,17 +9,18 @@
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<button id=b1 triggerpopup='p1'>Popup 1</button>
+<button id=b1 togglepopup='p1'>Popup 1</button>
+<button id=p1anchor>Popup1 anchor (no action)</button>
 <span id=outside>Outside all popups</span>
-<div popup=popup id=p1 anchor=b1>
+<div popup=popup id=p1 anchor=p1anchor>
   <span id=inside1>Inside popup 1</span>
-  <button id=b2 triggerpopup='p2'>Popup 2</button>
+  <button id=b2 togglepopup='p2'>Popup 2</button>
 </div>
 <div popup=popup id=p2 anchor=b2>
   <span id=inside2>Inside popup 2</span>
 </div>
 
-<button id=b3 triggerpopup=p3>Popup 3 - button 3
+<button id=b3 togglepopup=p3>Popup 3 - button 3
   <div popup=popup id=p4>Inside popup 4</div>
 </button>
 <div popup=popup id=p3>Inside popup 3</div>
@@ -71,6 +72,7 @@
 
   const popup1 = document.querySelector('#p1');
   const button1 = document.querySelector('#b1');
+  const popup1anchor = document.querySelector('#p1anchor');
   const popup2 = document.querySelector('#p2');
   const outside = document.querySelector('#outside');
   const inside1 = document.querySelector('#inside1');
@@ -146,20 +148,22 @@
 
     assert_true(popup1.matches(':popup-open'));
     p1HideCount = popup1HideCount;
-    await clickOn(button1);
+    await clickOn(popup1anchor);
     test(t => {
       assert_true(popup1.matches(':popup-open'),'popup1 not open');
       assert_equals(popup1HideCount,p1HideCount);
       popup1.hidePopup(); // Cleanup
       assert_false(popup1.matches(':popup-open'));
-    },'Clicking on anchor element shouldn\'t close its popup');
+    },'Clicking on anchor element (that isn\'t an invoking element) shouldn\'t close its popup');
 
     await clickOn(button3);
     test(t => {
       assert_true(popup3.matches(':popup-open'),'invoking element should open popup');
       popup4.showPopup();
       assert_true(popup4.matches(':popup-open'));
       assert_true(popup3.matches(':popup-open'));
+      popup3.hidePopup(); // Cleanup
+      assert_false(popup3.matches(':popup-open'));
     },'An invoking element should be part of the ancestor chain');
 
     await clickOn(button3);

html/semantics/popups/popup-stacking.tentative.html

@@ -26,19 +26,19 @@
 </div>
 
 <div class="example">
-  <p>triggerpopup attribute relationship</p>
+  <p>togglepopup attribute relationship</p>
   <div popup=popup class=ancestor><p>Ancestor popup</p>
-    <button triggerpopup=trigger1 class=clickme>Button</button>
+    <button togglepopup=trigger1 class=clickme>Button</button>
   </div>
   <div id=trigger1 popup=popup class=child><p>Child popup</p></div>
 </div>
 
 <div class="example">
-  <p>nested triggerpopup attribute relationship</p>
+  <p>nested togglepopup attribute relationship</p>
   <div popup=popup class=ancestor><p>Ancestor popup</p>
     <div>
       <div>
-        <button triggerpopup=trigger2 class=clickme>Button</button>
+        <button togglepopup=trigger2 class=clickme>Button</button>
       </div>
     </div>
   </div>