old-content-captures-root.html (1568B)
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="old-content-captures-root-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 background: lightblue; 12 width: 100px; 13 height: 100px; 14 contain: paint; 15 position: absolute; 16 font-size: 30pt; 17 } 18 #e1 { 19 top: 20px; 20 left: 20px; 21 } 22 #shared { 23 contain: paint; 24 width: 100px; 25 height: 100px; 26 background: red; 27 view-transition-name: shared; 28 } 29 30 div.dst { background: lightgreen; } 31 /* We're verifying what we capture, so just display the old contents for 5 minutes. */ 32 html::view-transition { background: pink; } 33 html::view-transition-group(shared) { animation-duration: 300s; } 34 html::view-transition-image-pair(shared) { visibility: hidden } 35 html::view-transition-old(root) { animation: unset; opacity: 1 } 36 html::view-transition-new(root) { animation: unset; opacity: 0 } 37 </style> 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 document.startViewTransition(() => { 45 e1.classList.add("dst"); 46 document.body.style.background = "red"; 47 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 48 }); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script>