Skip to content

Commit

Permalink
Bug 1772618 [wpt PR 34304] - Make popups animation-friendly, a=testonly
Browse files Browse the repository at this point in the history 
Automatic update from web-platform-tests
Make popups animation-friendly

Now, popups will follow this process when showing/hiding:

showPopup():
 1. Move the popup to the top layer, and remove the UA display:none
    style.
 2. Update style. (Transition initial style can be specified in this
    state.)
 3. Set the :top-layer pseudo class.
 4. Update style. (Animations/transitions happen here.)

hidePopup():
 1. Capture any already-running animations via getAnimations().
 2. Remove the :top-layer pseudo class.
 3. Update style. (Animations/transitions start here.)
 4. If the hidePopup() call is not due to a "force out" situation,
    getAnimations() again, remove any from step #1, and then wait here
    until all of them finish or are cancelled.
 4. Remove the popup from the top layer, and add the UA display:none
    style.
 5. Update style.

See this issue for more details:
  openui/open-ui#335

Bug: 1307772
Change-Id: Ia20eb6e9533c1a0b1029ca1279d42fe2648300af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3688871
Reviewed-by: Robert Flack <[email protected]>
Commit-Queue: Mason Freed <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1014235}

--

wpt-commits: 297b9403e0ab65348de01169d1a4e3cf078af7b9
wpt-pr: 34304
  • Loading branch information
@moz-wptsync-bot
Mason Freed authored and moz-wptsync-bot committed Jun 20, 2022
1 parent 5a6cab8 commit 8b2f035
Show file tree
Hide file tree
Showing 6 changed files with 325 additions and 0 deletions.
34 changes: 34 additions & 0 deletions testing/web-platform/tests/html/semantics/popups/popup-animated-display-ref.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>

<div class=topmost></div>
<div class=fakepopup>This is a popup</div>


<style>
.fakepopup {
/* Per spec: */
display: block;
position: fixed;
top: 0;
/* Per settings in test file: */
width: 100px;
height: 100px;
border: 1px solid;
padding: 1em;
margin: 1em;
background: white;
color: black;
/* The animated property */
left: 100px;
}
.topmost {
position:fixed;
top:0;
left:0;
width:1000px;
height:1000px;
background:green;
margin:0;
padding:0;
}
</style>
98 changes: 98 additions & 0 deletions testing/web-platform/tests/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@

<!DOCTYPE html>
<meta charset="utf-8">
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popup.research.explainer">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<script src="resources/popup-utils.js"></script>
<script src="/streams/resources/test-utils.js"></script>

<dialog>I am a dialog</dialog>

<style>
[popup].animation {
left: 0px;
}
[popup].animation:top-layer {
animation: move 1000s;
}
@keyframes move {
from { left: 0px; }
to { left: 200px; }
}

[popup].transition {
opacity: 0;
transition: opacity 5s;
}
[popup].transition:top-layer {
opacity: 1;
}

[popup] {
top: 200px;
}
[popup]::backdrop {
background-color: rgba(255,0,0,0.2);
}
</style>

<script>
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;
}
promise_test(async () => {
let popup = addPopup("animation");
let dialog = document.querySelector('dialog');
popup.showPopup(); // No animations here
await rAF();
popup.hidePopup(); // Start animations
await rAF();
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 dialog = document.querySelector('dialog');
popup.showPopup(); // No animations here
await rAF();
popup.hidePopup(); // Start animations
await rAF();
dialog.showModal(); // Immediately hide popup
t.add_cleanup(() => dialog.close());
await rAF();
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 dialog = document.querySelector('dialog');
let button = document.createElement('button');
t.add_cleanup(() => {popup.remove();button.remove();});
document.body.appendChild(button);
button.addEventListener('click',() => dialog.show());
popup.showPopup(); // No animations here
await rAF();
await clickOn(button);
await rAF();
// This test passes if it does not crash.
},'Ensure no crashes if running transitions are immediately cancelled (button click)');
</script>
61 changes: 61 additions & 0 deletions testing/web-platform/tests/html/semantics/popups/popup-animated-hide-display.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popup.research.explainer">
<link rel=match href="popup-animated-display-ref.tentative.html">

<div popup>This is a popup</div>
<div class=topmost></div>

<style>
[popup] {
width: 100px;
height: 100px;
border: 1px solid;
padding: 1em;
margin: 1em;
background: white;
color: black;
left: 0;
transition: left 20s steps(2, jump-end) -10s;
}
[popup]:top-layer {
left: 200px;
}
.topmost {
position:fixed;
z-index: 999999;
top:0;
left:0;
width:1000px;
height:1000px;
background:green;
margin:0;
padding:0;
}
</style>

<script>
window.onload = () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// This will show the popup, hide the popup, and start the transition.
const popup = document.querySelector('[popup]');
popup.showPopup();
popup.getAnimations()[0].finish();
if (getComputedStyle(popup).left != "200px")
popup.remove();
popup.hidePopup();
document.getAnimations()[0].ready.then(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Take a screenshot now.
document.documentElement.classList.remove('reftest-wait');
});
});
});
});
});
}
</script>
16 changes: 16 additions & 0 deletions .../web-platform/tests/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!DOCTYPE html>

<div class=topmost></div>

<style>
.topmost {
position:fixed;
top:0;
left:0;
width:1000px;
height:1000px;
background:green;
margin:0;
padding:0;
}
</style>
60 changes: 60 additions & 0 deletions testing/web-platform/tests/html/semantics/popups/popup-animated-hide-finishes.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popup.research.explainer">
<link rel=match href="popup-animated-hide-finishes-ref.tentative.html">

<div popup>This is a popup</div>
<div class=topmost></div>

<style>
[popup] {
width: 100px;
height: 100px;
border: 1px solid;
padding: 1em;
margin: 1em;
background: white;
color: black;
left: 0px;
/* Immediate transition: */
transition: left 1s -1s;
}
[popup]:top-layer {
left: 200px;
}
[popup]::backdrop {
background-color: red;
}
.topmost {
position:fixed;
z-index: 999999;
top:0;
left:0;
width:1000px;
height:1000px;
background:green;
margin:0;
padding:0;
}
</style>

<script>
window.onload = () => {
requestAnimationFrame(() => {
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();
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Take a screenshot now.
document.documentElement.classList.remove('reftest-wait');
});
});
});
});
}
</script>
56 changes: 56 additions & 0 deletions testing/web-platform/tests/html/semantics/popups/popup-animated-show-display.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<link rel=author href="mailto:[email protected]">
<link rel=help href="https://open-ui.org/components/popup.research.explainer">
<link rel=match href="popup-animated-display-ref.tentative.html">

<div popup>This is a popup</div>
<div class=topmost></div>

<style>
[popup] {
width: 100px;
height: 100px;
border: 1px solid;
padding: 1em;
margin: 1em;
background: white;
color: black;
left: 0;
transition: left 20s steps(2, jump-end) -10s;
}
[popup]:top-layer {
left: 200px;
}
.topmost {
position:fixed;
z-index: 999999;
top:0;
left:0;
width:1000px;
height:1000px;
background:green;
margin:0;
padding:0;
}
</style>

<script>
window.onload = () => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// This will show the popup, and start the transition.
document.querySelector('[popup]').showPopup();
document.getAnimations()[0].ready.then(() => {
requestAnimationFrame(() => {
requestAnimationFrame(() => {
// Take a screenshot now.
document.documentElement.classList.remove('reftest-wait');
});
});
});
});
});
}
</script>

0 comments on commit 8b2f035

Please sign in to comment.