scroller-child.html (1328B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: scroller child element</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="scroller-child-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-800"> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 #target { 12 view-transition-name: target; 13 width: 500px; 14 height: 500px; 15 background: yellow; 16 } 17 #scroller { 18 overflow: scroll; 19 width: 100px; 20 height: 100px; 21 background: blue; 22 } 23 24 #child { 25 position: relative; 26 width: 2000px; 27 height: 2000px; 28 background: green; 29 } 30 31 html::view-transition-group(root) { animation-duration: 300s; } 32 html::view-transition-old(target) { 33 animation: unset; 34 opacity: 1; 35 } 36 html::view-transition-new(target) { 37 animation: unset; 38 opacity: 0; 39 } 40 </style> 41 42 <div id="target"> 43 <div id="scroller"> 44 <div id="child"></div> 45 </div> 46 </div> 47 48 <script> 49 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 50 51 function runTest() { 52 scroller.scrollTop = 300; 53 54 let transition = document.startViewTransition(); 55 transition.ready.then(() => requestAnimationFrame(takeScreenshot)); 56 } 57 58 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 59 </script>