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