diff --git a/html/semantics/popups/popup-animated-display-ref.tentative.html b/html/semantics/popups/popup-animated-display-ref.tentative.html
new file mode 100644
index 00000000000000..77f15441ae95df
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..410639e67152c8
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..d8334f985ed51f
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..c07a4ccda32d9e
--- /dev/null
+++ 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
new file mode 100644
index 00000000000000..deb75509264229
--- /dev/null
+++ 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>
