[CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns}
[WebKit-https.git] / LayoutTests / fast / css-grid-layout / minmax-max-content-resolution-columns.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: minmax(-webkit-max-content, 50px);
11     -webkit-grid-definition-rows: 60px;
12 }
13
14 .gridMaxMaxContent {
15     -webkit-grid-definition-columns: minmax(30px, -webkit-max-content);
16     -webkit-grid-definition-rows: 20px;
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="30" data-expected-height="60">XXX</div>
38     </div>
39 </div>
40
41 <div class="constrainedContainer">
42     <div class="grid gridMinMaxContent">
43         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX</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="100" data-expected-height="60">XXXXXXXXXX</div>
51     </div>
52 </div>
53
54 <!-- Allow the extra logical space distribution to occur. -->
55 <div style="width: 100px; height: 10px;">
56     <div class="grid gridMinMaxContent">
57         <div class="firstRowFirstColumn" data-expected-width="50" data-expected-height="60">XXXXX</div>
58     </div>
59 </div>
60
61 <div style="width: 200px; height: 10px;">
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="100" data-expected-height="60">XXXXXXXXXX</div>
65     </div>
66 </div>
67
68 <div class="constrainedContainer">
69     <div class="grid gridMaxMaxContent">
70         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XX</div>
71     </div>
72 </div>
73
74 <div class="constrainedContainer">
75     <div class="grid gridMaxMaxContent">
76         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX</div>
77     </div>
78 </div>
79
80 <div class="constrainedContainer">
81     <div class="grid gridMaxMaxContent">
82         <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXXXX</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="50" data-expected-height="20">XXXXX</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="30" data-expected-height="20">XX</div>
98     </div>
99 </div>
100
101 </body>
102 </html>