grid-template-rows-001.html (959B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Grid: Test grid-template-rows interpolation</title> 5 <link rel="help" href="https://drafts.csswg.org/css-grid/#track-sizing"> 6 <link rel="match" href="grid-template-rows-001-ref.html"> 7 <meta name="assert" content="The grid-template-rows property should have 8 correct interpolation result."> 9 <style> 10 @keyframes anim { 11 from { 12 grid-template-rows: 20px 1fr; 13 } 14 to { 15 grid-template-rows: 100px 1fr; 16 } 17 } 18 .grid { 19 display: grid; 20 width: 400px; 21 height: 400px; 22 grid-gap: 10px; 23 animation: anim 10s -5s paused linear; 24 } 25 span { border: 1px solid; } 26 </style> 27 </head> 28 <body> 29 <div class="grid"> 30 <span>row1</span> 31 <span>row2</span> 32 </div> 33 </body> 34 <script> 35 requestAnimationFrame(() => { 36 document.documentElement.classList.remove('reftest-wait'); 37 }); 38 </script> 39 </html>