new-content-captures-spans.html (1497B)
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-spans-ref.html"> 7 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 8 <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-400"> 9 <script src="/common/reftest-wait.js"></script> 10 <style> 11 :root { 12 font: 20px/1 Ahem; 13 } 14 15 span { 16 background: lightblue; 17 view-transition-name: span; 18 } 19 span.dst { background: lightgreen; } 20 /* We're verifying what we capture, so just display the new contents for 5 minutes. */ 21 html::view-transition-group(*) { animation-duration: 300s; } 22 html::view-transition-new(*) { animation: unset; opacity: 1; } 23 html::view-transition-old(*) { animation: unset; opacity: 0; } 24 /* hide the root so we show transition background to ensure we're in a transition */ 25 html::view-transition-group(root) { animation: unset; opacity: 0; } 26 html::view-transition { background: lightpink; } 27 </style> 28 <span id=target>This is a span</span> 29 <script> 30 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 31 32 async function runTest() { 33 let t = document.startViewTransition(() => { 34 target.classList.add("dst"); 35 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 36 }); 37 } 38 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 39 </script>