root-to-shared-animation-incoming.html (1179B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <link rel="match" href="root-to-shared-animation-incoming-ref.html"> 6 7 <script src="/common/reftest-wait.js"></script> 8 9 <style> 10 body { 11 background: lightgreen; 12 padding: 0; 13 margin: 0; 14 } 15 #box { 16 width: 100px; 17 height: 120px; 18 background: blue; 19 contain: paint; 20 } 21 22 html::view-transition-group(*) { animation-delay: 300s; } 23 html::view-transition-new(*) { animation: unset; opacity: 1; } 24 html::view-transition-old(*) { animation: unset; opacity: 0; } 25 </style> 26 27 <div id=box></div> 28 29 <script> 30 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 31 32 async function runTest() { 33 document.startViewTransition(() => { 34 document.documentElement.style.viewTransitionName = "none"; 35 box.style.viewTransitionName = "root"; 36 // We should not see the "live" body at all. 37 document.body.style.background = "red"; 38 39 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 40 }); 41 } 42 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 43 </script>