new-content-changes-overflow.html (1459B)
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="match" href="new-content-changes-overflow-ref.html"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #target { 11 position: relative; 12 background: green; 13 width: 100px; 14 height: 100px; 15 view-transition-name: target; 16 } 17 #child { 18 background: blue; 19 position: relative; 20 top: 20px; 21 left: 30px; 22 width: 50px; 23 height: 100px; 24 } 25 #child.large { 26 height: 200px; 27 } 28 29 html::view-transition-group(*) { animation-duration: 300s; } 30 html::view-transition-new(*) { animation: unset; opacity: 1; } 31 html::view-transition-old(*) { animation: unset; opacity: 0; } 32 html::view-transition-group(root) { animation: unset; opacity: 0; } 33 html::view-transition { background: pink; } 34 </style> 35 36 <div id=target><div id=child></div></div> 37 <script> 38 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 39 40 async function runTest() { 41 document.startViewTransition().ready.then(() => { 42 requestAnimationFrame(() => { 43 requestAnimationFrame(() => { 44 child.classList.add("large"); 45 requestAnimationFrame(takeScreenshot); 46 }); 47 }); 48 }); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script>