[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / grid-element-min-max-width.html
1 <!DOCTYPE html>
2 <html>
3 <script>
4 if (window.testRunner)
5     testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
6 </script>
7 <link href="resources/grid.css" rel="stylesheet">
8 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel=stylesheet>
9 <style>
10 .minWidthGrid {
11     min-width: 100px;
12     -webkit-grid-definition-columns: 50px;
13     -webkit-grid-definition-rows: 40px;
14 }
15 .maxWidthGrid {
16     max-width: 100px;
17     -webkit-grid-definition-columns: 150px 50px;
18     -webkit-grid-definition-rows: 40px;
19 }
20
21 .minWidthAutoGrid {
22     min-width: 100px;
23 }
24
25 .maxWidthAutoGrid {
26     max-width: 100px;
27 }
28 </style>
29 <script src="../../resources/check-layout.js"></script>
30 <body onload="checkLayout('.grid')">
31
32 <p>Test that min-width and max-width are accounted for when computing the grid element's preferred widths.</p>
33
34 <div class="constrainedContainer">
35     <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
36     <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="100">
37         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
38     </div>
39     <!-- These 2 grids are sized after their containing block as width is 'auto'. We end up having the content overflow which is weird but the grid shouldn't shrink to fit by default. -->
40     <div class="grid maxWidthGrid" data-expected-height="40" data-expected-width="10"></div>
41     <div class="grid maxWidthAutoGrid" data-expected-height="10" data-expected-width="10">
42         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXXXXXXXXXX</div>
43     </div>
44
45     <div class="grid fit-content minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
46     <div class="grid fit-content maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
47
48     <div class="grid max-content minWidthAutoGrid" data-expected-height="10" data-expected-width="110">
49         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXX XXX XXX</div>
50     </div>
51     <div class="grid min-content minWidthAutoGrid" data-expected-height="20" data-expected-width="100">
52         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXX XXX XXX</div>
53     </div>
54
55     <div class="grid max-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
56         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
57     </div>
58     <div class="grid min-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="60">
59         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="60">XXXXX XXXXXX</div>
60     </div>
61 </div>
62
63 <div class="unconstrainedContainer">
64     <div class="grid minWidthGrid" data-expected-height="40" data-expected-width="1000"></div>
65     <div class="grid minWidthAutoGrid" data-expected-height="10" data-expected-width="1000">
66         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="70">XXX XXX</div>
67     </div>
68     <div class="grid maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
69     <div class="grid maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
70         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
71     </div>
72     <div class="grid fit-content minWidthGrid" data-expected-height="40" data-expected-width="100"></div>
73     <div class="grid fit-content maxWidthGrid" data-expected-height="40" data-expected-width="100"></div>
74
75     <div class="grid max-content minWidthAutoGrid" data-expected-height="10" data-expected-width="110">
76         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="10" data-expected-width="110">XXX XXX XXX</div>
77     </div>
78     <div class="grid min-content minWidthAutoGrid" data-expected-height="20" data-expected-width="100">
79         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXX XXX XXX</div>
80     </div>
81
82     <div class="grid max-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="100">
83         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="100">XXXXX XXXXXX</div>
84     </div>
85     <div class="grid min-content maxWidthAutoGrid" data-expected-height="20" data-expected-width="60">
86         <div class="sizedToGridArea firstRowFirstColumn" data-expected-height="20" data-expected-width="60">XXXXX XXXXXX</div>
87     </div>
88 </div>
89
90 </body>
91 </html>