From 69c417bb4c0e0670ea52884f75f29085271c25bb Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Thu, 23 Jun 2022 15:39:55 -0700
Subject: [PATCH] Rename showPopup->showPopUp and hidePopup->hidePopUp

Per the resolution [1] and associated discussion [2] we need to
rename showPopup to showPopUp, and hidePopup to hidePopUp. With
the new scheme, the API is the "Pop up API", not the "Popup API".

Note that this CL only changes the publicly-visible API from
"popup" to "popUp", but leaves many internal references such as
kPseudoPopupHidden instead of kPseudoPopUpHidden. crbug.com/1338587
tracks that follow-on work, which I'll do once this change is
validated as being web compatible.

[1] https://github.com/openui/open-ui/issues/546#issuecomment-1158190204
[2] https://github.com/openui/open-ui/issues/549

Bug: 1307772
Bug: 1338587
Change-Id: Iaa28d4c1b7d526bb0b06c04eaec2fad5d0431746
---
 .../popup-anchor-nesting.tentative.html       |  6 +-
 ...popup-animated-hide-cleanup.tentative.html | 10 +-
 ...popup-animated-hide-display.tentative.html |  4 +-
 ...opup-animated-hide-finishes.tentative.html |  4 +-
 ...popup-animated-show-display.tentative.html |  2 +-
 ...opup-animation-corner-cases.tentative.html |  8 +-
 .../popup-attribute-basic.tentative.html      | 30 +++---
 .../popup-backdrop-appearance.tentative.html  |  6 +-
 .../popups/popup-defaultopen.tentative.html   |  2 +-
 .../popups/popup-events.tentative.html        |  4 +-
 .../popups/popup-focus.tentative.html         | 36 +++----
 .../popup-inside-display-none.tentative.html  |  2 +-
 .../popup-invoking-attribute.tentative.html   |  8 +-
 ...pup-light-dismiss-on-scroll.tentative.html |  6 +-
 .../popups/popup-light-dismiss.tentative.html | 94 +++++++++----------
 ...opup-not-keyboard-focusable.tentative.html |  6 +-
 .../popups/popup-open-display.tentative.html  |  2 +-
 ...p-open-overflow-display-ref.tentative.html |  6 +-
 ...popup-open-overflow-display.tentative.html |  6 +-
 .../popups/popup-removal-2.tentative.html     |  4 +-
 .../popups/popup-removal.tentative.html       |  2 +-
 .../popups/popup-shadow-dom.tentative.html    | 36 +++----
 .../popup-stacking-context.tentative.html     |  2 +-
 .../popups/popup-stacking.tentative.html      | 40 ++++----
 ...opup-top-layer-interactions.tentative.html |  4 +-
 .../popups/popup-types.tentative.html         | 48 +++++-----
 26 files changed, 189 insertions(+), 189 deletions(-)

diff --git a/html/semantics/popups/popup-anchor-nesting.tentative.html b/html/semantics/popups/popup-anchor-nesting.tentative.html
index ee903c48ed08e65..aa43dd9aea0a6d6 100644
--- a/html/semantics/popups/popup-anchor-nesting.tentative.html
+++ b/html/semantics/popups/popup-anchor-nesting.tentative.html
@@ -14,13 +14,13 @@
 <!-- This example has the anchor (b1) for one popup (p1)
      which contains a separate popup (p2) which is anchored
      by a separate anchor (b2). -->
-<button id=b1 onclick='p1.showPopup()'>Popup 1
+<button id=b1 onclick='p1.showPopUp()'>Popup 1
   <div popup id=p2 anchor=b2>
     <span id=inside2>Inside popup 2</span>
   </div>
 </button>
 <div popup id=p1 anchor=b1>This is popup 1</div>
-<button id=b2 onclick='p2.showPopup()'>Popup 2</button>
+<button id=b2 onclick='p2.showPopUp()'>Popup 2</button>
 
 <style>
   #p1 { top:50px; }
