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-cleanup.tentative.html b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
new file mode 100644
index 00000000000000..762458ea669dda
--- /dev/null
+++ b/html/semantics/popups/popup-animated-hide-cleanup.tentative.html
@@ -0,0 +1,98 @@
+
+<!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="/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>
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..88e37cb4e3bd7d
--- /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>
