callback-order.tentative.html (1627B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 <!-- TODO update link --> 7 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-2/"> 8 <title>Scoped view transition DOM callback ordering</title> 9 </head> 10 <style> 11 #target { 12 position: relative; 13 background-color: blue; 14 height: 100px; 15 width: 100px; 16 contain: view-transition; 17 view-transition-name: none; 18 } 19 #child { 20 position: relative; 21 } 22 </style> 23 <script src="/resources/testharness.js"></script> 24 <script src="/resources/testharnessreport.js"></script> 25 <script src="/dom/events/scrolling/scroll_support.js"></script> 26 <body> 27 <div id="target"> 28 <div id="child"></div> 29 </div> 30 </body> 31 <script> 32 promise_test(async () => { 33 await waitForNextFrame(); 34 const target = document.getElementById('target'); 35 const updates = []; 36 const vt1 = document.startViewTransition(() => { 37 target.style = 'background-color: rgb(255, 165, 0)'; 38 updates.push('vt1'); 39 }); 40 const vt2 = child.startViewTransition(() => { 41 target.style = 'background-color: rgb(102, 51, 153)'; 42 updates.push('vt2'); 43 }); 44 const vt3 = target.startViewTransition(() => { 45 target.style = 'background-color: rgb(0, 128, 128)'; 46 updates.push('vt3'); 47 }); 48 await Promise.all([vt1.ready, vt2.ready, vt3.ready]); 49 assert_array_equals(updates, ['vt1', 'vt2', 'vt3']); 50 assert_equals(getComputedStyle(target).backgroundColor, 'rgb(0, 128, 128)'); 51 52 }, 'View transition DOM callbacks triggered in creation order.'); 53 </script> 54 </html>