scroller-with-child.html (1293B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <head> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/"> 5 <link rel="match" href="scroller-with-child-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <script src="/web-animations/testcommon.js"></script> 8 <style> 9 10 body { margin: 20px; font: 18pt monospace; line-height: 30px; } 11 #scope { overflow: auto; contain: layout; padding: 20px; 12 width: 200px; height: 100px; border: 20px solid #acf; } 13 #part { view-transition-name: foo; 14 background: #fea; padding: 10px; border: 4px solid orange; 15 width: 150px; height: 180px; margin: 20px 0 0 90px; } 16 #scope::view-transition-group(*) { animation-play-state: paused; } 17 #scope::view-transition-new(*) { animation: unset; opacity: 1; } 18 #scope::view-transition-old(*) { animation: unset; opacity: 0; } 19 20 </style> 21 </head> 22 <body> 23 <div id=scope>Hello 24 <div id=part>child</div> 25 </div> 26 <script> 27 28 failIfNot(scope.startViewTransition, "Missing element.startViewTransition"); 29 30 async function runTest() { 31 scope.scrollBy(40, 24); 32 await waitForCompositorReady(); 33 const t = scope.startViewTransition(() => { 34 scope.firstChild.nodeValue = "World"; 35 part.style.background = "#fac"; 36 }); 37 await t.ready; 38 takeScreenshot(); 39 } 40 onload = () => runTest(); 41 42 </script> 43 </body> 44 </html>