0214d86acfa09f1d8e4fa4d2b33009aedd17653e
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / flex-and-minmax-content-resolution-rows.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 <style>
9 .gridMaxMaxContent {
10     -webkit-grid-template-columns: 50px;
11     -webkit-grid-template-rows: minmax(10px, -webkit-max-content) minmax(10px, 1fr);
12 }
13
14 .gridMinMinContent {
15     -webkit-grid-template-columns: 50px;
16     -webkit-grid-template-rows: minmax(10px, 1fr) minmax(-webkit-min-content, 50px);
17 }
18
19 .gridWithIntrinsicSizeBiggerThanFlex {
20     -webkit-grid-template-columns: 50px;
21     -webkit-grid-template-rows: minmax(-webkit-min-content, 0.5fr) minmax(18px, 2fr);
22 }
23
24 .gridShrinkBelowItemsIntrinsicSize {
25     -webkit-grid-template-columns: 50px;
26     -webkit-grid-template-rows: minmax(0px, 1fr) minmax(0px, 2fr);
27 }
28
29 .gridWithNonFlexingItems {
30     -webkit-grid-template-columns: 50px;
31     -webkit-grid-template-rows: 40px minmax(-webkit-min-content, 1fr) auto minmax(20px, 2fr);
32 }
33
34 .thirdRowFirstColumn {
35     -webkit-grid-column: 1;
36     -webkit-grid-row: 3;
37 }
38 .fourthRowFirstColumn {
39     -webkit-grid-column: 1;
40     -webkit-grid-row: 4;
41 }
42 </style>
43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.grid');">
45
46 <p>Test that resolving auto tracks on grid items works properly.</p>
47
48 <div class="constrainedContainer">
49     <div class="grid gridMaxMaxContent">
50         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
51         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
52     </div>
53 </div>
54
55 <!-- Allow the extra logical space distribution to occur. -->
56 <div style="width: 10px; height: 40px">
57     <div class="grid gridMaxMaxContent">
58         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
59         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
60     </div>
61 </div>
62
63 <div style="width: 10px; height: 110px;">
64     <div class="grid gridMaxMaxContent">
65         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX</div>
66         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
67     </div>
68 </div>
69
70
71 <div class="constrainedContainer">
72     <div class="grid gridMinMinContent">
73         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
74         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXX</div>
75     </div>
76 </div>
77
78 <!-- Allow the extra logical space distribution to occur. -->
79 <div style="width: 10px; height: 40px">
80     <div class="grid gridMinMinContent">
81         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10">XXXXX XXXX</div>
82         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXX</div>
83     </div>
84 </div>
85
86 <div style="width: 10px; height: 110px;">
87     <div class="grid gridMinMinContent">
88         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXX</div>
89         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX XXXX</div>
90     </div>
91 </div>
92
93
94 <div style="width: 10px; height: 60px;">
95     <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
96         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
97         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
98     </div>
99 </div>
100
101
102 <div style="width: 10px; height: 60px;">
103     <div class="grid gridShrinkBelowItemsIntrinsicSize">
104         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXX XXXXX XXXXX XXXXX</div>
105         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
106     </div>
107 </div>
108
109
110 <!-- No space available for the <flex> -->
111 <div style="width: 10px; height: 100px;">
112     <div class="grid gridWithNonFlexingItems">
113         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
114         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
115         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
116         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
117     </div>
118 </div>
119
120 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
121 <div style="width: 10px; height: 180px;">
122     <div class="grid gridWithNonFlexingItems">
123         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
124         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
125         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
126         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
127     </div>
128 </div>
129
130 <div style="width: 10px; height: 400px;">
131     <div class="grid gridWithNonFlexingItems">
132         <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
133         <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX XXXXX</div>
134         <div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX XXXXX XXXXX XXXXX XXXXX XXXXX</div>
135         <div class="sizedToGridArea fourthRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
136     </div>
137 </div>
138
139 </body>
140 </html>