target-in-scrolled-container.html (1135B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>View Transitions: Target in scrolled container capture position</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="target-in-scrolled-container-ref.html"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/web-animations/testcommon.js"></script> 9 <style> 10 #scroller { 11 width: 200px; 12 height: 200px; 13 overflow: scroll; 14 background: lightgray; 15 } 16 #target { 17 width: 50px; 18 height: 50px; 19 background: green; 20 margin-top: 100px; 21 view-transition-name: target; 22 } 23 #spacer { 24 height: 200px; 25 } 26 27 html::view-transition-group(*) { animation-play-state: paused; } 28 html::view-transition-old(*) { animation: none; opacity: 1; } 29 html::view-transition-new(*) { animation: none; opacity: 0; } 30 </style> 31 32 <div id="scroller"> 33 <div id="target"></div> 34 <div id="spacer"></div> 35 </div> 36 37 <script> 38 function runTest() { 39 scroller.scrollTop = 50; 40 target.startViewTransition().ready.then(takeScreenshot); 41 } 42 43 waitForCompositorReady().then(runTest); 44 </script> 45 </html>