Add triggerpopup content attribute support [popup [5/N]

This CL adds support for the Popup API's triggerpopup content attribute.
Note that in the process, this *removes* support for the (deprecated)
<popup> element's `popup` attribute, which was the old way to
declaratively trigger a popup element from a button. Since this
functionality isn't used by the <selectmenu> implementation, I'm just
removing it now to avoid more complexity.

Bug: 1307772
Change-Id: Id3d4c515d06c5216433c02a471204ebd158f308f
Cq-Do-Not-Cancel-Tryjobs: true
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3558284
Reviewed-by: David Baron <dbaron@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#987211}

html/semantics/interactive-elements/the-popup-element/popup-focus.tentative.html

@@ -121,15 +121,11 @@
 
       // Use an activating element:
       const button = document.createElement('button');
-      const popupId = 'popup-id';
-      assert_equals(document.querySelectorAll('#' + popupId).length,0);
       document.body.appendChild(button);
       t.add_cleanup(function() {
-        popup.removeAttribute('id');
         button.remove();
       });
-      popup.id = popupId;
-      button.setAttribute('popup', popupId);
+      button.addEventListener('click',() => {popup.show()},{once: true});
       priorFocus.focus();
       button.click();
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);

html/semantics/interactive-elements/the-popup-element/popup-light-dismiss.tentative.html

@@ -19,19 +19,19 @@
   <span id=inside2>Inside popup 2</span>
 </popup>
 
-<button id=b3 popup=p3>Popup 3 - button 3
+<button id=b3 onclick='p3.show()'>Popup 3 - button 3
   <popup id=p4>Inside popup 4</popup>
 </button>
 <popup id=p3>Inside popup 3</popup>
-<button id=b4 popup=p3>Popup 3 - button 4
+<button id=b4 onclick='p3.show()'>Popup 3 - button 4
   <popup id=p5>Inside popup 5</popup>
 </button>
 
 <popup id=p6>Inside popup 6
   <div style="height:2000px;background:lightgreen"></div>
   Bottom of popup6
 </popup>
-<button popup=p6>Popup 6</button>
+<button onclick='p6.show()'>Popup 6</button>
 
 <my-element id="myElement">
   <template shadowroot="open">
@@ -154,24 +154,6 @@
       assert_false(popup1.open);
     },'Clicking on anchor element shouldn\'t close its popup');
 
-    await clickOn(button3);
-    test(t => {
-      assert_true(popup3.open,'invoking element should open popup');
-      popup4.show();
-      assert_true(popup4.open);
-      assert_true(popup3.open);
-    },'An invoking element should be part of the ancestor chain');
-
-    await clickOn(button3);
-    assert_true(popup3.open);
-    assert_false(popup4.open);
-    assert_false(popup5.open);
-    popup5.show();
-    test(t => {
-      assert_true(popup5.open);
-      assert_false(popup3.open);
-    },'An invoking element that was not used to invoke the popup should NOT be part of the ancestor chain');
-
     popup1.show();
     popup2.show(); // Popup1 is an ancestral element for popup2.
     assert_true(popup1.open);
@@ -202,7 +184,7 @@
     },'Scrolling within a popup should not close the popup');
 
     button7.click();
-    assert_true(popup7.open,'invoking element should open popup');
+    assert_true(popup7.open);
     inside7.click();
     test(t => {
       assert_true(popup7.open);

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

@@ -9,8 +9,8 @@
 <script src="/resources/testdriver-actions.js"></script>
 <script src="/resources/testdriver-vendor.js"></script>
 
-<button id=b1 popup=p1>Open Popup 1</button>
-<div popup=popup id=p1 anchor=b1><p>This is popup #1</p></div>
+<button triggerpopup=p1>Open Popup 1</button>
+<div popup=popup id=p1>This is popup #1</div>
 
 <style>
   [popup] { border: 5px solid red; }
@@ -25,16 +25,16 @@
       .send();
   }
 
-  const popup1 = document.querySelector('#p1');
-  const button1 = document.querySelector('#b1');
+  const popup = document.querySelector('[popup]');
+  const button = document.querySelector('button');
 
   promise_test(async () => {
-    assert_false(popup1.matches(':popup-open'));
-    await clickOn(button1);
-    assert_true(popup1.matches(':popup-open'));
-    popup1.hidePopup();
-    assert_false(popup1.matches(':popup-open'));
-    button1.click();
-    assert_true(popup1.matches(':popup-open'));
+    assert_false(popup.matches(':popup-open'));
+    await clickOn(button);
+    assert_true(popup.matches(':popup-open'));
+    popup.hidePopup();
+    assert_false(popup.matches(':popup-open'));
+    button.click();
+    assert_true(popup.matches(':popup-open'));
   }, "Basic test of the 'popup' attribute on a button");
 </script>