From 5ef26b2d656cea684eaa40d96ac5bf8e576d8b06 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Fri, 24 Jun 2022 09:38:50 -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
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3717194
Reviewed-by: David Baron <dbaron@chromium.org>
Auto-Submit: Mason Freed <masonf@chromium.org>
Commit-Queue: Mason Freed <masonf@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1017676}
---
 .../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 ee903c48ed08e6..aa43dd9aea0a6d 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 99fc2b895761d0..00ff0db6f57fbf 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 410639e67152c8..ea25ea153e9efe 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 88e37cb4e3bd7d..6ec2b7252ef699 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 deb75509264229..f03e6293209522 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 96812870268120..5707e604d90e33 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 5e26a725761f0d..efcd3355ebe24a 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 0b348f85d0103c..da975d95b659d8 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 ec1275e7ea8e65..2e29d9a4afc356 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 5fa7c911217291..fb8d9c1e424fc8 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 f9868369a2e1cb..c9a696e82067ad 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 c93bf163d93b79..d60b0df9068494 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 eba8f553f60925..ba461f807ea15e 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 12615b7e2e1a21..3c32a6dc6a992a 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 10317a8f35d655..a443be606dfabd 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 88736ab472b0d2..3cc545f9ae7e3c 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 674af1902d943d..9a0b87e6b74e68 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 7a350ea281dc68..c9f582ce8ffb25 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 32f42dfcea2f04..fd86672566d1ce 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 71d420e57988e5..7cf0951e5b14bc 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 b5f8100d04f619..f4df8623276808 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 b30a92cd090913..95fd3db07d51ba 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 f3fd0bf2fa992c..def3f477df0e9b 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 6af6a9cb7e6e1c..e9e987ea2ff2fc 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.show() 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 9a39d9f2d9fdf5..e12645afc27893 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 baa022d6e900a5..7334e3944b04cf 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>