new-content-scaling.html (1546B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: display content in a pseudo with proper scaling</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-scaling-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-16; totalPixels=0-400"> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 .shared { 11 view-transition-name: shared; 12 contain: paint; 13 } 14 .src { 15 position: relative; 16 width: 100px; 17 height: 100px; 18 } 19 .inner { 20 position: absolute; 21 inset: 20px; 22 background: green; 23 } 24 .dst { 25 position: relative; 26 width: 500px; 27 height: 500px; 28 border: 5px solid blue; 29 box-sizing: border-box; 30 } 31 32 html::view-transition-group(shared) { 33 animation-delay: 500s; 34 } 35 36 html::view-transition-new(shared) { 37 animation: unset; 38 opacity: 1; 39 } 40 html::view-transition-old(shared) { 41 animation: unset; 42 opacity: 0; 43 } 44 45 html::view-transition-group(root) { animation: unset; opacity: 0; } 46 html::view-transition { background: lightpink; } 47 </style> 48 49 <div id=target class="shared src"><div class=inner></div></div> 50 51 <script> 52 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 53 54 async function runTest() { 55 let t = document.startViewTransition(() => { 56 target.classList.remove("src"); 57 target.classList.add("dst"); 58 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 59 }); 60 } 61 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 62 </script>