From f2e42e87792813c6183721668cf488354715c0b0 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonf@chromium.org>
Date: Tue, 21 Jun 2022 15:29:09 -0700
Subject: [PATCH] Rename the `popup` IDL attribute to `popUp`, per resolution

See [1] for details, but `popup` as an IDL property is not web
compatible. The community has decided to try `popUp` to see if perhaps
that will be more compatible.

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

Bug: 1307772
Fixed: 1332480

Change-Id: I0b42c49a9c7b7fa7a6bf10c61443a8b52fb977bf
---
 ...popup-animated-hide-cleanup.tentative.html |  38 +--
 ...opup-animation-corner-cases.tentative.html | 137 ++++++---
 .../popup-attribute-basic.tentative.html      | 274 +++++++++---------
 .../popups/popup-focus.tentative.html         | 198 ++++++-------
 .../popup-invoking-attribute.tentative.html   |  78 ++---
 ...opup-top-layer-interactions.tentative.html |  14 +-
 6 files changed, 395 insertions(+), 344 deletions(-)

diff --git a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
index 762458ea669dda8..99fc2b895761d06 100644
--- a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
+++ b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
@@ -45,51 +45,51 @@
 function rAF() {
   return new Promise(resolve => requestAnimationFrame(resolve));
 }
-function addPopup(classname) {
-  const popup = document.createElement('div');
-  popup.popup = 'auto';
-  popup.classList = classname;
-  popup.textContent = 'This is a popup';
-  document.body.appendChild(popup);
-  return popup;
+function addPopUp(classname) {
+  const popUp = document.createElement('div');
+  popUp.popUp = 'auto';
+  popUp.classList = classname;
+  popUp.textContent = 'This is a pop-up';
+  document.body.appendChild(popUp);
+  return popUp;
 }
 promise_test(async () => {
-  let popup = addPopup("animation");
+  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();
+  popUp.remove();
   garbageCollect();
   await rAF();
   // This test passes if it does not crash.
 },'Ensure no crashes if running animations are immediately cancelled (document removal)');
 
 promise_test(async (t) => {
-  let popup = addPopup("animation");
+  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 popup
+  dialog.showModal(); // Immediately hide pop-up
   t.add_cleanup(() => dialog.close());
   await rAF();
-  popup.remove();
+  popUp.remove();
   garbageCollect();
   await rAF();
   // This test passes if it does not crash.
 },'Ensure no crashes if running animations are immediately cancelled (dialog showModal)');
 
 promise_test(async (t) => {
-  let popup = addPopup("transition");
+  let popUp = addPopUp("transition");
   let dialog = document.querySelector('dialog');
   let button = document.createElement('button');
-  t.add_cleanup(() => {popup.remove();button.remove();});
+  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-animation-corner-cases.tentative.html b/html/semantics/popups/popup-animation-corner-cases.tentative.html
index 2edcca5b51adc38..dc1f071f929e848 100644
--- a/html/semantics/popups/popup-animation-corner-cases.tentative.html
+++ b/html/semantics/popups/popup-animation-corner-cases.tentative.html
@@ -29,62 +29,113 @@
 </style>
 
 <script>
-function createPopup(t,type) {
-  const popup = document.createElement('div');
-  popup.popup = 'auto';
-  popup.classList = type;
+function createPopUp(t,type) {
+  const popUp = document.createElement('div');
+  popUp.popUp = 'auto';
+  popUp.classList = type;
   const div = document.createElement('div');
   const descendent = div.appendChild(document.createElement('div'));
   descendent.appendChild(document.createTextNode("Descendent element"));
-  popup.append("This is a popup",div);
-  document.body.appendChild(popup);
-  t.add_cleanup(() => popup.remove());
-  return {popup, descendent};
+  popUp.append("This is a pop up",div);
+  document.body.appendChild(popUp);
+  t.add_cleanup(() => popUp.remove());
+  return {popUp, descendent};
 }
 promise_test(async (t) => {
-  const {popup, descendent} = createPopup(t,'animation');
-  assert_false(isElementVisible(popup));
-  assert_equals(descendent.parentElement.parentElement,popup);
-  popup.showPopup();
-  assert_true(popup.matches(':top-layer'));
-  assert_true(isElementVisible(popup));
-  assert_equals(popup.getAnimations({subtree: true}).length,0);
-  popup.hidePopup();
-  const animations = popup.getAnimations({subtree: true});
+  const {popUp, descendent} = createPopUp(t,'animation');
+  assert_false(isElementVisible(popUp));
+  assert_equals(descendent.parentElement.parentElement,popUp);
+  popUp.showPopup();
+  assert_true(popUp.matches(':top-layer'));
+  assert_true(isElementVisible(popUp));
+  assert_equals(popUp.getAnimations({subtree: true}).length,0);
+  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');
-  assert_true(isElementVisible(popup),'but animations should keep the popup visible');
+  assert_false(popUp.matches(':top-layer'),'popUp should not match :top-layer as soon as hidden');
+  assert_true(isElementVisible(popUp),'but animations should keep the popUp visible');
   assert_true(isElementVisible(descendent),'The descendent should also be visible');
   await waitForRender();
   await waitForRender();
-  assert_equals(popup.getAnimations({subtree: true}).length,2,'The animations should still be running');
-  assert_true(isElementVisible(popup),'Popup should still be visible due to animation');
+  assert_equals(popUp.getAnimations({subtree: true}).length,2,'The animations should still be running');
+  assert_true(isElementVisible(popUp),'PopUp should still be visible due to animation');
   animations.forEach(animation => animation.finish()); // Force the animations to finish
   await waitForRender(); // Wait one frame
-  assert_false(popup.matches(':top-layer'),'The popup still shouldn\'t match :top-layer');
-  assert_false(isElementVisible(popup),'The popup should now be invisible');
+  assert_false(popUp.matches(':top-layer'),'The pop up still shouldn\'t match :top-layer');
+  assert_false(isElementVisible(popUp),'The pop up should now be invisible');
   assert_false(isElementVisible(descendent),'The descendent should also be invisible');
-  assert_equals(popup.getAnimations({subtree: true}).length,0);
-},'Descendent animations should keep the popup visible until the animation ends');
+  assert_equals(popUp.getAnimations({subtree: true}).length,0);
+},'Descendent animations should keep the pop up visible until the animation ends');
 
 promise_test(async (t) => {
-  const {popup, descendent} = createPopup(t,'');
-  assert_equals(popup.classList.length, 0);
-  assert_false(isElementVisible(popup));
-  popup.showPopup();
-  assert_true(popup.matches(':top-layer'));
-  assert_true(isElementVisible(popup));
-  assert_equals(popup.getAnimations({subtree: true}).length,0);
-  // Start an animation on the popup and its descendent.
-  popup.animate([{opacity: 1},{opacity: 0}],{duration: 1000000,iterations: 1});
-  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();
-  assert_false(popup.matches(':top-layer'),'popup should not match :top-layer as soon as hidden');
-  assert_equals(popup.getAnimations({subtree: true}).length,2,'animations should still be running');
+  const {popUp, descendent} = createPopup(t,'');
+  assert_equals(popUp.classList.length, 0);
+  assert_false(isElementVisible(popUp));
+  popUp.showPopup();
+  assert_true(popUp.matches(':top-layer'));
+  assert_true(isElementVisible(popUp));
+  assert_equals(popUp.getAnimations({subtree: true}).length,0);
+  // Start an animation on the popUp and its descendent.
+  popUp.animate([{opacity: 1},{opacity: 0}],{duration: 1000000,iterations: 1});
+  descendent.animate([{transform: 'rotate(0)'},{transform: 'rotate(360deg)'}],1000000);
+  assert_equals(popUp.getAnimations({subtree: true}).length,2);
+  // Then hide the popUp.
+  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();
-  assert_equals(popup.getAnimations({subtree: true}).length,2,'animations should still be running');
-  assert_false(isElementVisible(popup),'Pre-existing animations should not keep the popup visible');
-},'Pre-existing animations should *not* keep the popup visible until the animation ends');
+  assert_equals(popUp.getAnimations({subtree: true}).length,2,'animations should still be running');
+  assert_false(isElementVisible(popUp),'Pre-existing animations should not keep the pop up visible');
+},'Pre-existing animations should *not* keep the pop up visible until the animation ends');
+
+promise_test(async (t) => {
+  const {popUp, descendent} = createPopup(t,'');
+  popUp.showPopup();
+  assert_true(isElementVisible(popUp));
+  assert_equals(popUp.getAnimations({subtree: true}).length,0);
+  let animation;
+  popUp.addEventListener('hide', () => {
+    animation = popUp.animate([{opacity: 1},{opacity: 0}],1000000);
+  });
+  assert_equals(popUp.getAnimations({subtree: true}).length,0,'There should be no animations yet');
+  popUp.hidePopup();
+  await waitForRender();
+  await waitForRender();
+  assert_equals(popUp.getAnimations({subtree: true}).length,1,'the hide animation should now be running');
+  assert_true(!!animation);
+  assert_true(isElementVisible(popUp),'The animation should keep the pop up visible');
+  animation.finish();
+  await waitForRender();
+  assert_false(isElementVisible(popUp),'Once the animation ends, the pop up is hidden');
+},'It should be possible to use the "hide" event handler to animate the hide');
+
+
+promise_test(async (t) => {
+  const {popUp, descendent} = createPopup(t,'');
+  const dialog = document.body.appendChild(document.createElement('dialog'));
+  t.add_cleanup(() => dialog.remove());
+  popUp.showPopup();
+  assert_true(isElementVisible(popUp));
+  assert_equals(popUp.getAnimations({subtree: true}).length,0);
+  popUp.addEventListener('hide', () => {
+    popUp.animate([{opacity: 1},{opacity: 0}],1000000);
+  });
+  assert_equals(popUp.getAnimations({subtree: true}).length,0,'There should be no animations yet');
+  dialog.showModal(); // Force hide the popUp
+  await waitForRender();
+  assert_equals(popUp.getAnimations({subtree: true}).length,1,'the hide animation should now be running');
+  assert_false(isElementVisible(popUp),'But the animation should *not* keep the pop up visible in this case');
+},'It should *not* be possible to use the "hide" event handler to animate the hide, if the hide is due to dialog.showModal');
+
+promise_test(async (t) => {
+  const {popUp, descendent} = createPopup(t,'');
+  popUp.showPopup();
+  assert_true(isElementVisible(popUp));
+  popUp.addEventListener('hide', (e) => {
+    e.preventDefault();
+  });
+  popUp.hidePopup();
+  await waitForRender();
+  assert_false(isElementVisible(popUp),'Even if hide event is cancelled, the pop up still closes');
+},'hide event cannot be cancelled');
 </script>
