new-content-changes-overflow-left.html (1344B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: capture elements and then change overflow</title> 5 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 6 <link rel="author" href="mailto:vmpstr@chromium.org"> 7 <link rel="author" href="mailto:mattwoodrow@apple.com"> 8 <link rel="match" href="new-content-changes-overflow-left-ref.html"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 #target { 12 position: relative; 13 background: green; 14 left: 10px; 15 width: 100px; 16 height: 100px; 17 view-transition-name: target; 18 } 19 #target.toggle { 20 outline: 300px solid transparent; 21 } 22 23 html::view-transition-group(*) { animation-duration: 300s; } 24 html::view-transition-new(*) { animation: unset; opacity: 1; } 25 html::view-transition-old(*) { animation: unset; opacity: 0; } 26 html::view-transition-group(root) { animation: unset; opacity: 0; } 27 html::view-transition { background: pink; } 28 </style> 29 30 <div id=target></div> 31 <script> 32 33 async function runTest() { 34 document.startViewTransition().ready.then(() => { 35 requestAnimationFrame(() => { 36 requestAnimationFrame(() => { 37 target.classList.add("toggle"); 38 requestAnimationFrame(takeScreenshot); 39 }); 40 }); 41 }); 42 } 43 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 44 </script>