new-content-captures-root.html (1554B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: capture root 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-root-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <style> 9 .box { 10 background: lightblue; 11 width: 100px; 12 height: 100px; 13 contain: paint; 14 position: absolute; 15 will-change: transform; 16 } 17 #e1 { 18 top: 10px; 19 left: 30px; 20 } 21 #shared { 22 contain: paint; 23 width: 100px; 24 height: 100px; 25 background: red; 26 view-transition-name: shared; 27 } 28 29 div.dst { background: lightgreen; } 30 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 31 html::view-transition { background: pink; } 32 html::view-transition-group(shared) { animation-duration: 300s; } 33 html::view-transition-image-pair(shared) { visibility: hidden } 34 html::view-transition-old(root) { animation-duration: 0s; opacity: 0 } 35 html::view-transition-new(root) { animation-duration: 0s; opacity: 1 } 36 </style> 37 <body style="background: red"> 38 <div id=e1 class=box></div> 39 <div id=shared></div> 40 <script> 41 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 42 43 async function runTest() { 44 let t = document.startViewTransition(() => { 45 e1.classList.add("dst"); 46 document.body.style = ""; 47 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 48 }); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script> 52 53 </body>