grid-inline-auto-repeat-001.html (2695B)
1 <!DOCTYPE html> 2 <html lang=en> 3 <meta charset="utf-8"> 4 <title>CSS Grid Layout Test: auto repeat tracks in indefinite containers with minimum size</title> 5 <link rel="author" title="Sergio Villar Senin" href="mailto:svillar@igalia.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#repeat-syntax"> 7 <meta name="assert" content="This test checks that we properly compute the number of required auto repeat tracks in indefinite sized containers with minimum sizes."> 8 <link rel="stylesheet" href="/css/support/grid.css"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="support/testing-utils.js"></script> 12 <style> 13 .grid { 14 display: inline-grid; 15 grid: 20px / 20px; 16 min-width: 20px; 17 min-height: 20px; 18 justify-content: start; 19 align-content: start; 20 } 21 </style> 22 <div id="log"></div> 23 24 <div id="autoFillColumns" class="grid"></div> 25 <div id="autoFitColumns" class="grid"></div> 26 27 <div id="autoFillRows" class="grid"></div> 28 <div id="autoFitRows" class="grid"></div> 29 30 <script> 31 // Exact fit 32 TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"], "20px"); 33 TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px"); 34 TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 10px)", "20px", ["repeat(2, 10px)", "10px 10px"]); 35 TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 10px)", "20px", ["repeat(2, 0px)", "0px 0px"]); 36 37 // Require an extra track 38 TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"], "20px"); 39 TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 9px)", "20px", ["repeat(2, 0px)", "0px 0px"], "20px"); 40 TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 9px)", "20px", ["repeat(3, 9px)", "9px 9px 9px"]); 41 TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 9px)", "20px", ["repeat(3, 0px)", "0px 0px 0px"]); 42 43 // A single repetition is enough to fill in all the available space 44 TestingUtils.testGridTemplateColumnsRows("autoFillColumns", "repeat(auto-fill, 30px)", "20px", "30px", "20px"); 45 TestingUtils.testGridTemplateColumnsRows("autoFitColumns", "repeat(auto-fit, 30px)", "20px", "0px", "20px"); 46 TestingUtils.testGridTemplateColumnsRows("autoFillRows", "20px", "repeat(auto-fill, 30px)", "20px", "30px"); 47 TestingUtils.testGridTemplateColumnsRows("autoFitRows", "20px", "repeat(auto-fit, 30px)", "20px", "0px"); 48 </script>