Bug 1885526 [wpt PR 45122] - View-transitions should only be allowed …

…when page is visible, a=testonly Automatic update from web-platform-tests View-transitions should only be allowed when page is visible - Skip the transition if document becomes hidden - Disallow oubound cross-document view transitions when document is hidden - Skip inbound cross-document view transition if document becomes hidden - When calling startViewTransition() in a hidden document, start is as skipped. Based on following CSS resolution: w3c/csswg-drafts#9543 (comment) Bug: 329302331 Change-Id: Ieef3238240b35c5d7f7f819793f65f71d7d75037 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5374309 Reviewed-by: David Bokan <bokan@chromium.org> Commit-Queue: Noam Rosenthal <nrosenthal@chromium.org> Cr-Commit-Position: refs/heads/main@{#1273445} -- wpt-commits: de64b61df17bec0ed1e2777ab717bec6f8959a25 wpt-pr: 45122
erichdongubler-mozilla · Mar 21, 2024 · 27969dd · 27969dd
1 parent 3984a0e
commit 27969dd
Showing 1 changed file with 71 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/css-view-transitions/transition-in-hidden-page.html b/testing/web-platform/tests/css/css-view-transitions/transition-in-hidden-page.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+  <title>View transitions: Transition in a hidden page</title>
+  <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+  <meta name="timeout" content="long">
+  <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 src="/page-visibility/resources/window_state_context.js"></script>
+  <style>
+    ::view-transition-group(*) {
+      animation-duration: 5s;
+    }
+  </style>
+  <script>
+    promise_test(async t => {
+      assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+
+      const wsc = window_state_context(t);
+      await wsc.minimize();
+      assert_true(document.hidden);
+      const transition = document.startViewTransition();
+      await wsc.restore();
+      const [readyResult] = await Promise.allSettled([transition.ready]);
+      assert_equals(readyResult.status, "rejected");
+    }, "A view transition should be immediately skipped if started when document is hidden");
+
+    promise_test(async t => {
+      assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+
+      const wsc = window_state_context(t);
+      const transition = document.startViewTransition(async () => {
+      await wsc.minimize();
+    });
+
+    let event_fired = false;
+
+    window.addEventListener("visibilitychange", () => {
+      if (document.hidden)
+        event_fired = true;
+    });
+
+    // Restoring so that the document has an opportunity to present the real
+    // frame and start the transition's animation.
+    await wsc.restore();
+
+    const [readyResult] = await Promise.allSettled([transition.ready]);
+    assert_true(event_fired, "visibilitychange event should fire before skipping the transition");
+    await transition.finished;
+    assert_equals(readyResult.status, "rejected");
+  }, "A view transition should be skipped when a document becomes hidden while processing update callback");
+
+  promise_test(async t => {
+    assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+    assert_false(document.hidden);
+    const wsc = window_state_context(t);
+    const transition = document.startViewTransition(() => { });
+    await transition.ready;
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    await wsc.minimize();
+    const result = await new Promise(resolve => {
+      transition.finished.then(() => resolve("finished"));
+      t.step_timeout(() => resolve("timeout"), 1000);
+    });
+
+    assert_equals(result, "finished");
+  }, "A view transition should be skipped when a document becomes hidden while animating");
+</script>
+</body>
+
+</html>