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