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 9, 2022 · 015d3c8 · 015d3c8
1 parent 6f5cdec
commit 015d3c8
Show file tree

Hide file tree

Showing 5 changed files with 227 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-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:[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>
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:[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>
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:[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>