paint-holding-in-iframe.html (1121B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View transitions: display old paint during update callback</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="match" href="paint-holding-in-iframe-ref.html"> 6 <link rel="author" href="mailto:khushalsagar@chromium.org"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/rendering-utils.js"></script> 9 <style> 10 .old { 11 border: 5px solid black; 12 } 13 .new { 14 border: 5px solid orange; 15 } 16 </style> 17 18 <iframe id="inner" class="old" srcdoc=" 19 <body> 20 This is old content 21 </body> 22 "></iframe> 23 <script> 24 async function runTest() { 25 await waitForAtLeastOneFrame(); 26 27 let contentDocument = inner.contentDocument; 28 contentDocument.body.style.background = "blue"; 29 30 contentDocument.startViewTransition(async () => { 31 contentDocument.body.style.background = "green"; 32 contentDocument.body.innerText = "This is new content"; 33 34 inner.classList.toggle('old'); 35 inner.classList.toggle('new'); 36 37 takeScreenshot(); 38 return new Promise((resolve) => {}); 39 }); 40 } 41 onload = runTest; 42 </script> 43 </html>