instant-transition-finish-before-swap.https.html (2155B)
1 <!doctype html> 2 <title> 3 View transitions: a short transition started after navigation-triggering input can run until its 4 end 5 </title> 6 <link 7 rel="help" 8 href="https://github.com/w3c/csswg-drafts/blob/main/css-view-transitions-2/two-phase-transition-explainer.md" 9 /> 10 <meta name="timeout" content="long" /> 11 <script src="/resources/testharness.js"></script> 12 <script src="/resources/testharnessreport.js"></script> 13 <script src="/service-workers/service-worker/resources/test-helpers.sub.js"></script> 14 <script> 15 promise_test(async (t) => { 16 // We use a service worker to control the timing of the transition, so that committing the navigation 17 // is synchronized with the transition timing. 18 // Specifically, the navigation commit is delayed until the same-document view-transition is ready (starts animating), 19 // but should take place before it is finished. That simulates a view transition that is "interrupted" by a commit by default, 20 // allowing the two-phase view transition feature to carry it through instead. 21 const registration = await service_worker_unregister_and_register(t, "sw.js", "resources"); 22 t.add_cleanup(() => registration.unregister()); 23 const worker = registration.installing; 24 await wait_for_state(t, worker, "activated"); 25 const did_activate_transition = new Promise((resolve) => { 26 window.did_activate_transition = resolve; 27 }); 28 const did_finish_transition = new Promise((resolve) => { 29 window.did_finish_transition = resolve; 30 }); 31 const did_swap = new Promise((resolve) => { 32 window.did_swap = resolve; 33 }); 34 const popup = window.open("resources/instant-transition.https.html"); 35 t.add_cleanup(() => popup.close()); 36 const condition = await did_activate_transition; 37 worker.postMessage({ resume: "" + condition }); 38 const result = await Promise.race([did_finish_transition, did_swap.then(() => "swap")]); 39 assert_equals(result, "success"); 40 const with_transition = await did_swap; 41 assert_equals(with_transition, "with-transition"); 42 }, "view transition should run until its end if started after navigation-triggering input"); 43 </script>