snapshot-containing-block-includes-scrollbar-gutter.html (1388B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: snapshot containing block includes scrollbar gutters</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-includes-scrollbar-gutter-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-20; totalPixels=0-100"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 :root { 11 scrollbar-gutter: stable both-edges; 12 /* unset so ::view-transition is visible. */ 13 view-transition-name: none; 14 } 15 ::view-transition { 16 background-color: palegreen; 17 } 18 #target { 19 position: absolute; 20 top: 100px; 21 left: 0px; 22 width: 200px; 23 height: 200px; 24 background-color: limegreen; 25 view-transition-name: target; 26 } 27 ::view-transition-group(target) { 28 animation-duration: 300s; 29 } 30 </style> 31 <!-- 32 This box should be a scrollbar's width from the left edge and 33 exactly aligned with the light green background. 34 --> 35 <div id="target"> 36 </div> 37 <script> 38 failIfNot(document.startViewTransition, 39 "Missing document.startViewTransition"); 40 41 async function runTest() { 42 let transition = document.startViewTransition(); 43 await transition.ready; 44 takeScreenshot(); 45 } 46 47 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 48 </script>