new-content-captures-positioned-spans.html (1390B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: capture span 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-positioned-spans-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 span { 10 background: lightblue; 11 view-transition-name: span; 12 position: fixed; 13 top: 50px; 14 left: 50px; 15 } 16 span.dst { background: lightgreen; } 17 /* We're verifying what we capture, so just display the new contents for 5 minutes. */ 18 html::view-transition-group(*) { animation-duration: 300s; } 19 html::view-transition-new(*) { animation: unset; opacity: 1; } 20 html::view-transition-old(*) { animation: unset; opacity: 0; } 21 /* hide the root so we show transition background to ensure we're in a transition */ 22 html::view-transition-group(root) { animation: unset; opacity: 0; } 23 html::view-transition { background: lightpink; } 24 </style> 25 <span id=target>This is a span</span> 26 <script> 27 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 28 29 async function runTest() { 30 let t = document.startViewTransition(() => { 31 target.classList.add("dst"); 32 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 33 }); 34 } 35 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 36 </script>