iframe-and-main-frame-transition-old-main.html (1605B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: iframe and main frame transition at the same time</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="iframe-and-main-frame-transition-old-main-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 iframe { 10 position: fixed; 11 top: 0; 12 left: 0; 13 width: 50vw; 14 height: 50vh; 15 } 16 17 /* The main frame is showing the old screenshot */ 18 ::view-transition-group(root) { 19 animation-duration: 300s; 20 } 21 ::view-transition-new(root) { 22 animation: unset; 23 opacity: 0; 24 } 25 ::view-transition-old(root) { 26 animation: unset; 27 opacity: 1; 28 } 29 </style> 30 31 <iframe srcdoc=" 32 <style> 33 body { 34 background: orange; 35 } 36 </style> 37 <body></body>"></iframe> 38 <script> 39 onload = runTest; 40 41 async function startTransition(document, oldColor, newColor) { 42 document.documentElement.style.background = oldColor; 43 await document.startViewTransition(() => { 44 document.documentElement.style.background = newColor; 45 }).ready; 46 } 47 48 async function runTest() { 49 await startTransition(document, "green", "lightgreen"); 50 51 // Start an iframe transition while the main frame transition is showing the 52 // old screenshot. This change shouldn't show up visually because the old 53 // screenshot on the main frame still has the iframe's old content. 54 const iframeDocument = document.querySelector("iframe").contentDocument; 55 await startTransition(iframeDocument, "blue", "lightblue"); 56 57 takeScreenshot(); 58 } 59 </script>