flex-tracks-with-fractional-size.html (1533B)
1 <!DOCTYPE html> 2 <html lang=en class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: Expand flexible tracks with a fractional size</title> 5 <link rel="author" title="Ethan Jimenez" href="mailto:ethavar@microsoft.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-2/#algo-flex-tracks" title="12.7. Expand Flexible Tracks"> 7 <link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1249750"> 8 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 9 <meta name="assert" content="Checks that flexible tracks correctly distribute fractional shares of a grid's available size"> 10 <style> 11 .grid { 12 width: 100px; 13 height: 50px; 14 display: grid; 15 background: red; 16 } 17 .grid > div { 18 background: green; 19 } 20 #cols { 21 grid-template-rows: auto 0px; 22 grid-template-columns: repeat(973, 1fr); 23 } 24 #rows { 25 grid-auto-flow: column; 26 grid-template-columns: auto 0px; 27 grid-template-rows: repeat(973, 1fr); 28 } 29 </style> 30 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 31 <div id="cols" class="grid"> 32 <div style="grid-column: 1 / -1"></div> 33 </div> 34 <div id="rows" class="grid"> 35 <div style="grid-row: 1 / -1"></div> 36 </div> 37 <script> 38 var cols_grid = document.getElementById("cols"); 39 var rows_grid = document.getElementById("rows"); 40 for (var i = 0; i < 973; ++i) { 41 cols_grid.appendChild(document.createElement("div")); 42 rows_grid.appendChild(document.createElement("div")); 43 } 44 document.documentElement.classList.remove('reftest-wait'); 45 </script> 46 </html>