@@ -45,7 +45,7 @@
   (async function() {
     setup({ explicit_done: true });
 
-    popup2.showPopup();
+    popup2.showPopUp();
     assert_false(popup1.matches(':top-layer'));
     assert_true(popup2.matches(':top-layer'));
     await clickOn(button1);
diff --git a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
index 99fc2b895761d06..00ff0db6f57fbf3 100644
--- a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
+++ b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
@@ -56,9 +56,9 @@
 promise_test(async () => {
   let popUp = addPopUp("animation");
   let dialog = document.querySelector('dialog');
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
-  popUp.hidePopup(); // Start animations
+  popUp.hidePopUp(); // Start animations
   await rAF();
   popUp.remove();
   garbageCollect();
@@ -69,9 +69,9 @@
 promise_test(async (t) => {
   let popUp = addPopUp("animation");
   let dialog = document.querySelector('dialog');
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
-  popUp.hidePopup(); // Start animations
+  popUp.hidePopUp(); // Start animations
   await rAF();
   dialog.showModal(); // Immediately hide pop-up
   t.add_cleanup(() => dialog.close());
@@ -89,7 +89,7 @@
   t.add_cleanup(() => {popUp.remove();button.remove();});
   document.body.appendChild(button);
   button.addEventListener('click',() => dialog.show());
-  popUp.showPopup(); // No animations here
+  popUp.showPopUp(); // No animations here
   await rAF();
   await clickOn(button);
   await rAF();
diff --git a/html/semantics/popups/popup-animated-hide-display.tentative.html b/html/semantics/popups/popup-animated-hide-display.tentative.html
index 410639e67152c89..ea25ea153e9efec 100644
--- a/html/semantics/popups/popup-animated-hide-display.tentative.html
+++ b/html/semantics/popups/popup-animated-hide-display.tentative.html
@@ -42,11 +42,11 @@
     requestAnimationFrame(() => {
       // This will show the popup, hide the popup, and start the transition.
       const popup = document.querySelector('[popup]');
-      popup.showPopup();
+      popup.showPopUp();
       popup.getAnimations()[0].finish();
       if (getComputedStyle(popup).left != "200px")
         popup.remove();
-      popup.hidePopup();
+      popup.hidePopUp();
       document.getAnimations()[0].ready.then(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
diff --git a/html/semantics/popups/popup-animated-hide-finishes.tentative.html b/html/semantics/popups/popup-animated-hide-finishes.tentative.html
index 88e37cb4e3bd7d1..6ec2b7252ef6998 100644
--- a/html/semantics/popups/popup-animated-hide-finishes.tentative.html
+++ b/html/semantics/popups/popup-animated-hide-finishes.tentative.html
@@ -46,8 +46,8 @@
     requestAnimationFrame(() => {
       // This will show the popup, hide the popup, and start the hide transition,
       // which should immediately finish.
-      document.querySelector('[popup]').showPopup();
-      document.querySelector('[popup]').hidePopup();
+      document.querySelector('[popup]').showPopUp();
+      document.querySelector('[popup]').hidePopUp();
       requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           // Take a screenshot now.
diff --git a/html/semantics/popups/popup-animated-show-display.tentative.html b/html/semantics/popups/popup-animated-show-display.tentative.html
index deb755092642298..f03e62932095220 100644
--- a/html/semantics/popups/popup-animated-show-display.tentative.html
+++ b/html/semantics/popups/popup-animated-show-display.tentative.html
@@ -41,7 +41,7 @@
   requestAnimationFrame(() => {
     requestAnimationFrame(() => {
       // This will show the popup, and start the transition.
-      document.querySelector('[popup]').showPopup();
+      document.querySelector('[popup]').showPopUp();
       document.getAnimations()[0].ready.then(() => {
         requestAnimationFrame(() => {
           requestAnimationFrame(() => {
diff --git a/html/semantics/popups/popup-animation-corner-cases.tentative.html b/html/semantics/popups/popup-animation-corner-cases.tentative.html
index 96812870268120b..5707e604d90e338 100644
--- a/html/semantics/popups/popup-animation-corner-cases.tentative.html
+++ b/html/semantics/popups/popup-animation-corner-cases.tentative.html
@@ -45,11 +45,11 @@
   const {popUp, descendent} = createPopUp(t,'animation');
   assert_false(isElementVisible(popUp));
   assert_equals(descendent.parentElement.parentElement,popUp);
-  popUp.showPopup();
+  popUp.showPopUp();
   assert_true(popUp.matches(':top-layer'));
   assert_true(isElementVisible(popUp));
   assert_equals(popUp.getAnimations({subtree: true}).length,0);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   const animations = popUp.getAnimations({subtree: true});
   assert_equals(animations.length,2,'There should be two animations running');
   assert_false(popUp.matches(':top-layer'),'popUp should not match :top-layer as soon as hidden');
@@ -71,7 +71,7 @@
   const {popUp, descendent} = createPopUp(t,'');
   assert_equals(popUp.classList.length, 0);
   assert_false(isElementVisible(popUp));
-  popUp.showPopup();
+  popUp.showPopUp();
   assert_true(popUp.matches(':top-layer'));
   assert_true(isElementVisible(popUp));
   assert_equals(popUp.getAnimations({subtree: true}).length,0);
@@ -80,7 +80,7 @@
   descendent.animate([{transform: 'rotate(0)'},{transform: 'rotate(360deg)'}],{duration: 1000000,iterations: 1});
   assert_equals(popUp.getAnimations({subtree: true}).length,2);
   // Then hide the popUp.
-  popUp.hidePopup();
+  popUp.hidePopUp();
   assert_false(popUp.matches(':top-layer'),'pop up should not match :top-layer as soon as hidden');
   assert_equals(popUp.getAnimations({subtree: true}).length,2,'animations should still be running');
   await waitForRender();
diff --git a/html/semantics/popups/popup-attribute-basic.tentative.html b/html/semantics/popups/popup-attribute-basic.tentative.html
index 5e26a725761f0dc..efcd3355ebe24a2 100644
--- a/html/semantics/popups/popup-attribute-basic.tentative.html
+++ b/html/semantics/popups/popup-attribute-basic.tentative.html
@@ -34,36 +34,36 @@
   }
   function assertIsFunctionalPopUp(popUp) {
     assert_false(popUpVisible(popUp, /*isPopUp*/true));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUpVisible(popUp, /*isPopUp*/true));
-    assert_throws_dom("InvalidStateError",() => popUp.showPopup(),'Calling showPopup on a showing pop-up should throw InvalidStateError');
-    popUp.hidePopup();
+    assert_throws_dom("InvalidStateError",() => popUp.showPopUp(),'Calling showPopUp on a showing pop-up should throw InvalidStateError');
+    popUp.hidePopUp();
     assert_false(popUpVisible(popUp, /*isPopUp*/true));
-    assert_throws_dom("InvalidStateError",() => popUp.hidePopup(),'Calling hidePopup on a hidden pop-up should throw InvalidStateError');
+    assert_throws_dom("InvalidStateError",() => popUp.hidePopUp(),'Calling hidePopUp on a hidden pop-up should throw InvalidStateError');
     const parent = popUp.parentElement;
     popUp.remove();
-    assert_throws_dom("InvalidStateError",() => popUp.showPopup(),'Calling showPopup on a disconnected pop-up should throw InvalidStateError');
+    assert_throws_dom("InvalidStateError",() => popUp.showPopUp(),'Calling showPopUp on a disconnected pop-up should throw InvalidStateError');
     parent.appendChild(popUp);
   }
   function assertNotAPopUp(nonPopUp) {
     // Non-popup elements should already be visible.
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
-    assert_throws_dom("NotSupportedError",() => nonPopUp.showPopup(),'Calling showPopup on a non-pop-up should throw NotSupportedError');
+    assert_throws_dom("NotSupportedError",() => nonPopUp.showPopUp(),'Calling showPopUp on a non-pop-up should throw NotSupportedError');
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
-    assert_throws_dom("NotSupportedError",() => nonPopUp.hidePopup(),'Calling hidePopup on a non-pop-up should throw NotSupportedError');
+    assert_throws_dom("NotSupportedError",() => nonPopUp.hidePopUp(),'Calling hidePopUp on a non-pop-up should throw NotSupportedError');
     assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
   }
 
   Array.from(document.getElementById('popups').children).forEach(popUp => {
     test((t) => {
       assertIsFunctionalPopUp(popUp);
-    }, `The .showPopup() and .hidePopup() work on a pop-up, for ${popUp.outerHTML}.`);
+    }, `The .showPopUp() and .hidePopUp() work on a pop-up, for ${popUp.outerHTML}.`);
   });
 
   Array.from(document.getElementById('nonpopups').children).forEach(nonPopUp => {
     test((t) => {
       assertNotAPopUp(nonPopUp);
-    }, `The .showPopup() and .hidePopup() do NOT work on elements without a 'popup' attribute, ${nonPopUp.outerHTML}.`);
+    }, `The .showPopUp() and .hidePopUp() do NOT work on elements without a 'popup' attribute, ${nonPopUp.outerHTML}.`);
   });
 
   function createPopUp(t) {
@@ -152,15 +152,15 @@
 
   test((t) => {
     const popUp = createPopUp(t);
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','hint'); // Change pop-up type
     assert_false(popUp.matches(':top-layer'));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','async');
     assert_false(popUp.matches(':top-layer'));
-    popUp.showPopup();
+    popUp.showPopUp();
     assert_true(popUp.matches(':top-layer'));
     popUp.setAttribute('popup','invalid');
     assert_false(popUp.matches(':top-layer'));
@@ -179,7 +179,7 @@
     test((t) => {
       const popUp = createPopUp(t);
       popUp.setAttribute('popup',type);
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       popUp.remove();
       assert_false(popUp.matches(':top-layer'));
@@ -191,10 +191,10 @@
       test((t) => {
         const popUp = createPopUp(t);
         popUp.setAttribute('popup',type);
-        popUp.showPopup();
+        popUp.showPopUp();
         assert_true(popUp.matches(':top-layer'));
         assert_false(popUp.matches(':modal'));
-        popUp.hidePopup();
+        popUp.hidePopUp();
       },`A showing popup=${type} does not match :modal`);
     }
   });
diff --git a/html/semantics/popups/popup-backdrop-appearance.tentative.html b/html/semantics/popups/popup-backdrop-appearance.tentative.html
index 0b348f85d0103c3..da975d95b659d84 100644
--- a/html/semantics/popups/popup-backdrop-appearance.tentative.html
+++ b/html/semantics/popups/popup-backdrop-appearance.tentative.html
@@ -45,7 +45,7 @@
   </div>
 </div>
 <script>
-document.getElementById('bottom').showPopup();
-document.getElementById('middle').showPopup();
-document.getElementById('top').showPopup();
+document.getElementById('bottom').showPopUp();
+document.getElementById('middle').showPopUp();
+document.getElementById('top').showPopUp();
 </script>
diff --git a/html/semantics/popups/popup-defaultopen.tentative.html b/html/semantics/popups/popup-defaultopen.tentative.html
index ec1275e7ea8e652..2e29d9a4afc3561 100644
--- a/html/semantics/popups/popup-defaultopen.tentative.html
+++ b/html/semantics/popups/popup-defaultopen.tentative.html
@@ -39,7 +39,7 @@
         assert_true(p1.matches(':top-layer'),'removing defaultopen should not close the popup');
         assert_false(p1.hasAttribute('defaultopen'),'...but it should reflect to IDL');
 
-        p1.hidePopup();
+        p1.hidePopUp();
       }, "The defaultopen attribute should affect page load only");
     });
   });
diff --git a/html/semantics/popups/popup-events.tentative.html b/html/semantics/popups/popup-events.tentative.html
index 5fa7c911217291f..fb8d9c1e424fc8c 100644
--- a/html/semantics/popups/popup-events.tentative.html
+++ b/html/semantics/popups/popup-events.tentative.html
@@ -36,14 +36,14 @@
   document.addEventListener('hide',() => ++hideCount);
   assert_equals(0,showCount);
   assert_equals(0,hideCount);
-  popup.showPopup();
+  popup.showPopUp();
   assert_true(popup.matches(':top-layer'));
   await waitUntilChange(() => showCount);
   assert_equals(1,showCount);
   assert_equals(0,hideCount);
   await requestAnimationFramePromise();
   assert_true(popup.matches(':top-layer'));
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_false(popup.matches(':top-layer'));
   await waitUntilChange(() => hideCount);
   assert_equals(1,showCount);
diff --git a/html/semantics/popups/popup-focus.tentative.html b/html/semantics/popups/popup-focus.tentative.html
index f9868369a2e1cba..c9a696e82067ade 100644
--- a/html/semantics/popups/popup-focus.tentative.html
+++ b/html/semantics/popups/popup-focus.tentative.html
@@ -137,23 +137,23 @@
       // Directly show and hide the pop-up:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
-      popUp.hidePopup();
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
+      popUp.hidePopUp();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on hide');
 
       // Hit Escape:
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       await sendEscape();
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus after Escape');
 
       // Change the pop-up type:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       assert_equals(popUp.popUp, 'auto', 'All pop-ups in this test should start as popup=auto');
       popUp.popUp = 'hint';
       assert_false(popUp.matches(':top-layer'), 'Changing the pop-up type should hide the pop-up');
@@ -162,8 +162,8 @@
 
       // Remove from the document:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       popUp.remove();
       assert_false(popUp.matches(':top-layer'), 'Removing the pop-up should hide it');
       if (!popUp.hasAttribute('data-no-focus')) {
@@ -173,8 +173,8 @@
 
       // Show a modal dialog:
       priorFocus.focus();
-      popUp.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopup()`);
+      popUp.showPopUp();
+      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popUp.showPopUp()`);
       const dialog = document.body.appendChild(document.createElement('dialog'));
       dialog.showModal();
       assert_false(popUp.matches(':top-layer'), 'Opening a modal dialog should hide the pop-up');
@@ -206,7 +206,7 @@
       assert_false(popUp.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       await clickOn(button); // This will not light dismiss, but will "toggle" the popUp.
       assert_false(popUp.matches(':top-layer'));
@@ -217,7 +217,7 @@
       button.setAttribute('hidepopup', popUp.id);
       popUp.appendChild(button);
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       if (!popUp.hasAttribute('data-no-focus')) {
         assert_not_equals(document.activeElement, priorFocus, 'focus should shift for this element');
@@ -230,7 +230,7 @@
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       await clickOn(button); // This will light dismiss the pop-up, focus the prior focus, then focus this button.
       assert_false(popUp.matches(':top-layer'), 'clicking button should hide the pop-up (via light dismiss)');
@@ -247,25 +247,25 @@
 
       // Move the prior focus out of the document
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       const newFocus = document.activeElement;
       assert_not_equals(newFocus, priorFocus, 'focus should shift for this element');
       priorFocus.remove();
       assert_equals(document.activeElement, newFocus, 'focus should not change when prior focus is removed');
-      popUp.hidePopup();
+      popUp.hidePopUp();
       assert_not_equals(document.activeElement, priorFocus, 'focused element has been removed');
       document.body.appendChild(priorFocus); // Put it back
 
       // Move the prior focus inside the (already open) pop-up
       priorFocus.focus();
-      popUp.showPopup();
+      popUp.showPopUp();
       assert_true(popUp.matches(':top-layer'));
       assert_false(popUp.contains(priorFocus), 'Start with a non-contained prior focus');
       popUp.appendChild(priorFocus); // Move inside the pop-up
       assert_true(popUp.contains(priorFocus));
       assert_true(popUp.matches(':top-layer'), 'pop-up should stay open');
-      popUp.hidePopup();
+      popUp.hidePopUp();
       assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the pop-up');
       document.body.appendChild(priorFocus); // Put it back
     }, "Popup corner cases test: " + testName);
diff --git a/html/semantics/popups/popup-inside-display-none.tentative.html b/html/semantics/popups/popup-inside-display-none.tentative.html
index c93bf163d93b799..d60b0df90684948 100644
--- a/html/semantics/popups/popup-inside-display-none.tentative.html
+++ b/html/semantics/popups/popup-inside-display-none.tentative.html
@@ -12,7 +12,7 @@
 
 <script>
   const popup = document.querySelector('[popup]');
-  popup.showPopup();
+  popup.showPopUp();
   if (!popup.matches(':top-layer'))
     document.body.appendChild(document.createTextNode('FAIL'));
 </script>
diff --git a/html/semantics/popups/popup-invoking-attribute.tentative.html b/html/semantics/popups/popup-invoking-attribute.tentative.html
index eba8f553f60925e..ba461f807ea15e0 100644
--- a/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -148,7 +148,7 @@
               case "toggle":
               case "show":
                 assert_popUp(expectedId,true,'Toggle or show should show the pop-up');
-                (expectedId===1 ? popUp1 : popUp2).hidePopup(); // Hide the pop-up
+                (expectedId===1 ? popUp1 : popUp2).hidePopUp(); // Hide the pop-up
                 break;
               case "hide":
               case "none":
@@ -157,7 +157,7 @@
               default:
                 assert_unreached();
             }
-            (expectedId===1 ? popUp1 : popUp2).showPopup(); // Show the pop-up directly
+            (expectedId===1 ? popUp1 : popUp2).showPopUp(); // Show the pop-up directly
             assert_popUp(expectedId,true);
             assert_popUp(otherId,false);
             await testcase.invokeFn(invoker);
@@ -215,11 +215,11 @@
   await assertState(false,0,0);
   await clickOn(button);
   await assertState(true,1,0);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   await assertState(false,1,1);
   button.click();
   await assertState(true,2,1);
-  popUp.hidePopup();
+  popUp.hidePopUp();
   await assertState(false,2,2);
 }, "Clicking a togglepopup button opens a closed pop-up (also check event counts)");
 
diff --git a/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html b/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
index 12615b7e2e1a218..3c32a6dc6a992a7 100644
--- a/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
+++ b/html/semantics/popups/popup-light-dismiss-on-scroll.tentative.html
@@ -22,7 +22,7 @@
     This is popup 2
   </div>
 </div>
-<button onclick='popup1.showPopup();popup2.showPopup();'>Open popups</button>
+<button onclick='popup1.showPopUp();popup2.showPopUp();'>Open popups</button>
 
 <style>
   #popup1 { top:50px; left: 50px; }
@@ -49,8 +49,8 @@
       });
     }
     assertAll(/*showing*/false);
-    popups[0].showPopup();
-    popups[1].showPopup();
+    popups[0].showPopUp();
+    popups[1].showPopUp();
     assertAll(/*showing*/true);
     scroller.scrollTo(0, 100);
     requestAnimationFrame(() => {
diff --git a/html/semantics/popups/popup-light-dismiss.tentative.html b/html/semantics/popups/popup-light-dismiss.tentative.html
index 10317a8f35d6555..a443be606dfabda 100644
--- a/html/semantics/popups/popup-light-dismiss.tentative.html
+++ b/html/semantics/popups/popup-light-dismiss.tentative.html
@@ -56,7 +56,7 @@
   });
   promise_test(async () => {
     assert_false(popup1.matches(':top-layer'));
-    popup1.showPopup();
+    popup1.showPopUp();
     assert_true(popup1.matches(':top-layer'));
     let p1HideCount = popup1HideCount;
     await clickOn(outside);
@@ -66,18 +66,18 @@
 
   promise_test(async () => {
     assert_false(popup1.matches(':top-layer'));
-    popup1.showPopup();
+    popup1.showPopUp();
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(inside1);
     assert_true(popup1.matches(':top-layer'));
     assert_equals(popup1HideCount,p1HideCount);
-    popup1.hidePopup();
+    popup1.hidePopUp();
   },'Clicking inside a popup does not close that popup');
 
   promise_test(async () => {
     assert_false(popup1.matches(':top-layer'));
-    popup1.showPopup();
+    popup1.showPopUp();
     await clickOn(inside1After);
     assert_true(popup1.matches(':top-layer'));
     await sendTab();
@@ -86,8 +86,8 @@
   },'Moving focus outside the popup will dismiss the popup');
 
   promise_test(async () => {
-    popup1.showPopup();
-    popup2.showPopup();
+    popup1.showPopUp();
+    popup2.showPopUp();
     await waitForRender();
     p1HideCount = popup1HideCount;
     let p2HideCount = popup2HideCount;
@@ -96,14 +96,14 @@
     assert_true(popup2.matches(':top-layer'),'popup2 should be open');
     assert_equals(popup1HideCount,p1HideCount,'popup1');
     assert_equals(popup2HideCount,p2HideCount,'popup2');
-    popup1.hidePopup();
+    popup1.hidePopUp();
     assert_false(popup1.matches(':top-layer'));
     assert_false(popup2.matches(':top-layer'));
   },'Clicking inside a child popup shouldn\'t close either popup');
 
   promise_test(async () => {
-    popup1.showPopup();
-    popup2.showPopup();
+    popup1.showPopUp();
+    popup2.showPopUp();
     await waitForRender();
     p1HideCount = popup1HideCount;
     p2HideCount = popup2HideCount;
@@ -112,7 +112,7 @@
     assert_equals(popup1HideCount,p1HideCount);
     assert_false(popup2.matches(':top-layer'));
     assert_equals(popup2HideCount,p2HideCount+1);
-    popup1.hidePopup();
+    popup1.hidePopUp();
   },'Clicking inside a parent popup should close child popup');
 
   promise_test(async () => {
@@ -123,24 +123,24 @@
     await clickOn(button1show);
     assert_true(popup1.matches(':top-layer'),'popup1 should stay open');
     assert_equals(popup1HideCount,p1HideCount,'popup1 should not get hidden and reshown');
-    popup1.hidePopup(); // Cleanup
+    popup1.hidePopUp(); // Cleanup
     assert_false(popup1.matches(':top-layer'));
   },'Clicking on invoking element, after using it for activation, shouldn\'t close its popup');
 
   promise_test(async () => {
-    popup1.showPopup(); // Directly show the popup
+    popup1.showPopUp(); // Directly show the popup
     assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(button1show);
     assert_true(popup1.matches(':top-layer'),'popup1 should stay open');
     assert_equals(popup1HideCount,p1HideCount,'popup1 should not get hidden and reshown');
-    popup1.hidePopup(); // Cleanup
+    popup1.hidePopUp(); // Cleanup
     assert_false(popup1.matches(':top-layer'));
   },'Clicking on invoking element, even if it wasn\'t used for activation, shouldn\'t close its popup');
 
   promise_test(async () => {
-    popup1.showPopup(); // Directly show the popup
+    popup1.showPopUp(); // Directly show the popup
     assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
@@ -150,20 +150,20 @@
   },'Clicking on togglepopup element, even if it wasn\'t used for activation, should hide it exactly once');
 
   promise_test(async () => {
-    popup1.showPopup();
+    popup1.showPopUp();
     assert_true(popup1.matches(':top-layer'));
     await waitForRender();
     p1HideCount = popup1HideCount;
     await clickOn(popup1anchor);
     assert_true(popup1.matches(':top-layer'),'popup1 not open');
     assert_equals(popup1HideCount,p1HideCount);
-    popup1.hidePopup(); // Cleanup
+    popup1.hidePopUp(); // Cleanup
     assert_false(popup1.matches(':top-layer'));
   },'Clicking on anchor element (that isn\'t an invoking element) shouldn\'t close its popup');
 
   promise_test(async () => {
-    popup1.showPopup();
-    popup2.showPopup(); // Popup1 is an ancestral element for popup2.
+    popup1.showPopUp();
+    popup2.showPopUp(); // Popup1 is an ancestral element for popup2.
     assert_true(popup1.matches(':top-layer'));
     assert_true(popup2.matches(':top-layer'));
     const drag_actions = new test_driver.Actions();
@@ -175,7 +175,7 @@
       .send();
     assert_true(popup1.matches(':top-layer'),'popup1 should be open');
     assert_true(popup2.matches(':top-layer'),'popup1 should be open');
-    popup1.hidePopup();
+    popup1.hidePopUp();
     assert_false(popup2.matches(':top-layer'));
   },'Dragging from an open popup outside an open popup should leave the popup open');
 </script>
@@ -200,10 +200,10 @@
   promise_test(async () => {
     await clickOn(button3);
     assert_true(popup3.matches(':top-layer'),'invoking element should open popup');
-    popup4.showPopup();
+    popup4.showPopUp();
     assert_true(popup4.matches(':top-layer'));
     assert_true(popup3.matches(':top-layer'));
-    popup3.hidePopup(); // Cleanup
+    popup3.hidePopUp(); // Cleanup
     assert_false(popup3.matches(':top-layer'));
     assert_false(popup4.matches(':top-layer'));
   },'An invoking element should be part of the ancestor chain');
@@ -213,11 +213,11 @@
     assert_true(popup3.matches(':top-layer'));
     assert_false(popup4.matches(':top-layer'));
     assert_false(popup5.matches(':top-layer'));
-    popup5.showPopup();
+    popup5.showPopUp();
     assert_true(popup3.matches(':top-layer'));
     assert_false(popup4.matches(':top-layer'));
     assert_true(popup5.matches(':top-layer'));
-    popup3.hidePopup();
+    popup3.hidePopUp();
     assert_false(popup3.matches(':top-layer'));
     assert_false(popup4.matches(':top-layer'));
     assert_false(popup5.matches(':top-layer'));
@@ -239,20 +239,20 @@
 <script>
   const popup6 = document.querySelector('#p6');
   promise_test(async () => {
-    popup6.showPopup();
+    popup6.showPopUp();
     assert_equals(popup6.scrollTop,0,'popup6 should start non-scrolled');
     await new test_driver.Actions()
        .scroll(0, 0, 0, 50, {origin: popup6})
        .send();
     assert_true(popup6.matches(':top-layer'),'popup6 should stay open');
     assert_equals(popup6.scrollTop,50,'popup6 should be scrolled');
-    popup6.hidePopup();
+    popup6.hidePopUp();
   },'Scrolling within a popup should not close the popup');
 </script>
 
 <my-element id="myElement">
   <template shadowroot="open">
-    <button id=b7 onclick='showPopup7()'>Popup7</button>
+    <button id=b7 onclick='showPopUp7()'>Popup7</button>
     <div popup id=p7 anchor=b7 style="top: 100px;">
       <p>Popup content.</p>
       <input id="inside7" type="text" placeholder="some text">
@@ -263,15 +263,15 @@
   const button7 = document.querySelector('#myElement').shadowRoot.querySelector('#b7');
   const popup7 = document.querySelector('#myElement').shadowRoot.querySelector('#p7');
   const inside7 = document.querySelector('#myElement').shadowRoot.querySelector('#inside7');
-  function showPopup7() {
-    popup7.showPopup();
+  function showPopUp7() {
+    popup7.showPopUp();
   }
   promise_test(async () => {
     button7.click();
     assert_true(popup7.matches(':top-layer'),'invoking element should open popup');
     inside7.click();
     assert_true(popup7.matches(':top-layer'));
-    popup7.hidePopup();
+    popup7.hidePopUp();
   },'Clicking inside a shadow DOM popup does not close that popup');
 
   promise_test(async () => {
@@ -294,13 +294,13 @@
     const inside8After = document.querySelector('#inside8after');
     const popup8Anchor = document.querySelector('#p8anchor');
     assert_false(popup8.matches(':top-layer'));
-    popup8.showPopup();
+    popup8.showPopUp();
     await clickOn(inside8After);
     assert_true(popup8.matches(':top-layer'));
     await sendTab();
     assert_equals(document.activeElement,popup8Anchor,'Focus should move to the anchor element');
     assert_true(popup8.matches(':top-layer'),'popup should stay open');
-    popup8.hidePopup();
+    popup8.hidePopUp();
   },'Moving focus back to the anchor element should not dismiss the popup');
 </script>
 
@@ -321,7 +321,7 @@
     await sendTab();
     assert_equals(document.activeElement,popup9Invoker,'Focus should move to the invoking element');
     assert_true(popup9.matches(':top-layer'),'popup should stay open');
-    popup9.hidePopup();
+    popup9.hidePopUp();
   },'Moving focus back to the active trigger element should not dismiss the popup');
 
   promise_test(async () => {
@@ -329,7 +329,7 @@
     const inside9After = document.querySelector('#inside9after');
     const popup9Invoker = document.querySelector('#b9after');
     assert_false(popup9.matches(':top-layer'));
-    popup9.showPopup(); // Trigger directly
+    popup9.showPopUp(); // Trigger directly
     await clickOn(inside9After);
     assert_true(popup9.matches(':top-layer'));
     await sendTab();
@@ -352,7 +352,7 @@
 <div popup id=convoluted_p3 anchor=convoluted_anchor>Popup 3
   <button togglepopup=convoluted_p4>Open Popup 4</button>
 </div>
-<button onclick="convoluted_p1.showPopup()">Open convoluted popup</button>
+<button onclick="convoluted_p1.showPopUp()">Open convoluted popup</button>
 <style>
   #convoluted_p1 {top:50px;}
   #convoluted_p2 {top:150px;}
@@ -365,7 +365,7 @@
 const convPopup3 = document.querySelector('#convoluted_p3');
 const convPopup4 = document.querySelector('#convoluted_p4');
 promise_test(async () => {
-  convPopup1.showPopup(); // Programmatically open p1
+  convPopup1.showPopUp(); // Programmatically open p1
   assert_true(convPopup1.matches(':top-layer'));
   convPopup1.querySelector('button').click(); // Click to invoke p2
   assert_true(convPopup1.matches(':top-layer'));
@@ -384,7 +384,7 @@
   assert_true(convPopup2.matches(':top-layer'));
   assert_true(convPopup3.matches(':top-layer'));
   assert_true(convPopup4.matches(':top-layer'));
-  convPopup1.hidePopup();
+  convPopup1.hidePopUp();
   assert_false(convPopup1.matches(':top-layer'));
   assert_false(convPopup2.matches(':top-layer'));
   assert_false(convPopup3.matches(':top-layer'));
@@ -392,13 +392,13 @@
 },'Ensure circular/convoluted ancestral relationships are functional');
 
 promise_test(async () => {
-  convPopup1.showPopup(); // Programmatically open p1
+  convPopup1.showPopUp(); // Programmatically open p1
   convPopup1.querySelector('button').click(); // Click to invoke p2
   assert_true(convPopup1.matches(':top-layer'));
   assert_true(convPopup2.matches(':top-layer'));
   assert_false(convPopup3.matches(':top-layer'));
   assert_false(convPopup4.matches(':top-layer'));
-  convPopup4.showPopup(); // Programmatically open p4
+  convPopup4.showPopUp(); // Programmatically open p4
   assert_true(convPopup1.matches(':top-layer'),'popup1 stays open because it is a DOM ancestor of popup4');
   assert_false(convPopup2.matches(':top-layer'),'popup2 closes because it isn\'t connected to popup4 via active invokers');
   assert_true(convPopup4.matches(':top-layer'));
@@ -406,12 +406,12 @@
   assert_true(convPopup1.matches(':top-layer'),'nothing changes');
   assert_false(convPopup2.matches(':top-layer'));
   assert_true(convPopup4.matches(':top-layer'));
-  convPopup1.hidePopup();
+  convPopup1.hidePopUp();
   assert_false(convPopup1.matches(':top-layer'));
   assert_false(convPopup2.matches(':top-layer'));
   assert_false(convPopup3.matches(':top-layer'));
   assert_false(convPopup4.matches(':top-layer'));
-},'Ensure circular/convoluted ancestral relationships are functional, with a direct showPopup()');
+},'Ensure circular/convoluted ancestral relationships are functional, with a direct showPopUp()');
 </script>
 
 
@@ -429,9 +429,9 @@
   const hint = document.querySelector('#p11');
   const async = document.querySelector('#p12');
   // All three can be open at once, if shown in this order:
-  popup.showPopup();
-  hint.showPopup();
-  async.showPopup();
+  popup.showPopUp();
+  hint.showPopUp();
+  async.showPopUp();
   assert_true(popup.matches(':top-layer'));
   assert_true(hint.matches(':top-layer'));
   assert_true(async.matches(':top-layer'));
@@ -445,17 +445,17 @@
   assert_false(popup.matches(':top-layer'),'popup should close');
   assert_false(hint.matches(':top-layer'),'hint should close');
   assert_true(async.matches(':top-layer'),'async does not light dismiss');
-  async.hidePopup();
+  async.hidePopUp();
   assert_false(async.matches(':top-layer'));
-  popup.showPopup();
-  hint.showPopup();
+  popup.showPopUp();
+  hint.showPopUp();
   assert_true(popup.matches(':top-layer'));
   assert_true(hint.matches(':top-layer'));
   // Clicking on the popup should close the hint:
   await clickOn(popup);
   assert_true(popup.matches(':top-layer'),'popup should stay open');
   assert_false(hint.matches(':top-layer'),'hint should light dismiss');
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_false(popup.matches(':top-layer'));
 },'Light dismiss of mixed popup types');
 </script>
diff --git a/html/semantics/popups/popup-not-keyboard-focusable.tentative.html b/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
index 88736ab472b0d2d..3cc545f9ae7e3c1 100644
--- a/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
+++ b/html/semantics/popups/popup-not-keyboard-focusable.tentative.html
@@ -22,7 +22,7 @@
   const popup = document.querySelector('[popup]');
   b1.focus();
   assert_equals(document.activeElement,b1);
-  popup.showPopup();
+  popup.showPopUp();
   assert_true(popup.matches(':top-layer'));
   assert_equals(document.activeElement,b1);
   // Tab once
@@ -34,13 +34,13 @@
   const button = document.createElement('button');
   popup.appendChild(button);
   b1.focus();
-  popup.showPopup();
+  popup.showPopUp();
   assert_equals(document.activeElement,b1);
   // Tab once
   await new test_driver.send_keys(document.body,'\uE004'); // Tab
   assert_equals(document.activeElement, button, 'Keyboard focus should go to the contained button');
   assert_true(popup.matches(':top-layer'),'changing focus to the popup should leave it showing');
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_false(popup.matches(':top-layer'));
 }, "Popup should not be keyboard focusable");
 </script>
diff --git a/html/semantics/popups/popup-open-display.tentative.html b/html/semantics/popups/popup-open-display.tentative.html
index 674af1902d943dc..9a0b87e6b74e68a 100644
--- a/html/semantics/popups/popup-open-display.tentative.html
+++ b/html/semantics/popups/popup-open-display.tentative.html
@@ -31,5 +31,5 @@
 </style>
 
 <script>
-  document.querySelector('[popup]').showPopup();
+  document.querySelector('[popup]').showPopUp();
 </script>
diff --git a/html/semantics/popups/popup-open-overflow-display-ref.tentative.html b/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
index 7a350ea281dc68d..c9f582ce8ffb251 100644
--- a/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
+++ b/html/semantics/popups/popup-open-overflow-display-ref.tentative.html
@@ -24,7 +24,7 @@
 </style>
 
 <script>
-  document.querySelector('#p1').showPopup();
-  document.querySelector('#p2').showPopup();
-  document.querySelector('#p3').showPopup();
+  document.querySelector('#p1').showPopUp();
+  document.querySelector('#p2').showPopUp();
+  document.querySelector('#p3').showPopUp();
 </script>
diff --git a/html/semantics/popups/popup-open-overflow-display.tentative.html b/html/semantics/popups/popup-open-overflow-display.tentative.html
index 32f42dfcea2f046..fd86672566d1ce0 100644
--- a/html/semantics/popups/popup-open-overflow-display.tentative.html
+++ b/html/semantics/popups/popup-open-overflow-display.tentative.html
@@ -38,7 +38,7 @@
 </style>
 
 <script>
-  document.querySelector('#p1').showPopup();
-  document.querySelector('#p2').showPopup();
-  document.querySelector('#p3').showPopup();
+  document.querySelector('#p1').showPopUp();
+  document.querySelector('#p2').showPopUp();
+  document.querySelector('#p3').showPopUp();
 </script>
diff --git a/html/semantics/popups/popup-removal-2.tentative.html b/html/semantics/popups/popup-removal-2.tentative.html
index 71d420e57988e55..7cf0951e5b14bcc 100644
--- a/html/semantics/popups/popup-removal-2.tentative.html
+++ b/html/semantics/popups/popup-removal-2.tentative.html
@@ -17,11 +17,11 @@
       const popup = frame1Doc.querySelector('[popup]');
       assert_true(!!popup);
       assert_false(popup.matches(':top-layer'));
-      popup.showPopup();
+      popup.showPopUp();
       assert_true(popup.matches(':top-layer'));
       frame2Doc.body.appendChild(popup);
       assert_false(popup.matches(':top-layer'));
-      popup.showPopup();
+      popup.showPopUp();
       assert_true(popup.matches(':top-layer'));
     }, 'Moving popup between documents shouldn\'t cause issues');
   };