diff --git a/html/semantics/popups/popup-attribute-basic.tentative.html b/html/semantics/popups/popup-attribute-basic.tentative.html
index 22742a3a6edcd14..5e26a725761f0dc 100644
--- a/html/semantics/popups/popup-attribute-basic.tentative.html
+++ b/html/semantics/popups/popup-attribute-basic.tentative.html
@@ -7,164 +7,164 @@
 <script src="resources/popup-utils.js"></script>
 
 <div id=popups>
-  <div popup id=boolean>Popup</div>
-  <div popup="">Popup</div>
-  <div popup=auto>Popup</div>
-  <div popup=hint>Popup</div>
-  <div popup=async>Popup</div>
+  <div popup id=boolean>Pop up</div>
+  <div popup="">Pop up</div>
+  <div popup=auto>Pop up</div>
+  <div popup=hint>Pop up</div>
+  <div popup=async>Pop up</div>
 </div>
 
 <div id=nonpopups>
-  <div>Non-popup</div>
-  <div popup=popup>Non-popup</div>
-  <div popup=invalid>Non-popup</div>
+  <div>Not a pop-up</div>
+  <div popup=popup>Not a pop-up</div>
+  <div popup=invalid>Not a pop-up</div>
 </div>
 
 <script>
-  function popupVisible(popup, isPopup) {
-    const isVisible = isElementVisible(popup);
+  function popUpVisible(popUp, isPopUp) {
+    const isVisible = isElementVisible(popUp);
     if (isVisible) {
-      assert_not_equals(window.getComputedStyle(popup).display,'none');
-      assert_equals(isPopup,popup.matches(':top-layer'));
+      assert_not_equals(window.getComputedStyle(popUp).display,'none');
+      assert_equals(isPopUp,popUp.matches(':top-layer'));
     } else {
-      assert_equals(window.getComputedStyle(popup).display,'none');
-      assert_false(popup.matches(':top-layer'));
+      assert_equals(window.getComputedStyle(popUp).display,'none');
+      assert_false(popUp.matches(':top-layer'));
     }
     return isVisible;
   }
-  function assertIsFunctionalPopup(popup) {
-    assert_false(popupVisible(popup, /*isPopup*/true));
-    popup.showPopup();
-    assert_true(popupVisible(popup, /*isPopup*/true));
-    assert_throws_dom("InvalidStateError",() => popup.showPopup(),'Calling showPopup on a showing popup should throw InvalidStateError');
-    popup.hidePopup();
-    assert_false(popupVisible(popup, /*isPopup*/true));
-    assert_throws_dom("InvalidStateError",() => popup.hidePopup(),'Calling hidePopup on a hidden popup should throw InvalidStateError');
-    const parent = popup.parentElement;
-    popup.remove();
-    assert_throws_dom("InvalidStateError",() => popup.showPopup(),'Calling showPopup on a disconnected popup should throw InvalidStateError');
-    parent.appendChild(popup);
+  function assertIsFunctionalPopUp(popUp) {
+    assert_false(popUpVisible(popUp, /*isPopUp*/true));
+    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_false(popUpVisible(popUp, /*isPopUp*/true));
+    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');
+    parent.appendChild(popUp);
   }
-  function assertNotAPopup(nonPopup) {
+  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-popup should throw NotSupportedError');
-    assert_true(popupVisible(nonPopup, /*isPopup*/false));
-    assert_throws_dom("NotSupportedError",() => nonPopup.hidePopup(),'Calling hidePopup on a non-popup should throw NotSupportedError');
-    assert_true(popupVisible(nonPopup, /*isPopup*/false));
+    assert_true(popUpVisible(nonPopUp, /*isPopUp*/false));
+    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_true(popUpVisible(nonPopUp, /*isPopUp*/false));
   }
 
-  Array.from(document.getElementById('popups').children).forEach(popup => {
+  Array.from(document.getElementById('popups').children).forEach(popUp => {
     test((t) => {
-      assertIsFunctionalPopup(popup);
-    }, `The .showPopup() and .hidePopup() work on a popup, for ${popup.outerHTML}.`);
+      assertIsFunctionalPopUp(popUp);
+    }, `The .showPopup() and .hidePopup() work on a pop-up, for ${popUp.outerHTML}.`);
   });
 
-  Array.from(document.getElementById('nonpopups').children).forEach(nonPopup => {
+  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}.`);
+      assertNotAPopUp(nonPopUp);
+    }, `The .showPopup() and .hidePopup() do NOT work on elements without a 'popup' attribute, ${nonPopUp.outerHTML}.`);
   });
 
-  function createPopup(t) {
-    const popup = document.createElement('div');
-    document.body.appendChild(popup);
-    t.add_cleanup(() => popup.remove());
-    popup.setAttribute('popup','auto');
-    return popup;
+  function createPopUp(t) {
+    const popUp = document.createElement('div');
+    document.body.appendChild(popUp);
+    t.add_cleanup(() => popUp.remove());
+    popUp.setAttribute('popup','auto');
+    return popUp;
   }
 
   test((t) => {
     // YOU CAN set the attribute to anything.
     // Setting IDL to something sets the content attribute to exactly that, always.
     // GETTING the IDL only gets valid values.
-    const popup = createPopup(t);
-    assert_equals(popup.popup,'auto');
-    popup.setAttribute('popup','hint');
-    assert_equals(popup.popup,'hint');
-    popup.setAttribute('popup','HiNt');
-    assert_equals(popup.popup,'hint','Case is normalized in IDL');
-    assert_equals(popup.getAttribute('popup'),'HiNt','Case is *not* normalized/changed in the content attribute');
-    popup.popup='hInT';
-    assert_equals(popup.popup,'hint','Case is normalized in IDL');
-    assert_equals(popup.getAttribute('popup'),'hInT','Value set from IDL is propagated exactly to the content attribute');
-    popup.setAttribute('popup','invalid');
-    assert_equals(popup.popup,null,'Invalid values should reflect as null');
-    popup.removeAttribute('popup');
-    assert_equals(popup.popup,null,'No value should reflect as null');
-    popup.popup='hint';
-    assert_equals(popup.getAttribute('popup'),'hint');
-    popup.popup='auto';
-    assert_equals(popup.getAttribute('popup'),'auto');
-    popup.popup='';
-    assert_equals(popup.getAttribute('popup'),'');
-    assert_equals(popup.popup,'auto');
-    popup.popup='AuTo';
-    assert_equals(popup.getAttribute('popup'),'AuTo');
-    assert_equals(popup.popup,'auto');
-    popup.popup='invalid';
-    assert_equals(popup.getAttribute('popup'),'invalid','IDL setter allows any value');
-    assert_equals(popup.popup,null,'but IDL getter does not re-reflect invalid values');
-    popup.popup='';
-    assert_equals(popup.getAttribute('popup'),'','IDL setter propagates exactly');
-    assert_equals(popup.popup,'auto','Empty should map to auto in IDL');
-    popup.popup='auto';
-    popup.popup=null;
-    assert_equals(popup.getAttribute('popup'),null,'Setting null for the IDL property should remove the content attribute');
-    assert_equals(popup.popup,null,'Null returns null');
-    popup.popup='auto';
-    popup.popup=undefined;
-    assert_equals(popup.getAttribute('popup'),null,'Setting undefined for the IDL property should remove the content attribute');
-    assert_equals(popup.popup,null,'undefined returns null');
+    const popUp = createPopUp(t);
+    assert_equals(popUp.popUp,'auto');
+    popUp.setAttribute('popup','hint');
+    assert_equals(popUp.popUp,'hint');
+    popUp.setAttribute('popup','HiNt');
+    assert_equals(popUp.popUp,'hint','Case is normalized in IDL');
+    assert_equals(popUp.getAttribute('popup'),'HiNt','Case is *not* normalized/changed in the content attribute');
+    popUp.popUp='hInT';
+    assert_equals(popUp.popUp,'hint','Case is normalized in IDL');
+    assert_equals(popUp.getAttribute('popup'),'hInT','Value set from IDL is propagated exactly to the content attribute');
+    popUp.setAttribute('popup','invalid');
+    assert_equals(popUp.popUp,null,'Invalid values should reflect as null');
+    popUp.removeAttribute('popup');
+    assert_equals(popUp.popUp,null,'No value should reflect as null');
+    popUp.popUp='hint';
+    assert_equals(popUp.getAttribute('popup'),'hint');
+    popUp.popUp='auto';
+    assert_equals(popUp.getAttribute('popup'),'auto');
+    popUp.popUp='';
+    assert_equals(popUp.getAttribute('popup'),'');
+    assert_equals(popUp.popUp,'auto');
+    popUp.popUp='AuTo';
+    assert_equals(popUp.getAttribute('popup'),'AuTo');
+    assert_equals(popUp.popUp,'auto');
+    popUp.popUp='invalid';
+    assert_equals(popUp.getAttribute('popup'),'invalid','IDL setter allows any value');
+    assert_equals(popUp.popUp,null,'but IDL getter does not re-reflect invalid values');
+    popUp.popUp='';
+    assert_equals(popUp.getAttribute('popup'),'','IDL setter propagates exactly');
+    assert_equals(popUp.popUp,'auto','Empty should map to auto in IDL');
+    popUp.popUp='auto';
+    popUp.popUp=null;
+    assert_equals(popUp.getAttribute('popup'),null,'Setting null for the IDL property should remove the content attribute');
+    assert_equals(popUp.popUp,null,'Null returns null');
+    popUp.popUp='auto';
+    popUp.popUp=undefined;
+    assert_equals(popUp.getAttribute('popup'),null,'Setting undefined for the IDL property should remove the content attribute');
+    assert_equals(popUp.popUp,null,'undefined returns null');
   },'IDL attribute reflection');
 
   test((t) => {
-    const popup = createPopup(t);
-    assertIsFunctionalPopup(popup);
-    popup.removeAttribute('popup');
-    assertNotAPopup(popup);
-    popup.setAttribute('popup','AuTo');
-    assertIsFunctionalPopup(popup);
-    popup.removeAttribute('popup');
-    popup.setAttribute('PoPuP','AuTo');
-    assertIsFunctionalPopup(popup);
+    const popUp = createPopUp(t);
+    assertIsFunctionalPopUp(popUp);
+    popUp.removeAttribute('popup');
+    assertNotAPopUp(popUp);
+    popUp.setAttribute('popup','AuTo');
+    assertIsFunctionalPopUp(popUp);
+    popUp.removeAttribute('popup');
+    popUp.setAttribute('PoPuP','AuTo');
+    assertIsFunctionalPopUp(popUp);
     // Via IDL also
-    popup.popup = 'auto';
-    assertIsFunctionalPopup(popup);
-    popup.popup = 'aUtO';
-    assertIsFunctionalPopup(popup);
-    popup.popup = 'invalid';
-    assertNotAPopup(popup);
+    popUp.popUp = 'auto';
+    assertIsFunctionalPopUp(popUp);
+    popUp.popUp = 'aUtO';
+    assertIsFunctionalPopUp(popUp);
+    popUp.popUp = 'invalid';
+    assertNotAPopUp(popUp);
   },'Popup attribute value should be case insensitive');
 
   test((t) => {
-    const popup = createPopup(t);
-    assertIsFunctionalPopup(popup);
-    popup.setAttribute('popup','hint'); // Change popup type
-    assertIsFunctionalPopup(popup);
-    popup.setAttribute('popup','invalid'); // Change popup type to something invalid
-    assertNotAPopup(popup);
-    popup.popup = 'hint'; // Change popup type via IDL
-    assertIsFunctionalPopup(popup);
-    popup.popup = 'invalid'; // Make invalid via IDL
-    assertNotAPopup(popup);
-  },'Changing attribute values for popup should work');
+    const popUp = createPopUp(t);
+    assertIsFunctionalPopUp(popUp);
+    popUp.setAttribute('popup','hint'); // Change pop-up type
+    assertIsFunctionalPopUp(popUp);
+    popUp.setAttribute('popup','invalid'); // Change pop-up type to something invalid
+    assertNotAPopUp(popUp);
+    popUp.popUp = 'hint'; // Change pop-up type via IDL
+    assertIsFunctionalPopUp(popUp);
+    popUp.popUp = 'invalid'; // Make invalid via IDL
+    assertNotAPopUp(popUp);
+  },'Changing attribute values for pop-up should work');
 
   test((t) => {
-    const popup = createPopup(t);
-    popup.showPopup();
-    assert_true(popup.matches(':top-layer'));
-    popup.setAttribute('popup','hint'); // Change popup type
-    assert_false(popup.matches(':top-layer'));
-    popup.showPopup();
-    assert_true(popup.matches(':top-layer'));
-    popup.setAttribute('popup','async');
-    assert_false(popup.matches(':top-layer'));
-    popup.showPopup();
-    assert_true(popup.matches(':top-layer'));
-    popup.setAttribute('popup','invalid');
-    assert_false(popup.matches(':top-layer'));
-  },'Changing attribute values should close open popups');
+    const popUp = createPopUp(t);
+    popUp.showPopup();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.setAttribute('popup','hint'); // Change pop-up type
+    assert_false(popUp.matches(':top-layer'));
+    popUp.showPopup();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.setAttribute('popup','async');
+    assert_false(popUp.matches(':top-layer'));
+    popUp.showPopup();
+    assert_true(popUp.matches(':top-layer'));
+    popUp.setAttribute('popup','invalid');
+    assert_false(popUp.matches(':top-layer'));
+  },'Changing attribute values should close open pop-ups');
 
   function modalPseudoSupported() {
     try {
@@ -177,24 +177,24 @@
 
   ["auto","hint","async"].forEach(type => {
     test((t) => {
-      const popup = createPopup(t);
-      popup.setAttribute('popup',type);
-      popup.showPopup();
-      assert_true(popup.matches(':top-layer'));
-      popup.remove();
-      assert_false(popup.matches(':top-layer'));
-      document.body.appendChild(popup);
-      assert_false(popup.matches(':top-layer'));
-    },`Removing a visible popup=${type} element from the document should close the popup`);
+      const popUp = createPopUp(t);
+      popUp.setAttribute('popup',type);
+      popUp.showPopup();
+      assert_true(popUp.matches(':top-layer'));
+      popUp.remove();
+      assert_false(popUp.matches(':top-layer'));
+      document.body.appendChild(popUp);
+      assert_false(popUp.matches(':top-layer'));
+    },`Removing a visible popup=${type} element from the document should close the pop-up`);
 
     if (modalPseudoSupported()) {
       test((t) => {
-        const popup = createPopup(t);
-        popup.setAttribute('popup',type);
-        popup.showPopup();
-        assert_true(popup.matches(':top-layer'));
-        assert_false(popup.matches(':modal'));
-        popup.hidePopup();
+        const popUp = createPopUp(t);
+        popUp.setAttribute('popup',type);
+        popUp.showPopup();
+        assert_true(popUp.matches(':top-layer'));
+        assert_false(popUp.matches(':modal'));
+        popUp.hidePopup();
       },`A showing popup=${type} does not match :modal`);
     }
   });
diff --git a/html/semantics/popups/popup-focus.tentative.html b/html/semantics/popups/popup-focus.tentative.html
index 85f328f0e10345b..f9868369a2e1cba 100644
--- a/html/semantics/popups/popup-focus.tentative.html
+++ b/html/semantics/popups/popup-focus.tentative.html
@@ -2,7 +2,7 @@
 <meta charset="utf-8" />
 <title>Popup focus behaviors</title>
 <link rel="author" href="mailto:masonf@chromium.org">
-<link rel=help href="https://open-ui.org/components/popup.research.explainer">
+<link rel=help href="https://open-ui.org/components/popUp.research.explainer">
 <meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
@@ -11,80 +11,80 @@
 <script src="/resources/testdriver-vendor.js"></script>
 <script src="resources/popup-utils.js"></script>
 
-<div popup data-test='default behavior - popup is not focused' data-no-focus>
-  <p>This is a popup</p>
+<div popup data-test='default behavior - pop-up is not focused' data-no-focus>
+  <p>This is a pop-up</p>
   <button>first button</button>
 </div>
 
-<div popup data-test='autofocus popup' autofocus tabindex=-1 class=should-be-focused>
-  <p>This is a popup</p>
+<div popup data-test='autofocus pop-up' autofocus tabindex=-1 class=should-be-focused>
+  <p>This is a pop-up</p>
 </div>
 
-<div popup data-test='autofocus empty popup' autofocus tabindex=-1 class=should-be-focused></div>
+<div popup data-test='autofocus empty pop-up' autofocus tabindex=-1 class=should-be-focused></div>
 
-<div popup data-test='autofocus popup with button' autofocus tabindex=-1 class=should-be-focused>
-  <p>This is a popup</p>
+<div popup data-test='autofocus pop-up with button' autofocus tabindex=-1 class=should-be-focused>
+  <p>This is a pop-up</p>
   <button>button</button>
 </div>
 
 <div popup data-test='autofocus child'>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <button autofocus class=should-be-focused>autofocus button</button>
 </div>
 
 <div popup data-test='autofocus on tabindex=0 element'>
-  <p autofocus tabindex=0 class=should-be-focused>This is a popup with autofocus on a tabindex=0 element</p>
+  <p autofocus tabindex=0 class=should-be-focused>This is a pop-up with autofocus on a tabindex=0 element</p>
   <button>button</button>
 </div>
 
 <div popup data-test='autofocus multiple children'>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <button autofocus class=should-be-focused>autofocus button</button>
   <button autofocus>second autofocus button</button>
 </div>
 
-<div popup autofocus tabindex=-1 data-test='autofocus popup and multiple autofocus children' class=should-be-focused>
-  <p>This is a popup</p>
+<div popup autofocus tabindex=-1 data-test='autofocus pop-up and multiple autofocus children' class=should-be-focused>
+  <p>This is a pop-up</p>
   <button autofocus>autofocus button</button>
   <button autofocus>second autofocus button</button>
 </div>
 
-<div popup delegatesfocus data-test='delegatesfocus popup'>
-  <p>This is a popup</p>
+<div popup delegatesfocus data-test='delegatesfocus pop-up'>
+  <p>This is a pop-up</p>
   <button class=should-be-focused>first button should be focused</button>
   <button>second button</button>
 </div>
 
 <div popup delegatesfocus data-test='delegatesfocus takes precedence over autofocus'>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <button class=should-be-focused>first button</button>
   <button autofocus>autofocus button should NOT be focused</button>
 </div>
 
 <div popup delegatesfocus autofocus data-test='delegatesfocus takes precedence over autofocus 2'>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <button class=should-be-focused>first button</button>
   <button>autofocus button should NOT be focused</button>
 </div>
 
-<div popup delegatesfocus data-test='delegatesfocus on empty popup has no effect' data-no-focus></div>
+<div popup delegatesfocus data-test='delegatesfocus on empty pop-up has no effect' data-no-focus></div>
 
 <div popup data-test='delegatesfocus on child has no effect' data-no-focus>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <button delegatesfocus>first button</button>
 </div>
 
-<div popup delegatesfocus data-test='delegatesfocus skips contained popups'>
-  <p>This is a popup</p>
+<div popup delegatesfocus data-test='delegatesfocus skips contained pop-ups'>
+  <p>This is a pop-up</p>
   <div popup>
-    <button>Contained popup button</button>
+    <button>Contained pop-up button</button>
   </div>
   <button class=should-be-focused>first button</button>
   <button>autofocus button should NOT be focused</button>
 </div>
 
 <div popup delegatesfocus data-test='delegatesfocus skips contained dialogs'>
-  <p>This is a popup</p>
+  <p>This is a pop-up</p>
   <dialog>
     <button>Contained dialog button</button>
   </dialog>
@@ -103,18 +103,18 @@
 </style>
 
 <script>
-  function addInvoker(t, popup) {
+  function addInvoker(t, popUp) {
     const button = document.createElement('button');
     button.innerText = 'Click me';
-    const popupId = 'popup-id';
-    assert_equals(document.querySelectorAll('#' + popupId).length, 0);
+    const popUpId = 'pop-up-id';
+    assert_equals(document.querySelectorAll('#' + popUpId).length, 0);
     document.body.appendChild(button);
     t.add_cleanup(function() {
-      popup.removeAttribute('id');
+      popUp.removeAttribute('id');
       button.remove();
     });
-    popup.id = popupId;
-    button.setAttribute('togglepopup', popupId);
+    popUp.id = popUpId;
+    button.setAttribute('togglepopup', popUpId);
     return button;
   }
   function addPriorFocus(t) {
@@ -123,153 +123,153 @@
     t.add_cleanup(() => priorFocus.remove());
     return priorFocus;
   }
-  function activateAndVerify(popup) {
-    const testName = popup.getAttribute('data-test');
+  function activateAndVerify(popUp) {
+    const testName = popUp.getAttribute('data-test');
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
-      let expectedFocusedElement = popup.matches('.should-be-focused') ? popup : popup.querySelector('.should-be-focused');
-      if (popup.hasAttribute('data-no-focus')) {
+      let expectedFocusedElement = popUp.matches('.should-be-focused') ? popUp : popUp.querySelector('.should-be-focused');
+      if (popUp.hasAttribute('data-no-focus')) {
         expectedFocusedElement = priorFocus;
       }
       assert_true(!!expectedFocusedElement);
-      assert_false(popup.matches(':top-layer'));
+      assert_false(popUp.matches(':top-layer'));
 
-      // Directly show and hide the popup:
+      // 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 popup type:
+      // Change the pop-up type:
       priorFocus.focus();
-      popup.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
-      assert_equals(popup.popup, 'auto', 'All popups in this test should start as popup=auto');
-      popup.popup = 'hint';
-      assert_false(popup.matches(':top-layer'), 'Changing the popup type should hide the popup');
+      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');
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus when the type is changed');
-      popup.popup = 'auto';
+      popUp.popUp = 'auto';
 
       // Remove from the document:
       priorFocus.focus();
-      popup.showPopup();
-      assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by popup.showPopup()`);
-      popup.remove();
-      assert_false(popup.matches(':top-layer'), 'Removing the popup should hide it');
-      if (!popup.hasAttribute('data-no-focus')) {
-        assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the popup is removed from the document');
+      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')) {
+        assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when the pop-up is removed from the document');
       }
-      document.body.appendChild(popup);
+      document.body.appendChild(popUp);
 
       // 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 popup');
+      assert_false(popUp.matches(':top-layer'), 'Opening a modal dialog should hide the pop-up');
       assert_not_equals(document.activeElement, priorFocus, 'prior element should *not* get focus when a modal dialog is shown');
       dialog.close();
       dialog.remove();
 
       // Use an activating element:
-      const button = addInvoker(t, popup);
+      const button = addInvoker(t, popUp);
       priorFocus.focus();
       button.click();
-      assert_true(popup.matches(':top-layer'));
+      assert_true(popUp.matches(':top-layer'));
       assert_equals(document.activeElement, expectedFocusedElement, `${testName} activated by button.click()`);
 
-      // Make sure we can directly focus the (already open) popup:
-      popup.focus();
-      assert_equals(document.activeElement, popup.hasAttribute('tabindex') ? popup : expectedFocusedElement, `${testName} directly focus with popup.focus()`);
-      button.click(); // Button is set to toggle the popup
-      assert_false(popup.matches(':top-layer'));
+      // Make sure we can directly focus the (already open) pop-up:
+      popUp.focus();
+      assert_equals(document.activeElement, popUp.hasAttribute('tabindex') ? popUp : expectedFocusedElement, `${testName} directly focus with popUp.focus()`);
+      button.click(); // Button is set to toggle the pop-up
+      assert_false(popUp.matches(':top-layer'));
       assert_equals(document.activeElement, priorFocus, 'prior element should get focus on button-toggled hide');
     }, "Popup focus test: " + testName);
 
     promise_test(async t => {
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
-      let button = addInvoker(t, popup);
-      assert_equals(button.getAttribute('togglepopup'), popup.id, 'This test assumes the button uses `togglepopup`.');
+      assert_false(popUp.matches(':top-layer'), 'pop-up should start out hidden');
+      let button = addInvoker(t, popUp);
+      assert_equals(button.getAttribute('togglepopup'), popUp.id, 'This test assumes the button uses `togglepopup`.');
       assert_not_equals(button, priorFocus, 'Stranger things have happened');
-      assert_false(popup.contains(button), 'Start with a non-contained button');
+      assert_false(popUp.contains(button), 'Start with a non-contained button');
       priorFocus.focus();
       assert_equals(document.activeElement, priorFocus);
-      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'));
+      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'));
       assert_equals(document.activeElement, priorFocus, 'Focus should return to prior focus');
 
-      // Same thing, but the button is contained within the popup
+      // Same thing, but the button is contained within the pop-up
       button.removeAttribute('togglepopup');
-      button.setAttribute('hidepopup', popup.id);
-      popup.appendChild(button);
+      button.setAttribute('hidepopup', popUp.id);
+      popUp.appendChild(button);
       priorFocus.focus();
-      popup.showPopup();
-      assert_true(popup.matches(':top-layer'));
-      if (!popup.hasAttribute('data-no-focus')) {
+      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');
       }
       await clickOn(button);
-      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup');
+      assert_false(popUp.matches(':top-layer'), 'clicking button should hide the pop-up');
       assert_equals(document.activeElement, priorFocus, 'Contained button should return focus to the previously focused element');
 
       // Same thing, but the button is unrelated (no togglepopup)
       button = document.createElement('button');
       document.body.appendChild(button);
       priorFocus.focus();
-      popup.showPopup();
-      assert_true(popup.matches(':top-layer'));
-      await clickOn(button); // This will light dismiss the popup, focus the prior focus, then focus this button.
-      assert_false(popup.matches(':top-layer'), 'clicking button should hide the popup (via light dismiss)');
+      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)');
       assert_equals(document.activeElement, button, 'Focus should go to unrelated button on light dismiss');
     }, "Popup button click focus test: " + testName);
 
     promise_test(async t => {
-      if (popup.hasAttribute('data-no-focus')) {
-        // This test only applies if the popup changes focus
+      if (popUp.hasAttribute('data-no-focus')) {
+        // This test only applies if the pop-up changes focus
         return;
       }
       const priorFocus = addPriorFocus(t);
-      assert_false(popup.matches(':top-layer'), 'popup should start out hidden');
+      assert_false(popUp.matches(':top-layer'), 'pop-up should start out hidden');
 
       // Move the prior focus out of the document
       priorFocus.focus();
-      popup.showPopup();
-      assert_true(popup.matches(':top-layer'));
+      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) popup
+      // Move the prior focus inside the (already open) pop-up
       priorFocus.focus();
-      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 popup
-      assert_true(popup.contains(priorFocus));
-      assert_true(popup.matches(':top-layer'), 'popup should stay open');
-      popup.hidePopup();
-      assert_not_equals(document.activeElement, priorFocus, 'focused element is display:none inside the popup');
+      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();
+      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);
   }
 
