5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 <link href="resources/grid.css" rel="stylesheet">
10 grid-definition-columns: minmax(10px, max-content) minmax(10px, 1fr);
11 grid-definition-rows: 50px;
15 grid-definition-columns: minmax(10px, 1fr) minmax(min-content, 50px);
16 grid-definition-rows: 50px;
19 .gridWithIntrinsicSizeBiggerThanFlex {
20 grid-definition-columns: minmax(min-content, 0.5fr) minmax(18px, 2fr);
21 grid-definition-rows: 50px;
24 .gridShrinkBelowItemsIntrinsicSize {
25 grid-definition-columns: minmax(0px, 1fr) minmax(0px, 2fr);
26 grid-definition-rows: 50px;
29 .gridWithNonFlexingItems {
30 grid-definition-columns: 40px minmax(min-content, 1fr) auto minmax(20px, 2fr);
31 grid-definition-rows: 50px;
34 .firstRowThirdColumn {
38 .firstRowFourthColumn {
43 <script src="../../resources/check-layout.js"></script>
44 <body onload="checkLayout('.grid');">
46 <p>Test that resolving auto tracks on grid items works properly.</p>
48 <div class="constrainedContainer">
49 <div class="grid gridMaxMaxContent">
50 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XXXXX</div>
51 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
55 <!-- Allow the extra logical space distribution to occur. -->
56 <div style="width: 40px; height: 10px">
57 <div class="grid gridMaxMaxContent">
58 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50">XXXXX</div>
59 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="10" data-expected-height="50"></div>
63 <div style="width: 110px; height: 10px;">
64 <div class="grid gridMaxMaxContent">
65 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50">XXXXX</div>
66 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="60" data-expected-height="50"></div>
71 <div class="constrainedContainer">
72 <div class="grid gridMinMinContent">
73 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
74 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50">XX XX</div>
78 <!-- Allow the extra logical space distribution to occur. -->
79 <div style="width: 40px; height: 10px">
80 <div class="grid gridMinMinContent">
81 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="10" data-expected-height="50">XX XX</div>
82 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="30" data-expected-height="50">XX XX</div>
86 <div style="width: 110px; height: 10px;">
87 <div class="grid gridMinMinContent">
88 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60" data-expected-height="50">XX XX</div>
89 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50">XX XX</div>
94 <div style="width: 220px; height: 10px;">
95 <div class="grid gridWithIntrinsicSizeBiggerThanFlex">
96 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="200" data-expected-height="50">
97 <div style="display: inline-block; width: 200px;"></div>
99 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="20" data-expected-height="50"></div>
104 <div style="width: 120px; height: 10px;">
105 <div class="grid gridShrinkBelowItemsIntrinsicSize">
106 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50">
107 <div style="display: inline-block; width: 200px;"></div>
109 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="80" data-expected-height="50">XXXXXXXXXX</div>
114 <!-- No space available for the <flex> -->
115 <div style="width: 220px; height: 10px;">
116 <div class="grid gridWithNonFlexingItems">
117 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
118 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
119 <div style="display: inline-block; width: 100px;"></div>
121 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="100" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
122 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="20" data-expected-height="50"></div>
126 <!-- The second track should be sized after the min-content as the <flex> value should be too small. -->
127 <div style="width: 380px; height: 10px;">
128 <div class="grid gridWithNonFlexingItems">
129 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
130 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
131 <div style="display: inline-block; width: 100px;"></div>
133 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
134 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="40" data-expected-height="50"></div>
138 <div style="width: 400px; height: 10px;">
139 <div class="grid gridWithNonFlexingItems">
140 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
141 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50">
142 <div style="display: inline-block; width: 100px;"></div>
144 <div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50">XXXXXXXXXX XXXXXXXXX</div>
145 <div class="sizedToGridArea firstRowFourthColumn" data-expected-width="60" data-expected-height="50"></div>