snapshot-containing-block-static.html (1713B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: use snapshot containing block for static position</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <link rel="match" href="snapshot-containing-block-static-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100"> 8 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 :root { 12 view-transition-name: none; 13 background-color: limegreen; 14 box-shadow: 0 0 0 10px inset red; 15 } 16 17 body { 18 height: 400vh; 19 } 20 21 div { 22 position: absolute; 23 left: 200px; 24 top: 600px; 25 width: 100px; 26 height: 100px; 27 28 display: flex; 29 justify-content: center; 30 flex-direction: column; 31 align-items: center; 32 33 background: darkseagreen; 34 view-transition-name: target; 35 } 36 37 ::view-transition-group(target), 38 ::view-transition-image-pair(target), 39 ::view-transition-old(target), 40 ::view-transition-new(target) { 41 animation-play-state: paused; 42 } 43 44 ::view-transition { 45 position: static; 46 display: block; 47 height: 100%; 48 width: 100%; 49 background-color: limegreen; 50 } 51 52 </style> 53 54 <div id="target">TARGET</div> 55 56 <script> 57 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 58 59 async function runTest() { 60 // Start the view transition at a scroll offset so that the snapshot 61 // containing block differs from the initial containing block. 62 const scrollTargetY = document.getElementById('target').offsetTop - 100; 63 window.scrollTo(0, scrollTargetY); 64 let transition = document.startViewTransition(); 65 await transition.ready; 66 takeScreenshot(); 67 } 68 69 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 70 </script>