nested-scope.html (1811B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="nested-scope-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 .box { position: relative; contain: strict; } 11 #scopeA { background: #ddd; view-transition-name: none; 12 left: 0; top: 0; width: 300px; height: 300px; } 13 #partA { background: #4af; 14 left: 30px; top: 30px; width: 240px; height: 240px; } 15 #scopeB { background: #eee; contain: view-transition; 16 left: 30px; top: 30px; width: 180px; height: 180px; } 17 #partB { background: cyan; 18 left: 30px; top: 30px; width: 120px; height: 120px; } 19 20 ::view-transition-old(*) { animation: -ua-view-transition-fade-out 1s paused; } 21 ::view-transition-new(*) { animation: -ua-view-transition-fade-in 1s paused; } 22 .tr { view-transition-name: demo; } 23 24 </style> 25 </head> 26 <body> 27 <div id=scopeA class=box> 28 <div id=partA class="box tr"> 29 <div id=scopeB class=box> 30 <div id=partB class="box tr"> 31 </div> 32 </div> 33 </div> 34 </div> 35 <script> 36 37 failIfNot(scopeA.startViewTransition, "Missing element.startViewTransition"); 38 39 // This test runs simultaneous transitions on two scopes, one inside the other. 40 // It verifies that the inner and outer participants are both visible while both 41 // transitions are in progress. (This entails rendering the inner transition 42 // through the ::view-transition-new for the outer participant.) 43 async function runTest() { 44 await waitForCompositorReady(); 45 await scopeB.startViewTransition().ready; 46 await scopeA.startViewTransition(() => { 47 scopeA.style.background = "#ccc"; 48 }).ready; 49 requestAnimationFrame(takeScreenshot); 50 } 51 onload = () => runTest(); 52 53 </script> 54 </body> 55 </html>