Skip to content

Commit

Permalink
Rename the popup IDL attribute to popUp, per resolution
Browse files Browse the repository at this point in the history 
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] openui/open-ui#546 (comment)

Bug: 1307772
Fixed: 1332480

Change-Id: I0b42c49a9c7b7fa7a6bf10c61443a8b52fb977bf
  • Loading branch information
@chromium-wpt-export-bot
Mason Freed authored and chromium-wpt-export-bot committed Jun 21, 2022
1 parent 4dcca14 commit f2e42e8
Show file tree
Hide file tree
Showing 6 changed files with 395 additions and 344 deletions.
38 changes: 19 additions & 19 deletions html/semantics/popups/popup-animated-hide-cleanup.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
137 changes: 94 additions & 43 deletions html/semantics/popups/popup-animation-corner-cases.tentative.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

0 comments on commit f2e42e8

Please sign in to comment.