[css-grid] Fix auto repeat tracks computation with definite min sizes
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css / css-grid / grid-definition / grid-inline-auto-repeat-001.html
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="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>