-  document.querySelectorAll('body > [popup]').forEach(popup => activateAndVerify(popup));
+  document.querySelectorAll('body > [popup]').forEach(popUp => activateAndVerify(popUp));
 </script>
diff --git a/html/semantics/popups/popup-invoking-attribute.tentative.html b/html/semantics/popups/popup-invoking-attribute.tentative.html
index 4a40768647156a6..eba8f553f60925e 100644
--- a/html/semantics/popups/popup-invoking-attribute.tentative.html
+++ b/html/semantics/popups/popup-invoking-attribute.tentative.html
@@ -28,7 +28,7 @@
   return {expectedBehavior: (t || s) ? "show" : "none", expectedId: t || s || 1};
 };
 const noActivationLogic = (t,s,h) => {
-  // This does not activate any popups.
+  // This does not activate any pop-ups.
   return {expectedBehavior: "none", expectedId: 1};
 }
 function activateTextInputFn(arrowChoice) {
@@ -83,7 +83,7 @@
     name: `<input type="${type}"">`,
     makeElement: makeElementWithType('input',type),
     invokeFn: activateTextInputFn('down'),
-    getExpectedLogic: noActivationLogic, // None of these support popup invocation
+    getExpectedLogic: noActivationLogic, // None of these support pop-up invocation
     supported: false,
   };
 });
