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
web-platform-tests · Jun 10, 2022 · ae64714 · ae64714
1 parent d95e64e
commit ae64714
Show file tree

Hide file tree

Showing 6 changed files with 296 additions and 0 deletions.
diff --git a/html/semantics/popups/popup-animated-display-ref.tentative.html b/html/semantics/popups/popup-animated-display-ref.tentative.html
@@ -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>
diff --git a/html/semantics/popups/popup-animated-hide-cleanup.tentative.html b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
@@ -0,0 +1,69 @@
+
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel=author href="mailto:masonf@chromium.org">
+<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="/streams/resources/test-utils.js"></script>
+
+<div popup>This is a popup</div>
+<dialog>This is a dialog</div>
+
+<style>
+  [popup] {
+    left: 0px;
+  }
+  [popup]:top-layer {
+    animation: move 1000s;
+  }
+  @keyframes move {
+    from { left: 0px; }
+    to { left: 200px; }
+  }
+  [popup]::backdrop {
+    background-color: red;
+  }
+</style>
+<script>
+function rAF() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+function addPopup() {
+  const popup = document.createElement('div');
+  popup.popup = 'auto';
+  popup.textContent = 'This is a popup';
+  document.body.appendChild(popup);
+  return popup;
+}
+window.onload = () => {
+  promise_test(async () => {
+    let popup = addPopup();
+    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();
+    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)');
+}
+</script>
diff --git a/html/semantics/popups/popup-animated-hide-display.tentative.html b/html/semantics/popups/popup-animated-hide-display.tentative.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<link rel=author href="mailto:masonf@chromium.org">
+<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>
diff --git a/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html b/html/semantics/popups/popup-animated-hide-finishes-ref.tentative.html
@@ -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>
diff --git a/html/semantics/popups/popup-animated-hide-finishes.tentative.html b/html/semantics/popups/popup-animated-hide-finishes.tentative.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<link rel=author href="mailto:masonf@chromium.org">
+<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>
diff --git a/html/semantics/popups/popup-animated-show-display.tentative.html b/html/semantics/popups/popup-animated-show-display.tentative.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta charset="utf-8">
+<link rel=author href="mailto:masonf@chromium.org">
+<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>