new-and-old-sizes-match-ref.html (1531B)
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 <script src="/common/reftest-wait.js"></script> 7 <style> 8 .box { 9 width: 100px; 10 height: 100px; 11 contain: paint; 12 position: absolute; 13 overflow-clip-margin: 50px; 14 } 15 #target { 16 top: 20px; 17 left: 20px; 18 view-transition-name: target; 19 } 20 .inner_overflow { 21 width: 50px; 22 height: 150px; 23 margin-left: -10px; 24 margin-top: -20px; 25 background: lightgreen; 26 clip-path: inset(1px 1px 1px 1px); 27 } 28 29 /* We're verifying what we capture, so just display the new contents for 5 minutes. */ 30 html::view-transition-group(*) { animation-duration: 300s; } 31 html::view-transition-new(*) { animation: unset; opacity: 0; } 32 html::view-transition-old(*) { animation: unset; opacity: 1; } 33 /* hide the root so we show transition background to ensure we're in a transition */ 34 html::view-transition-group(root) { animation: unset; opacity: 0; } 35 html::view-transition { background: lightpink; } 36 </style> 37 <div id=target class=box><div class=inner_overflow>X</div></div> 38 <script> 39 failIfNot(document.startViewTransition, "Reference missing document.startViewTransition"); 40 41 async function runTest() { 42 document.startViewTransition(() => { 43 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 44 }); 45 } 46 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 47 </script>