diff --git a/html/semantics/popups/popup-removal.tentative.html b/html/semantics/popups/popup-removal.tentative.html
index b5f8100d04f619e..f4df86232768080 100644
--- a/html/semantics/popups/popup-removal.tentative.html
+++ b/html/semantics/popups/popup-removal.tentative.html
@@ -17,7 +17,7 @@
   }
   const popup = document.querySelector('[popup]');
   assert_false(popup.matches(':top-layer'));
-  popup.showPopup();
+  popup.showPopUp();
   assert_true(popup.matches(':top-layer'));
   popup.remove(); // Shouldn't cause any issues
   document.body.click(); // Shouldn't cause light dismiss problems
diff --git a/html/semantics/popups/popup-shadow-dom.tentative.html b/html/semantics/popups/popup-shadow-dom.tentative.html
index b30a92cd0909135..95fd3db07d51bab 100644
--- a/html/semantics/popups/popup-shadow-dom.tentative.html
+++ b/html/semantics/popups/popup-shadow-dom.tentative.html
@@ -36,13 +36,13 @@
     ensureShadowDom(testRoot);
     return findPopups(testRoot);
   }
-  function showPopup(testId,popupNum) {
-    getPopupReferences(testId)[popupNum].showPopup();
+  function showPopUp(testId,popupNum) {
+    getPopupReferences(testId)[popupNum].showPopUp();
   }
 </script>
 
 <div id=test1>
-  <button onclick='showPopup("test1",0)'>Test1 Popup</button>
+  <button onclick='showPopUp("test1",0)'>Test1 Popup</button>
   <my-element>
     <template shadowroot=open>
       <div popup>
@@ -55,7 +55,7 @@
 <script>
   test(function() {
     const popup = getPopupReferences('test1')[0];
-    popup.showPopup();
+    popup.showPopUp();
     assert_true(popup.matches(':top-layer'));
     assert_true(isElementVisible(popup));
   }, "Popups located inside shadow DOM can still be shown");
@@ -63,10 +63,10 @@
 
 
 <div id=test2>
-  <button id=t2b1 onclick='showPopup("test2",0)'>Test 2 Popup 1</button>
+  <button id=t2b1 onclick='showPopUp("test2",0)'>Test 2 Popup 1</button>
   <div popup anchor=t2b1 style="top: 400px;">
     <p>Popup 1</p>
-    <button id=t2b2 onclick='showPopup("test2",1)'>Test 2 Popup 2</button>
+    <button id=t2b2 onclick='showPopUp("test2",1)'>Test 2 Popup 2</button>
   </div>
   <my-element>
     <template shadowroot=open>
@@ -81,10 +81,10 @@
 <script>
   test(function() {
     const [popup1,popup2] = getPopupReferences('test2');
-    popup1.showPopup();
+    popup1.showPopUp();
     assert_true(popup1.matches(':top-layer'));
     assert_true(isElementVisible(popup1));
-    popup2.showPopup();
+    popup2.showPopUp();
     assert_false(popup1.matches(':top-layer'), 'popup1 open'); // P1 was closed by P2
     assert_false(isElementVisible(popup1), 'popup1 visible');
     assert_true(popup2.matches(':top-layer'), 'popup2 open'); // P2 is open
@@ -96,13 +96,13 @@
 <div id=test3>
   <my-element>
     <template shadowroot=open>
-      <button id=t3b1 onclick='showPopup("test3",0)'>Test 3 Popup 1</button>
+      <button id=t3b1 onclick='showPopUp("test3",0)'>Test 3 Popup 1</button>
       <div popup anchor=t3b1>
         <p>This popup will stay open when popup2 shows.</p>
         <slot></slot>
       </div>
     </template>
-    <button id=t3b2 onclick='showPopup("test3",1)'>Test 3 Popup 2</button>
+    <button id=t3b2 onclick='showPopUp("test3",1)'>Test 3 Popup 2</button>
   </my-element>
   <div popup anchor=t3b2>Popup 2</div>
 </div>
@@ -110,17 +110,17 @@
 <script>
   test(function() {
     const [popup1,popup2] = getPopupReferences('test3');
-    popup1.showPopup();
+    popup1.showPopUp();
     assert_true(popup1.matches(':top-layer'));
     assert_true(isElementVisible(popup1));
     // Showing popup2 should not close popup1, since it is a flat
     // tree ancestor of popup2's anchor button.
-    popup2.showPopup();
+    popup2.showPopUp();
     assert_true(popup2.matches(':top-layer'));
     assert_true(isElementVisible(popup2));
     assert_true(popup1.matches(':top-layer'));
     assert_true(isElementVisible(popup1));
-    popup1.hidePopup();
+    popup1.hidePopUp();
     assert_false(popup2.matches(':top-layer'));
     assert_false(popup1.matches(':top-layer'));
   }, "anchor references use the flat tree not the DOM tree");
@@ -128,12 +128,12 @@
 
 
 <div id=test4>
-  <button id=t4b1 onclick='showPopup("test4",0)'>Test 4 Popup 1</button>
+  <button id=t4b1 onclick='showPopUp("test4",0)'>Test 4 Popup 1</button>
   <div popup anchor=t4b1>
     <p>This should not get hidden when popup2 opens.</p>
     <my-element>
       <template shadowroot=open>
-        <button id=t4b2 onclick='showPopup("test4",1)'>Test 4 Popup 2</button>
+        <button id=t4b2 onclick='showPopUp("test4",1)'>Test 4 Popup 2</button>
         <div popup anchor=t4b2>
           <p>This should not hide popup1.</p>
         </div>
@@ -145,15 +145,15 @@
 <script>
   test(function() {
     const [popup1,popup2] = getPopupReferences('test4');
-    popup1.showPopup();
-    popup2.showPopup();
+    popup1.showPopUp();
+    popup2.showPopUp();
     // Both 1 and 2 should be open at this point.
     assert_true(popup1.matches(':top-layer'), 'popup1 not open');
     assert_true(isElementVisible(popup1));
     assert_true(popup2.matches(':top-layer'), 'popup2 not open');
     assert_true(isElementVisible(popup2));
     // This should hide both of them.
-    popup1.hidePopup();
+    popup1.hidePopUp();
     assert_false(popup2.matches(':top-layer'));
     assert_false(isElementVisible(popup2));
   }, "The popup stack is preserved across shadow-inclusive ancestors");
diff --git a/html/semantics/popups/popup-stacking-context.tentative.html b/html/semantics/popups/popup-stacking-context.tentative.html
index f3fd0bf2fa992c5..def3f477df0e9b2 100644
--- a/html/semantics/popups/popup-stacking-context.tentative.html
+++ b/html/semantics/popups/popup-stacking-context.tentative.html
@@ -33,5 +33,5 @@
 </style>
 
 <script>
-  document.querySelector('[popup]').showPopup();
+  document.querySelector('[popup]').showPopUp();
 </script>
diff --git a/html/semantics/popups/popup-stacking.tentative.html b/html/semantics/popups/popup-stacking.tentative.html
index 6af6a9cb7e6e1cb..cdb6e7503017c30 100644
--- a/html/semantics/popups/popup-stacking.tentative.html
+++ b/html/semantics/popups/popup-stacking.tentative.html
@@ -67,18 +67,18 @@
 <!-- Other examples -->
 
 <div popup id=p1 anchor=b1><p>This is popup #1</p>
-  <button id=b2 onclick='p2.showPopup()'>Popup 2</button>
-  <button id=b4 onclick='p4.showPopup()'>Popup 4</button>
+  <button id=b2 onclick='p2.showPopUp()'>Popup 2</button>
+  <button id=b4 onclick='p4.showPopUp()'>Popup 4</button>
 </div>
 <div popup id=p2 anchor=b2><p>This is popup #2</p>
-  <button id=b3 onclick='p3.showPopup()'>Popup 3</button>
+  <button id=b3 onclick='p3.showPopUp()'>Popup 3</button>
 </div>
 <div popup id=p3 anchor=b3><p>This is popup #3</p></div>
 <div popup id=p4 anchor=b4><p>This is popup #4</p></div>
-<button id=b1 onclick='p1.showPopup()'>Popup 1</button>
+<button id=b1 onclick='p1.showPopUp()'>Popup 1</button>
 
 <dialog id=d1>This is a dialog<button onclick='this.parentElement.close()'>Close</button></dialog>
-<button id=b5 onclick='d1.showPopup()'>Dialog</button>
+<button id=b5 onclick='d1.showPopUp()'>Dialog</button>
 
 <script>
   // Test basic ancestor relationships
@@ -91,14 +91,14 @@
       assert_true(!!descr && !!ancestor && !!child);
       assert_false(ancestor.matches(':top-layer'));
       assert_false(child.matches(':top-layer'));
-      ancestor.showPopup();
+      ancestor.showPopUp();
       if (clickToActivate)
         clickToActivate.click();
       else
-        child.showPopup();
+        child.showPopUp();
       assert_true(child.matches(':top-layer'));
       assert_true(ancestor.matches(':top-layer'));
-      ancestor.hidePopup();
+      ancestor.hidePopUp();
       assert_false(ancestor.matches(':top-layer'));
       assert_false(child.matches(':top-layer'));
     },descr);
@@ -114,33 +114,33 @@
   }
   test(function() {
     assertState(false,false,false,false);
-    p1.showPopup();
+    p1.showPopUp();
     assertState(true,false,false,false);
-    p2.showPopup();
+    p2.showPopUp();
     assertState(true,true,false,false);
-    p3.showPopup();
+    p3.showPopUp();
     assertState(true,true,true,false);
     // P4 is a sibling of P2, so showing it should
     // close P2 and P3.
-    p4.showPopup();
+    p4.showPopUp();
     assertState(true,false,false,true);
     // P2 should close P4 now.
-    p2.showPopup();
+    p2.showPopUp();
     assertState(true,true,false,false);
     // Hiding P1 should hide all.
-    p1.hidePopup();
+    p1.hidePopUp();
     assertState(false,false,false,false);
   }, "more complex nesting, all using anchor ancestry")
 
   test(function() {
     function openManyPopups() {
-      p1.showPopup();
-      p2.showPopup();
-      p3.showPopup();
+      p1.showPopUp();
+      p2.showPopUp();
+      p3.showPopUp();
       assertState(true,true,true,false);
     }
     openManyPopups();
-    d1.show(); // Dialog.showPopup() should hide all popups.
+    d1.show(); // Dialog.showPopUp() should hide all popups.
     assertState(false,false,false,false);
     d1.close();
     openManyPopups();
@@ -154,10 +154,10 @@
     assert_false(d1.open);
     d1.show();
     assert_true(d1.open);
-    p1.showPopup();
+    p1.showPopUp();
     assertState(true,false,false,false);
     assert_true(d1.open);
-    p1.hidePopup();
+    p1.hidePopUp();
     assert_true(d1.open);
     d1.close();
     assert_false(d1.open);
diff --git a/html/semantics/popups/popup-top-layer-interactions.tentative.html b/html/semantics/popups/popup-top-layer-interactions.tentative.html
index 9a39d9f2d9fdf5d..e12645afc278938 100644
--- a/html/semantics/popups/popup-top-layer-interactions.tentative.html
+++ b/html/semantics/popups/popup-top-layer-interactions.tentative.html
@@ -20,8 +20,8 @@
     type: types.popUp,
     closes: [types.popUp],
     createElement: () => Object.assign(document.createElement('div'), {popUp: 'auto'}),
-    trigger: function() {this.element.showPopup()},
-    close: function() {this.element.hidePopup()},
+    trigger: function() {this.element.showPopUp()},
+    close: function() {this.element.hidePopUp()},
     isTopLayer: function() {return this.element.matches(':top-layer')},
   },
   {
diff --git a/html/semantics/popups/popup-types.tentative.html b/html/semantics/popups/popup-types.tentative.html
index baa022d6e900a5c..7334e3944b04cf1 100644
--- a/html/semantics/popups/popup-types.tentative.html
+++ b/html/semantics/popups/popup-types.tentative.html
@@ -19,41 +19,41 @@
 }
 test(() => {
   assert_state_1(false,false,false,false);
-  popup.showPopup();
+  popup.showPopUp();
   assert_state_1(true,false,false,false);
-  hint.showPopup();
+  hint.showPopUp();
   assert_state_1(true,true,false,false);
-  async.showPopup();
+  async.showPopUp();
   assert_state_1(true,true,true,false);
-  async2.showPopup();
+  async2.showPopUp();
   assert_state_1(true,true,true,true);
-  hint.hidePopup();
+  hint.hidePopUp();
   assert_state_1(true,false,true,true);
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_state_1(false,false,true,true);
-  popup.showPopup();
-  hint.showPopup();
+  popup.showPopUp();
+  hint.showPopUp();
   assert_state_1(true,true,true,true);
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_state_1(false,false,true,true);
-  async.hidePopup();
+  async.hidePopUp();
   assert_state_1(false,false,false,true);
-  async2.hidePopup();
+  async2.hidePopUp();
   assert_state_1(false,false,false,false);
 },'hints and asyncs do not close popups');
 
 test(() => {
   assert_state_1(false,false,false,false);
-  hint.showPopup();
-  async.showPopup();
-  async2.showPopup();
+  hint.showPopUp();
+  async.showPopUp();
+  async2.showPopUp();
   assert_state_1(false,true,true,true);
-  popup.showPopup();
+  popup.showPopUp();
   assert_state_1(true,false,true,true);
-  popup.hidePopup();
+  popup.hidePopUp();
   assert_state_1(false,false,true,true);
-  async.hidePopup();
-  async2.hidePopup();
+  async.hidePopUp();
+  async2.hidePopUp();
   assert_state_1(false,false,false,false);
 },'popups close hints but not asyncs');
 </script>
@@ -74,15 +74,15 @@
 }
 test(() => {
   assert_state_2(false,false,false,false);
-  popup1.showPopup();
-  popup2.showPopup();
-  popup3.showPopup();
+  popup1.showPopUp();
+  popup2.showPopUp();
+  popup3.showPopUp();
   assert_state_2(true,true,true,false);
-  hint2.showPopup();
+  hint2.showPopUp();
   assert_state_2(true,true,true,true);
-  popup3.hidePopup(); // Should close the hint
+  popup3.hidePopUp(); // Should close the hint
   assert_state_2(true,true,false,false);
-  popup1.hidePopup();
+  popup1.hidePopUp();
   assert_state_2(false,false,false,false);
 },'hint, even with popup ancestor, closes with first popup');
 </script>