Skip to content

Commit

Permalink
Bug 1776302 [wpt PR 34570] - Rename showPopup->showPopUp and hidePopu…
Browse files Browse the repository at this point in the history
…p->hidePopUp, a=testonly

Automatic update from web-platform-tests
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] openui/open-ui#546 (comment)
[2] openui/open-ui#549

Bug: 1307772
Bug: 1338587
Change-Id: Iaa28d4c1b7d526bb0b06c04eaec2fad5d0431746
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3717194
Reviewed-by: David Baron <[email protected]>
Auto-Submit: Mason Freed <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1017676}

--

wpt-commits: cd6f245502e992ef25dc2828f91f05a5f7dd689e
wpt-pr: 34570
  • Loading branch information
mfreed7 authored and moz-wptsync-bot committed Jun 29, 2022
1 parent 12e092b commit 70923db
Show file tree
Hide file tree
Showing 26 changed files with 189 additions and 189 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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());
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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);
Expand All @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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'));
Expand All @@ -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'));
Expand All @@ -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`);
}
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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')) {
Expand All @@ -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');
Expand Down Expand 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'));
Expand All @@ -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');
Expand All @@ -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)');
Expand All @@ -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);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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":
Expand All @@ -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);
Expand Down Expand Up @@ -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)");

Expand Down
Loading

0 comments on commit 70923db

Please sign in to comment.