1 files changed, 98 insertions, 0 deletions
diff --git a/testing/web-platform/tests/html/semantics/popovers/popover-animated-hide-cleanup.tentative.html b/testing/web-platform/tests/html/semantics/popovers/popover-animated-hide-cleanup.tentative.html
new file mode 100644
index 0000000000..9310acc4ff
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/popovers/popover-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/popover-utils.js"></script>
+<script src="/common/gc.js"></script>
+
+<dialog>I am a dialog</dialog>
+
+<style>
+[popover].animation {
+  left: 0px;
+}
+[popover].animation:open {
+  animation: move 1000s;
+}
+@keyframes move {
+  from { left: 0px; }
+  to { left: 200px; }
+}
+
+[popover].transition {
+  opacity: 0;
+  transition: opacity 5s;
+}
+[popover].transition:open {
+  opacity: 1;
+}
+
+[popover] {
+  top: 200px;
+}
+[popover]::backdrop {
+  background-color: rgba(255,0,0,0.2);
+}
+</style>
+
+<script>
+function rAF() {
+  return new Promise(resolve => requestAnimationFrame(resolve));
+}
+function addPopover(classname) {
+  const popover = document.createElement('div');
+  popover.popover = 'auto';
+  popover.classList = classname;
+  popover.textContent = 'This is a popover';
+  document.body.appendChild(popover);
+  return popover;
+}
+promise_test(async () => {
+  let popover = addPopover("animation");
+  let dialog = document.querySelector('dialog');
+  popover.showPopover(); // No animations here
+  await rAF();
+  popover.hidePopover(); // Start animations
+  await rAF();
+  popover.remove();
+  await 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 popover = addPopover("animation");
+  let dialog = document.querySelector('dialog');
+  popover.showPopover(); // No animations here
+  await rAF();
+  popover.hidePopover(); // Start animations
+  await rAF();
+  dialog.showModal(); // Immediately hide popover
+  t.add_cleanup(() => dialog.close());
+  await rAF();
+  popover.remove();
+  await 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 popover = addPopover("transition");
+  let dialog = document.querySelector('dialog');
+  let button = document.createElement('button');
+  t.add_cleanup(() => {popover.remove();button.remove();});
+  document.body.appendChild(button);
+  button.addEventListener('click',() => dialog.show());
+  popover.showPopover(); // 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>