diff --git a/html/semantics/popups/popup-focus.tentative.html b/html/semantics/popups/popup-focus.tentative.html
index 0ab90bbf55457a..76cc33261eaf87 100644
--- a/html/semantics/popups/popup-focus.tentative.html
+++ b/html/semantics/popups/popup-focus.tentative.html
@@ -123,7 +123,7 @@
       button.remove();
     });
     popUp.id = popUpId;
-    button.setAttribute('togglepopup', popUpId);
+    button.setAttribute('popuptoggletarget', popUpId);
     return button;
   }
   function addPriorFocus(t) {
@@ -218,7 +218,7 @@
       const priorFocus = addPriorFocus(t);
       assert_false(popUp.matches(':top-layer'), 'pop-up should start out hidden');
       let button = addInvoker(t, popUp);
-      assert_equals(button.getAttribute('togglepopup'), popUp.id, 'This test assumes the button uses `togglepopup`.');
+      assert_equals(button.getAttribute('popuptoggletarget'), popUp.id, 'This test assumes the button uses `popuptoggletarget`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
       assert_false(popUp.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
@@ -231,8 +231,8 @@
       await finishAnimationsAndVerifyHide(popUp);
 
       // Same thing, but the button is contained within the pop-up
-      button.removeAttribute('togglepopup');
-      button.setAttribute('hidepopup', popUp.id);
+      button.removeAttribute('popuptoggletarget');
+      button.setAttribute('popuphidetarget', popUp.id);
       popUp.appendChild(button);
       priorFocus.focus();
       popUp.showPopUp();
@@ -245,7 +245,7 @@
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
       await finishAnimationsAndVerifyHide(popUp);
 
-      // Same thing, but the button is unrelated (no togglepopup)
+      // Same thing, but the button is unrelated (no popuptoggletarget)
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();
diff --git a/html/semantics/popups/popup-invoking-attribute.tentative.html b/html/semantics/popups/popup-invoking-attribute.tentative.html
index 6b356c1563b77e..dbc3a1f4355619 100644
--- a/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -123,9 +123,9 @@
             assert_equals(popUp2.popUp,type);
             assert_not_equals(popUp1.id,popUp2.id);
             const invoker = testcase.makeElement(test);
-            if (t) invoker.setAttribute('togglepopup',t===1 ? popUp1.id : popUp2.id);
-            if (s) invoker.setAttribute('showpopup',s===1 ? popUp1.id : popUp2.id);
-            if (h) invoker.setAttribute('hidepopup',h===1 ? popUp1.id : popUp2.id);
+            if (t) invoker.setAttribute('popuptoggletarget',t===1 ? popUp1.id : popUp2.id);
+            if (s) invoker.setAttribute('popupshowtarget',s===1 ? popUp1.id : popUp2.id);
+            if (h) invoker.setAttribute('popuphidetarget',h===1 ? popUp1.id : popUp2.id);
             assert_true(!document.getElementById(popUp1.id));
             assert_true(!document.getElementById(popUp2.id));
             document.body.appendChild(popUp1);
@@ -184,7 +184,7 @@
 
 
 
-<button togglepopup=p1>Toggle Popup 1</button>
+<button popuptoggletarget=p1>Toggle Popup 1</button>
 <div popup id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is pop-up #1</div>
 
 <script>
@@ -221,7 +221,7 @@
   await assertState(true,2,1);
   popUp.hidePopUp();
   await assertState(false,2,2);
-}, "Clicking a togglepopup button opens a closed pop-up (also check event counts)");
+}, "Clicking a popuptoggletarget button opens a closed pop-up (also check event counts)");
 
 promise_test(async () => {
   showCount = hideCount = 0;
@@ -230,4 +230,4 @@
   await assertState(true,1,0);
   await clickOn(button);
   await assertState(false,1,1);
-}, "Clicking a togglepopup button closes an open pop-up (also check event counts)");
+}, "Clicking a popuptoggletarget button closes an open pop-up (also check event counts)");
diff --git a/html/semantics/popups/popup-light-dismiss.tentative.html b/html/semantics/popups/popup-light-dismiss.tentative.html
index 99a48d7230e33a..2e94eedf1aa282 100644
--- a/html/semantics/popups/popup-light-dismiss.tentative.html
+++ b/html/semantics/popups/popup-light-dismiss.tentative.html
@@ -11,13 +11,13 @@
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="resources/popup-utils.js"></script>
 
-<button id=b1t togglepopup='p1'>Popup 1</button>
-<button id=b1s showpopup='p1'>Popup 1</button>
+<button id=b1t popuptoggletarget='p1'>Popup 1</button>
+<button id=b1s popupshowtarget='p1'>Popup 1</button>
 <button id=p1anchor>Popup1 anchor (no action)</button>
 <span id=outside>Outside all popups</span>
 <div popup id=p1 anchor=p1anchor>
   <span id=inside1>Inside popup 1</span>
