Rename showPopup->showPopUp and hidePopup->hidePopUp

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);

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();

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(() => {

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.

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(() => {

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();

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`);
     }
   });

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>

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");
     });
   });

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);

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);

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>

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)");