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