pagereveal-microtask-sequence.html (1617B)
1 <!DOCTYPE html> 2 <title> 3 View transition promise reactions in incoming page should resolve before 4 the rendering continues (rAF, style/layout etc) 5 </title> 6 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 const params = new URLSearchParams(location.search); 11 12 switch (params.get("mode") || "test") { 13 case "test": 14 promise_test(async t => { 15 const sequence = await new Promise(resolve => { 16 window.test_finished = s => { resolve(s) }; 17 const popup = window.open("?mode=old"); 18 t.add_cleanup(() => popup.close()); 19 }); 20 21 assert_array_equals(sequence, ["pagereveal", "updateCallbackDone", "ready", "rAF", "rAF-microtask", "finished"]); 22 }); 23 break; 24 case "old": 25 onload = () => requestAnimationFrame(() => requestAnimationFrame(() => { 26 location.replace('?mode=new'); 27 })); 28 break; 29 case "new": 30 const sequence = []; 31 requestAnimationFrame(() => { 32 sequence.push("rAF"); 33 Promise.resolve().then(() => { 34 sequence.push("rAF-microtask"); 35 }); 36 }); 37 38 addEventListener('pagereveal', event => { 39 sequence.push("pagereveal"); 40 event.viewTransition.ready.then(() => { 41 sequence.push("ready"); 42 }); 43 event.viewTransition.updateCallbackDone.then(() => { 44 sequence.push("updateCallbackDone"); 45 }); 46 event.viewTransition.finished.then(() => { 47 sequence.push("finished"); 48 window.opener.test_finished(sequence); 49 }); 50 }); 51 } 52 </script> 53 <style> 54 @view-transition { 55 navigation: auto; 56 } 57 </style>