1 files changed, 76 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html
new file mode 100644
index 0000000000..e2424cad8c
--- /dev/null
+++ b/testing/web-platform/tests/css/css-view-transitions/window-resize-aborts-transition.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>View transitions: Resizing viewport skips the transition</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:bokan@chromium.org">
+
+<script src="/common/rendering-utils.js"></script>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+
+<script>
+function waitForAtLeastOneFrame(win) {
+  return new Promise(resolve => {
+    win.requestAnimationFrame(() => {
+      win.requestAnimationFrame(() => {
+        resolve();
+      });
+    });
+  });
+}
+
+let popupWin;
+promise_test(async t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+
+  return new Promise(async (resolve, reject) => {
+    await waitForAtLeastOneFrame(window);
+
+    // Open a popup window that we'll use to start a transition
+    await test_driver.bless('Open a popup in a new window', () => {
+        popupWin = window.open('about:blank', 'popup', 'width=300,height=300');
+    });
+    let popupDoc = popupWin.document;
+    popupDoc.documentElement.innerHTML = `
+      <style>
+        html {background-color: red;}
+        html.new {background-color: limegreen;}
+
+        /* Set a no-op animation to show the old snapshot indefinitely. */
+        html::view-transition-group(*) {animation-duration: 10s;}
+        html::view-transition-new(*) {animation: unset;opacity: 0;}
+        html::view-transition-old(*) {animation-duration: 10s;opacity: 1;}
+      </style>`;
+
+    // Start a transition inside the popup.
+    let transition = popupDoc.startViewTransition(() => {
+      popupDoc.documentElement.classList.add('new');
+    });
+
+    let finishResolved = false;
+    transition.finished.then(() => {
+      finishResolved = true;
+    });
+
+    // Wait for the transition to start animating.
+    await transition.ready;
+    await waitForAtLeastOneFrame(popupWin);
+    await waitForAtLeastOneFrame(popupWin);
+
+    // Resize the popup window.
+    popupWin.resizeTo(popupWin.innerWidth/2, popupWin.innerHeight/2);
+
+    await waitForAtLeastOneFrame(popupWin);
+
+    // `finish` should have resolved as resizing the transition after capture
+    // should cause it to skip.
+    assert_true(finishResolved, "Transition must be finished by the window resize");
+    resolve();
+  });
+});
+</script>
+</head>
+</html>