new-content-captures-opacity.html (1754B)
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="new-content-captures-opacity-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .box { 10 color: red; 11 background: lightblue; 12 width: 100px; 13 height: 100px; 14 contain: paint; 15 position: absolute; 16 font-size: 30pt; 17 will-change: opacity; 18 } 19 #e1 { opacity: 0.75; top: 20px; left: 20px; view-transition-name: e1; } 20 #e2 { opacity: 0.5; top: 160px; left: 20px; view-transition-name: e2; } 21 #e3 { opacity: 0.25; top: 300px; left: 20px; view-transition-name: e3; } 22 div.dst { background: lightgreen; } 23 /* We're verifying what we capture, so just display the new contents for 5 minutes. */ 24 html::view-transition-group(*) { animation-duration: 300s; } 25 html::view-transition-new(*) { animation: unset; opacity: 1; } 26 html::view-transition-old(*) { animation: unset; opacity: 0; } 27 /* hide the root so we show transition background to ensure we're in a transition */ 28 html::view-transition-group(root) { animation: unset; opacity: 0; } 29 html::view-transition { background: lightpink; } 30 </style> 31 <div id=e1 class=box></div> 32 <div id=e2 class=box></div> 33 <div id=e3 class=box></div> 34 <script> 35 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 36 37 async function runTest() { 38 let t = document.startViewTransition(() => { 39 e1.classList.add("dst"); 40 e2.classList.add("dst"); 41 e3.classList.add("dst"); 42 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 43 }); 44 } 45 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 46 </script>