-  <button id=b2 togglepopup='p2'>Popup 2</button>
+  <button id=b2 popuptoggletarget='p2'>Popup 2</button>
   <span id=inside1after>Inside popup 1 after button</span>
 </div>
 <div popup id=p2 anchor=b2>
@@ -145,9 +145,9 @@
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(button1toggle);
-    assert_false(popup1.matches(':top-layer'),'popup1 should be hidden by togglepopup');
-    assert_equals(popup1HideCount,p1HideCount+1,'popup1 should get hidden only once by togglepopup');
-  },'Clicking on togglepopup element, even if it wasn\'t used for activation, should hide it exactly once');
+    assert_false(popup1.matches(':top-layer'),'popup1 should be hidden by popuptoggletarget');
+    assert_equals(popup1HideCount,p1HideCount+1,'popup1 should get hidden only once by popuptoggletarget');
+  },'Clicking on popuptoggletarget element, even if it wasn\'t used for activation, should hide it exactly once');
 
   promise_test(async () => {
     popup1.showPopUp();
@@ -180,11 +180,11 @@
   },'Dragging from an open popup outside an open popup should leave the popup open');
 </script>
 
-<button id=b3 togglepopup=p3>Popup 3 - button 3
+<button id=b3 popuptoggletarget=p3>Popup 3 - button 3
   <div popup id=p4>Inside popup 4</div>
 </button>
 <div popup id=p3>Inside popup 3</div>
-<button id=b4 togglepopup=p3>Popup 3 - button 4
+<button id=b4 popuptoggletarget=p3>Popup 3 - button 4
   <div popup id=p5>Inside popup 5</div>
 </button>
 <style>
@@ -228,7 +228,7 @@
   <div style="height:2000px;background:lightgreen"></div>
   Bottom of popup6
 </div>
-<button togglepopup=p6>Popup 6</button>
+<button popuptoggletarget=p6>Popup 6</button>
 <style>
   #p6 {
     width: 300px;
@@ -308,7 +308,7 @@
   <button>Button</button>
   <span id=inside9after>Inside popup 9 after button</span>
 </div>
-<button id=b9after togglepopup='p9'>Popup 9</button>
+<button id=b9after popuptoggletarget='p9'>Popup 9</button>
 <script>
   promise_test(async () => {
     const popup9 = document.querySelector('#p9');
@@ -342,15 +342,15 @@
 <!-- Convoluted ancestor relationship -->
 <div popup id=convoluted_p1>Popup 1
   <div id=convoluted_anchor>Anchor
-    <button togglepopup=convoluted_p2>Open Popup 2</button>
+    <button popuptoggletarget=convoluted_p2>Open Popup 2</button>
     <div popup id=convoluted_p4><p>Popup 4</p></div>
   </div>
 </div>
 <div popup id=convoluted_p2>Popup 2
-  <button togglepopup=convoluted_p3>Open Popup 3</button>
+  <button popuptoggletarget=convoluted_p3>Open Popup 3</button>
 </div>
 <div popup id=convoluted_p3 anchor=convoluted_anchor>Popup 3
-  <button togglepopup=convoluted_p4>Open Popup 4</button>
+  <button popuptoggletarget=convoluted_p4>Open Popup 4</button>
 </div>
 <button onclick="convoluted_p1.showPopUp()">Open convoluted popup</button>
 <style>
diff --git a/html/semantics/popups/popup-stacking.tentative.html b/html/semantics/popups/popup-stacking.tentative.html
index e9e987ea2ff2fc..abe3f61996ba9f 100644
--- a/html/semantics/popups/popup-stacking.tentative.html
+++ b/html/semantics/popups/popup-stacking.tentative.html
@@ -26,19 +26,19 @@
 </div>
 
 <div class="example">
-  <p>togglepopup attribute relationship</p>
+  <p>popuptoggletarget attribute relationship</p>
   <div popup class=ancestor><p>Ancestor popup</p>
-    <button togglepopup=trigger1 class=clickme>Button</button>
+    <button popuptoggletarget=trigger1 class=clickme>Button</button>
   </div>
   <div id=trigger1 popup class=child><p>Child popup</p></div>
 </div>
 
 <div class="example">
-  <p>nested togglepopup attribute relationship</p>
+  <p>nested popuptoggletarget attribute relationship</p>
   <div popup class=ancestor><p>Ancestor popup</p>
     <div>
       <div>
-        <button togglepopup=trigger2 class=clickme>Button</button>
+        <button popuptoggletarget=trigger2 class=clickme>Button</button>
       </div>
     </div>
   </div>