[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / minmax-max-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 .gridMinMaxContent {
10     -webkit-grid-definition-columns: 20px;
11     -webkit-grid-definition-rows: minmax(-webkit-max-content, 50px);
12 }
13
14 .gridMaxMaxContent {
15     -webkit-grid-definition-columns: 20px;
16     -webkit-grid-definition-rows: minmax(30px, -webkit-max-content);
17 }
18
19 .firstRowFirstColumn {
20     font: 10px/1 Ahem;
21     /* Make us fit our grid area. */
22     width: 100%;
23     height: 100%;
24 }
25
26 .verticalRL {
27     -webkit-writing-mode: vertical-rl;
28 }
29 </style>
30 <script src="../../resources/check-layout.js"></script>
31 <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
32
33 <p>Test that resolving minmax function with max-content on grid items works properly.</p>
34
35 <div class="constrainedContainer">
36     <div class="grid gridMinMaxContent">
37         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
38     </div>
39 </div>
40
41 <div class="constrainedContainer">
42     <div class="grid gridMinMaxContent">
43         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
44     </div>
45 </div>
46
47 <div class="constrainedContainer">
48     <div class="grid gridMinMaxContent">
49         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
50         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
51     </div>
52 </div>
53
54 <!-- Allow the extra logical space distribution to occur. -->
55 <div style="width: 10px; height: 100px;">
56     <div class="grid gridMinMaxContent">
57         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
58     </div>
59 </div>
60
61 <div style="width: 10px; height: 100px;">
62     <div class="grid gridMinMaxContent">
63         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
64         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
65     </div>
66 </div>
67
68 <div class="constrainedContainer">
69     <div class="grid gridMaxMaxContent">
70         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
71     </div>
72 </div>
73
74 <div class="constrainedContainer">
75     <div class="grid gridMaxMaxContent">
76         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
77     </div>
78 </div>
79
80 <div class="constrainedContainer">
81     <div class="grid gridMaxMaxContent">
82         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
83     </div>
84 </div>
85
86 <!-- Allow the extra logical space distribution to occur. -->
87
88 <div style="width: 100px; height: 20px">
89     <div class="grid gridMaxMaxContent">
90         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
91     </div>
92 </div>
93
94 <div style="width: 100px; height: 20px">
95     <div class="grid gridMaxMaxContent">
96         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
97         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
98     </div>
99 </div>
100
101 </body>
102 </html>