large-snapshot-smaller-area-ref.html (1145B)
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 6 <style> 7 #gridContainer { 8 display: grid; 9 gap: 150px; 10 } 11 12 .gridItem { 13 width: 350px; 14 height: 350px; 15 background-color: blue; 16 } 17 </style> 18 19 <body> 20 <!--This should not be blurry.--> 21 <div id="gridContainer"></div> 22 </body> 23 24 <script> 25 function takeScreenshot() { 26 document.documentElement.removeAttribute("class"); 27 } 28 async function runTest() { 29 const gridContainer = document.getElementById('gridContainer'); 30 31 gridSize = 20; 32 gridContainer.style.gridTemplateColumns = `repeat(${gridSize}, 350px)`; 33 for (let i = 0; i < gridSize * gridSize; i++) { 34 const div = document.createElement('div'); 35 div.classList.add('gridItem'); 36 gridContainer.appendChild(div); 37 } 38 39 requestAnimationFrame(() => requestAnimationFrame(takeScreenshot)); 40 } 41 42 onload = () => requestAnimationFrame(runTest); 43 44 </script> 45 46 </html>