old-content-captures-opacity.html (1801B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: capture opacity elements</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="old-content-captures-opacity-ref.html"> 7 <meta name=fuzzy content="maxDifference=0-1; totalPixels=0-50000"> 8 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 { opacity: 0.75; top: 20px; left: 20px; view-transition-name: e1; } 21 #e2 { opacity: 0.5; top: 160px; left: 20px; view-transition-name: e2; } 22 #e3 { opacity: 0.25; top: 300px; left: 20px; view-transition-name: e3; } 23 div.dst { background: lightgreen; } 24 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 25 html::view-transition-group(*) { animation-duration: 300s; } 26 html::view-transition-new(*) { animation: unset; opacity: 0; } 27 html::view-transition-old(*) { animation: unset; opacity: 1; } 28 /* hide the root so we show transition background to ensure we're in a transition */ 29 html::view-transition-group(root) { animation: unset; opacity: 0; } 30 html::view-transition { background: lightpink; } 31 </style> 32 <div id=e1 class=box>one</div> 33 <div id=e2 class=box>two</div> 34 <div id=e3 class=box>three</div> 35 <script> 36 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 37 38 async function runTest() { 39 document.startViewTransition(() => { 40 e1.classList.add("dst"); 41 e2.classList.add("dst"); 42 e3.classList.add("dst"); 43 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 44 }); 45 } 46 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 47 </script>