snapshot-containing-block-static-iframe.html (1464B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: use snapshot containing block for static position in iframe</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/#snapshot-containing-block-concept/"> 5 <link rel="match" href="snapshot-containing-block-static-iframe-ref.html"> 6 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/rendering-utils.js"></script> 9 10 <style> 11 #inner { 12 width: 400px; 13 height: 200px; 14 } 15 </style> 16 <iframe id="inner" srcdoc=" 17 <style> 18 body { 19 height: 200vh; 20 overflow: hidden; 21 } 22 ::view-transition { 23 position: static; 24 display: block; 25 width: 100%; 26 height: 100%; 27 background: limegreen; 28 } 29 ::view-transition-group(*), 30 ::view-transition-image-pair(*), 31 ::view-transition-old(*), 32 ::view-transition-new(*) { 33 animation-play-state: paused; 34 } 35 36 </style> 37 <body></body> 38 "></iframe> 39 <script> 40 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 41 42 async function runTest() { 43 // Start the view transition at a scroll offset so that the snapshot 44 // containing block differs from the initial containing block. 45 inner.contentWindow.scrollTo(0, 100); 46 await waitForAtLeastOneFrame(); 47 48 const contentDocument = inner.contentDocument; 49 let vt = inner.contentDocument.startViewTransition(); 50 await vt.ready; 51 takeScreenshot(); 52 } 53 54 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 55 </script>