large-snapshot-smaller-area.html (1523B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View Transition - Large snapshot with smaller snapshot area</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="match" href="large-snapshot-smaller-area-ref.html"> 6 7 <style> 8 #gridContainer { 9 display: grid; 10 gap: 150px; 11 } 12 13 .gridItem { 14 width: 350px; 15 height: 350px; 16 background-color: blue; 17 } 18 html::view-transition-group(root) { animation-duration: 300s; } 19 </style> 20 21 <body> 22 <!--This should not be blurry.--> 23 <div id="gridContainer"></div> 24 </body> 25 26 <script> 27 function takeScreenshot() { 28 document.documentElement.removeAttribute("class"); 29 } 30 31 async function runTest() { 32 const gridContainer = document.getElementById('gridContainer'); 33 34 gridSize = 20; 35 gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 350px)`; 36 for (let i = 0; i < gridSize * gridSize; i++) { 37 const div = document.createElement('div'); 38 div.classList.add('gridItem'); 39 gridContainer.appendChild(div); 40 } 41 42 requestAnimationFrame(() => { 43 document.startViewTransition(() => { 44 requestAnimationFrame(() => requestAnimationFrame(() => 45 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)) 46 )); 47 }); 48 }); 49 } 50 51 52 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 53 54 </script> 55 56 </html>