iframe-and-main-frame-transition-old-main-old-iframe.html (1615B)
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-old-iframe-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 /* Keep showing the screenshot for the main frame */ 18 ::view-transition-group(root) { 19 animation-duration: 300s; 20 } 21 ::view-transition-old(root) { 22 animation: unset; 23 opacity: 1; 24 } 25 ::view-transition-new(root) { 26 animation: unset; 27 opacity: 0; 28 } 29 </style> 30 31 <iframe srcdoc=" 32 <style> 33 /* The iframe is showing an old screenshot */ 34 ::view-transition-group(root) { 35 animation-duration: 300s; 36 } 37 ::view-transition-old(root) { 38 animation: unset; 39 opacity: 1; 40 } 41 ::view-transition-new(root) { 42 animation: unset; 43 opacity: 0; 44 } 45 </style> 46 <body></body> 47 "></iframe> 48 <script> 49 onload = runTest; 50 51 async function startTransition(document, oldColor, newColor) { 52 document.documentElement.style.background = oldColor; 53 await document.startViewTransition(() => { 54 document.documentElement.style.background = newColor; 55 }).ready; 56 } 57 58 async function runTest() { 59 const iframeDocument = document.querySelector("iframe").contentDocument; 60 await startTransition(iframeDocument, "blue", "lightblue"); 61 62 await startTransition(document, "green", "lightgreen"); 63 64 takeScreenshot(); 65 } 66 </script>