old-content-has-scrollbars.html (2221B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: outgoing viewport has scrollbars</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7859"> 7 <link rel="author" href="mailto:bokan@chromium.org"> 8 <link rel="match" href="old-content-has-scrollbars-ref.html"> 9 <meta name=fuzzy content="maxDifference=0-40; totalPixels=0-30000"> 10 <script src="/common/reftest-wait.js"></script> 11 <style> 12 html, body { 13 width: 100%; 14 height: 100%; 15 background-color: lightpink; 16 } 17 body { 18 /* Margin to make sure background color is correctly drawn into the snapshot. */ 19 margin: 50px; 20 } 21 div { 22 /* Draw a checkerboard pattern to make sure the snapshot is captured at the 23 * full size, rather than scaled. */ 24 background-image: 25 linear-gradient(45deg, #000 25%, transparent 25%), 26 linear-gradient(45deg, transparent 75%, #000 75%), 27 linear-gradient(45deg, transparent 75%, #000 75%), 28 linear-gradient(45deg, #000 25%, lightgreen 25%); 29 background-size: 200px 200px; 30 background-position: 0 0, 0 0, -100px -100px, 100px 100px; 31 width: 200%; 32 height: 200%; 33 } 34 35 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 36 html::view-transition-new(root) { animation: unset; opacity: 0; } 37 html::view-transition-old(root) { 38 animation-duration: 300s; 39 animation-timing-function: steps(1, end); 40 opacity: 1; 41 } 42 </style> 43 44 <div></div> 45 <script> 46 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 47 48 // Ensure a root snapshot captured on a page with scrollbars uses the full 49 // viewport size (including scrollbars). Areas obscured by scrollbars should be 50 // filled with background and content; the snapshot should not be scaled-to-fit. 51 async function runTest() { 52 document.startViewTransition(() => { 53 document.querySelector('div').remove(); 54 document.documentElement.style.overflow = "hidden"; 55 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 56 }); 57 } 58 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 59 </script>