new-content-root-scrollbar-with-fixed-background.html (1780B)
1 <!DOCTYPE html> 2 <html class=reftest-wait style="background: lightblue;"> 3 <title>When the root element has scrollbars, these should be excluded in new snapshot</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <link rel="match" href="root-scrollbar-with-fixed-background-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-2; totalPixels=0-4500"> 8 9 <script src="/common/rendering-utils.js"></script> 10 <script src="/common/reftest-wait.js"></script> 11 12 <style> 13 #hide { 14 position: absolute; 15 top: 0px; 16 left: 0px; 17 width: 10px; 18 height: 10px; 19 background: red; 20 contain: paint; 21 view-transition-name: hide; 22 } 23 #first { 24 width: 10px; 25 background: linear-gradient(green, blue); 26 height: 1000px; 27 } 28 body { 29 margin: 0px; 30 padding: 0px; 31 } 32 33 /* Set a no-op animation to screenshot the pseudo transition DOM. */ 34 html::view-transition-group(hide) { 35 animation-duration: 300s; 36 opacity: 0; 37 } 38 html::view-transition-new(*) { 39 animation: unset; 40 filter: invert(1); 41 height: 100%; 42 } 43 html::view-transition-old(*) { 44 animation: unset; 45 opacity: 0; 46 height: 100%; 47 } 48 </style> 49 50 <div id=hide></div> 51 <div id=first></div> 52 53 <script> 54 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 55 56 async function runTest() { 57 await waitForAtLeastOneFrame(); 58 59 await new Promise((resolve) => { 60 addEventListener("scroll", () => { 61 requestAnimationFrame(() => requestAnimationFrame(resolve)); 62 }, { once: true, capture: true }); 63 64 document.documentElement.scrollTop = 500; 65 }); 66 document.startViewTransition(() => { 67 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 68 }); 69 } 70 71 onload = () => requestAnimationFrame(runTest); 72 </script> 73 74 </html>