old-content-captures-different-size.html (1918B)
1 <!DOCTYPE html> 2 <meta name="timeout" content="long"> 3 <html class=reftest-wait> 4 <title>View transitions: capture elements with different size capture</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="old-content-captures-different-size-ref.html"> 8 <meta name=fuzzy content="maxDifference=0-50; totalPixels=0-30000"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 .box { 12 color: red; 13 background: lightblue; 14 width: 100px; 15 height: 100px; 16 contain: paint; 17 position: absolute; 18 font-size: 30pt; 19 } 20 #e1 { 21 clip-path: circle(30%); 22 top: 20px; 23 left: 20px; 24 view-transition-name: e1; 25 } 26 #e2 { 27 clip-path: ellipse(70% 30%); 28 top: 160px; 29 left: 20px; 30 view-transition-name: e2; 31 } 32 #e3 { 33 filter: blur(5px); 34 top: 300px; 35 left: 20px; 36 view-transition-name: e3; 37 } 38 39 div.dst { background: lightgreen; } 40 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 41 html::view-transition-group(*) { animation-duration: 300s; } 42 html::view-transition-new(*) { animation: unset; opacity: 0; } 43 html::view-transition-old(*) { animation: unset; opacity: 1; } 44 /* hide the root so we show transition background to ensure we're in a transition */ 45 html::view-transition-group(root) { animation: unset; opacity: 0; } 46 html::view-transition { background: lightpink; } 47 </style> 48 <div id=e1 class=box>one</div> 49 <div id=e2 class=box>two</div> 50 <div id=e3 class=box>three</div> 51 <script> 52 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 53 54 async function runTest() { 55 document.startViewTransition(() => { 56 e1.classList.add("dst"); 57 e2.classList.add("dst"); 58 e3.classList.add("dst"); 59 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 60 }); 61 } 62 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 63 </script>