implicit-contain.html (1184B)
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="implicit-contain-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 body { margin: 50px; } 11 .ib { display: inline-block; } 12 #scope { 13 view-transition-name: foo; 14 background: blue; 15 width: 100px; 16 height: 100px; 17 } 18 #scope::view-transition { background: red; } 19 #scope::view-transition-group(foo) { animation-play-state: paused; } 20 #scope::view-transition-new(foo) { animation: unset; opacity: 1; } 21 #scope::view-transition-old(foo) { animation: unset; opacity: 0; } 22 23 </style> 24 </head> 25 <body> 26 <div style="height: 25px"></div> 27 <div class=ib style="width: 25px"></div><div class=ib id=scope></div> 28 <script> 29 30 const scope = document.querySelector("#scope"); 31 failIfNot(scope.startViewTransition, "Missing element.startViewTransition"); 32 33 async function runTest() { 34 await waitForCompositorReady(); 35 scope.startViewTransition(() => { 36 scope.style.background = "green"; 37 requestAnimationFrame(takeScreenshot); 38 }); 39 } 40 onload = () => runTest(); 41 42 </script> 43 </body> 44 </html>