transition-in-empty-iframe.html (1334B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <title>View transitions: Transition from an empty iframe</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:bokan@chromium.org"> 7 <link rel="match" href="transition-in-empty-iframe-ref.html"> 8 <meta name=fuzzy content="maxDifference=0-80; totalPixels=0-1000"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 iframe { 12 position: absolute; 13 left: 25px; 14 top: 25px; 15 width: 50vw; 16 height: 50vh; 17 } 18 /* This div overlaps with the iframe, because the iframe is empty it should 19 * be visible behind the iframe. */ 20 div { 21 background-color: skyblue; 22 width: 100px; 23 height: 100px; 24 } 25 </style> 26 <script> 27 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 28 29 onload = () => { 30 requestAnimationFrame(()=>{requestAnimationFrame(()=> { 31 frames[0].window.startTransition(); 32 frames[0].window.transition.ready.then(() => { 33 requestAnimationFrame(()=>{requestAnimationFrame(()=> { 34 takeScreenshot(); 35 })}); 36 }); 37 })}); 38 } 39 </script> 40 </head> 41 42 <body> 43 <iframe src="support/transition-in-empty-iframe-child.html"> 44 </iframe> 45 <div></div> 46 </body> 47 </html>