new-content-has-scrollbars.html (2179B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: incoming 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="new-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 html { 18 overflow: hidden; 19 } 20 body { 21 /* Margin to make sure background color is correctly drawn into the snapshot. */ 22 margin: 50px; 23 } 24 div { 25 /* Draw a checkerboard pattern to make sure the snapshot is captured at the 26 * full size, rather than scaled. */ 27 background-image: 28 linear-gradient(45deg, #000 25%, transparent 25%), 29 linear-gradient(45deg, transparent 75%, #000 75%), 30 linear-gradient(45deg, transparent 75%, #000 75%), 31 linear-gradient(45deg, #000 25%, lightgreen 25%); 32 background-size: 200px 200px; 33 background-position: 0 0, 0 0, -100px -100px, 100px 100px; 34 width: 200%; 35 height: 200%; 36 } 37 38 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 39 html::view-transition-new(root) { animation: unset; opacity: 0; } 40 html::view-transition-old(root) { 41 animation-duration: 300s; 42 animation-timing-function: steps(1, end); 43 opacity: 1; 44 } 45 </style> 46 47 <div></div> 48 <script> 49 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 50 51 // Ensure a root snapshot captured in the absence of scrollbars is displayed at 52 // full size when rendered in the incoming viewport which is inset by 53 // scrollbars. The content must not be scaled-to-fit. 54 async function runTest() { 55 document.startViewTransition(() => { 56 document.documentElement.style.overflow = "unset"; 57 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 58 }); 59 } 60 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 61 </script>