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