@@ -117,59 +117,59 @@
       s_set.forEach(s => {
         h_set.forEach(h => {
           promise_test(async test => {
-            const popup1 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-1'});
-            const popup2 = Object.assign(document.createElement('div'),{popup: type, id: 'popup-2'});
-            assert_equals(popup1.popup,type);
-            assert_equals(popup2.popup,type);
-            assert_not_equals(popup1.id,popup2.id);
+            const popUp1 = Object.assign(document.createElement('div'),{popUp: type, id: 'pop-up-1'});
+            const popUp2 = Object.assign(document.createElement('div'),{popUp: type, id: 'pop-up-2'});
+            assert_equals(popUp1.popUp,type);
+            assert_equals(popUp2.popUp,type);
+            assert_not_equals(popUp1.id,popUp2.id);
             const invoker = testcase.makeElement(test);
-            if (t) invoker.setAttribute('togglepopup',t===1 ? popup1.id : popup2.id);
-            if (s) invoker.setAttribute('showpopup',s===1 ? popup1.id : popup2.id);
-            if (h) invoker.setAttribute('hidepopup',h===1 ? popup1.id : popup2.id);
-            assert_true(!document.getElementById(popup1.id));
-            assert_true(!document.getElementById(popup2.id));
-            document.body.appendChild(popup1);
-            document.body.appendChild(popup2);
+            if (t) invoker.setAttribute('togglepopup',t===1 ? popUp1.id : popUp2.id);
+            if (s) invoker.setAttribute('showpopup',s===1 ? popUp1.id : popUp2.id);
+            if (h) invoker.setAttribute('hidepopup',h===1 ? popUp1.id : popUp2.id);
+            assert_true(!document.getElementById(popUp1.id));
+            assert_true(!document.getElementById(popUp2.id));
+            document.body.appendChild(popUp1);
+            document.body.appendChild(popUp2);
             test.add_cleanup(() => {
-              popup1.remove();
-              popup2.remove();
+              popUp1.remove();
+              popUp2.remove();
             });
             const {expectedBehavior, expectedId} = testcase.getExpectedLogic(t,s,h);
             const otherId = expectedId !== 1 ? 1 : 2;
-            function assert_popup(num,state,message) {
+            function assert_popUp(num,state,message) {
               assert_true(num>0,`Invalid expectedId ${num}`);
-              assert_equals((num===1 ? popup1 : popup2).matches(':top-layer'),state,message || "");
+              assert_equals((num===1 ? popUp1 : popUp2).matches(':top-layer'),state,message || "");
             }
-            assert_popup(expectedId,false);
-            assert_popup(otherId,false);
+            assert_popUp(expectedId,false);
+            assert_popUp(otherId,false);
             await testcase.invokeFn(invoker);
-            assert_popup(otherId,false,'The other popup should never change');
+            assert_popUp(otherId,false,'The other pop-up should never change');
             switch (expectedBehavior) {
               case "toggle":
               case "show":
-                assert_popup(expectedId,true,'Toggle or show should show the popup');
-                (expectedId===1 ? popup1 : popup2).hidePopup(); // Hide the popup
+                assert_popUp(expectedId,true,'Toggle or show should show the pop-up');
+                (expectedId===1 ? popUp1 : popUp2).hidePopup(); // Hide the pop-up
                 break;
               case "hide":
               case "none":
-                assert_popup(expectedId,false,'Hide or none should leave the popup hidden');
+                assert_popUp(expectedId,false,'Hide or none should leave the pop-up hidden');
                 break;
               default:
                 assert_unreached();
             }
-            (expectedId===1 ? popup1 : popup2).showPopup(); // Show the popup directly
-            assert_popup(expectedId,true);
-            assert_popup(otherId,false);
+            (expectedId===1 ? popUp1 : popUp2).showPopup(); // Show the pop-up directly
+            assert_popUp(expectedId,true);
+            assert_popUp(otherId,false);
             await testcase.invokeFn(invoker);
-            assert_popup(otherId,false,'The other popup should never change');
+            assert_popUp(otherId,false,'The other pop-up should never change');
             switch (expectedBehavior) {
               case "toggle":
               case "hide":
-                assert_popup(expectedId,false,'Toggle or hide should hide the popup');
+                assert_popUp(expectedId,false,'Toggle or hide should hide the pop-up');
                 break;
               case "show":
               case "none":
-                assert_popup(expectedId,true,'Show or none should leave the popup showing');
+                assert_popUp(expectedId,true,'Show or none should leave the pop-up showing');
                 break;
               default:
                 assert_unreached();
@@ -185,7 +185,7 @@
 
 
 <button togglepopup=p1>Toggle Popup 1</button>
-<div popup id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is popup #1</div>
+<div popup id=p1 style="border: 5px solid red;top: 100px;left: 100px;">This is pop-up #1</div>
 
 <script>
 function clickOn(element) {
@@ -196,15 +196,15 @@
     .send();
 }
 
-const popup = document.querySelector('[popup]');
+const popUp = document.querySelector('[popup]');
 const button = document.querySelector('button');
 let showCount = 0;
 let hideCount = 0;
-popup.addEventListener('show',() => ++showCount);
-popup.addEventListener('hide',() => ++hideCount);
+popUp.addEventListener('show',() => ++showCount);
+popUp.addEventListener('hide',() => ++hideCount);
 
 async function assertState(expectOpen,expectShow,expectHide) {
-  assert_equals(popup.matches(':top-layer'),expectOpen,'Popup open state is incorrect');
+  assert_equals(popUp.matches(':top-layer'),expectOpen,'Popup open state is incorrect');
   await new Promise(resolve => requestAnimationFrame(resolve));
   assert_equals(showCount,expectShow,'Show count is incorrect');
   assert_equals(hideCount,expectHide,'Hide count is incorrect');
@@ -215,13 +215,13 @@
   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 popup (also check event counts)");
+}, "Clicking a togglepopup button opens a closed pop-up (also check event counts)");
 
 promise_test(async () => {
   showCount = hideCount = 0;
@@ -230,4 +230,4 @@
   await assertState(true,1,0);
   await clickOn(button);
   await assertState(false,1,1);
-}, "Clicking a togglepopup button closes an open popup (also check event counts)");
+}, "Clicking a togglepopup button closes an open pop-up (also check event counts)");
diff --git a/html/semantics/popups/popup-top-layer-interactions.tentative.html b/html/semantics/popups/popup-top-layer-interactions.tentative.html
index c8f9ddf658f8f51..9a39d9f2d9fdf5d 100644
--- a/html/semantics/popups/popup-top-layer-interactions.tentative.html
+++ b/html/semantics/popups/popup-top-layer-interactions.tentative.html
@@ -11,22 +11,22 @@
 <body>
 <script>
 const types = Object.freeze({
-  popup: Symbol("Popup API"),
+  popUp: Symbol("Pop-up API"),
   modalDialog: Symbol("Modal Dialog"),
   fullscreen: Symbol("Fullscreen Element"),
 });
 const examples = [
   {
-    type: types.popup,
-    closes: [types.popup],
-    createElement: () => Object.assign(document.createElement('div'), {popup: 'auto'}),
+    type: types.popUp,
+    closes: [types.popUp],
+    createElement: () => Object.assign(document.createElement('div'), {popUp: 'auto'}),
     trigger: function() {this.element.showPopup()},
     close: function() {this.element.hidePopup()},
     isTopLayer: function() {return this.element.matches(':top-layer')},
   },
   {
     type: types.modalDialog,
-    closes: [types.popup],
+    closes: [types.popUp],
     createElement: () => document.createElement('dialog'),
     trigger: function() {this.element.showModal();this.showing=true;},
     close: function() {this.element.close();this.showing=false;},
@@ -34,7 +34,7 @@
   },
   {
     type: types.fullscreen,
-    closes: [types.popup, types.fullscreen],
+    closes: [types.popUp, types.fullscreen],
     createElement: () => document.createElement('div'),
     trigger: async function(visibleElement) {assert_false(this.isTopLayer());await bless(visibleElement);await this.element.requestFullscreen();},
     close: function() {assert_equals(this.element,document.fullscreenElement); document.exitFullscreen();},
@@ -62,7 +62,7 @@
   // The normal "bless" function doesn't work well when there are top layer
   // elements blocking clicks. Additionally, since the normal test_driver.bless
   // function just adds a button to the main document and clicks it, we can't
-  // call that in the presence of open popups, since that click will close them.
+  // call that in the presence of open pop-ups, since that click will close them.
   const button = document.createElement('button');
   button.innerHTML = "Click me to activate";
   visibleElement.appendChild(button);