new-and-old-sizes-match.html (1657B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: capture elements with different size capture</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="new-and-old-sizes-match-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-25; totalPixels=0-1500"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .box { 11 width: 100px; 12 height: 100px; 13 contain: paint; 14 position: absolute; 15 overflow-clip-margin: 50px; 16 } 17 #target { 18 top: 20px; 19 left: 20px; 20 view-transition-name: target; 21 } 22 .inner_overflow { 23 width: 50px; 24 height: 150px; 25 margin-left: -10px; 26 margin-top: -20px; 27 background: lightgreen; 28 clip-path: inset(1px 1px 1px 1px); 29 } 30 31 /* We're verifying what we capture, so just display the new contents for 5 minutes. */ 32 html::view-transition-group(*) { animation-duration: 300s; } 33 html::view-transition-new(*) { animation: unset; opacity: 1; } 34 html::view-transition-old(*) { animation: unset; opacity: 0; } 35 /* hide the root so we show transition background to ensure we're in a transition */ 36 html::view-transition-group(root) { animation: unset; opacity: 0; } 37 html::view-transition { background: lightpink; } 38 </style> 39 <div id=target class=box><div class=inner_overflow>X</div></div> 40 <script> 41 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 42 43 async function runTest() { 44 let t = document.startViewTransition(() => { 45 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 46 }); 47 } 48 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 49 </script>