Chromium Code Reviews

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html

Issue 1317643005: [css-grid] Fix track sizing algo w/ size restrictions and intrinsic sizes (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Simplified code Created 5 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html ('k') | LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html » ('j') | LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="resources/grid.css" rel=stylesheet> 4 <link href="resources/grid.css" rel=stylesheet>
5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet> 5 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel =stylesheet>
6 <style> 6 <style>
7 7
8 .grid { 8 .grid {
9 font: 10px/1 Ahem; 9 font: 10px/1 Ahem;
10 } 10 }
(...skipping 25 matching lines...)
36 36
37 .gridFixedFraction { 37 .gridFixedFraction {
38 grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px); 38 grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
39 grid-template-rows: 10px; 39 grid-template-rows: 10px;
40 } 40 }
41 41
42 .margins { 42 .margins {
43 margin: 10px 20px 30px 40px; 43 margin: 10px 20px 30px 40px;
44 } 44 }
45 45
46 .dummyContainer { }
47
48 .minWidth70 { 46 .minWidth70 {
49 min-width: 70px; 47 min-width: 70px;
50 } 48 }
51 49
52 .maxWidth20 { 50 .maxWidth20 {
53 max-width: 20px; 51 max-width: 20px;
54 } 52 }
55 53
56 </style> 54 </style>
57 </head> 55 </head>
58 <script src="../../resources/check-layout.js"></script> 56 <script src="../../resources/check-layout.js"></script>
59 <body onload="checkLayout('.dummyContainer')"> 57 <body onload="checkLayout('.grid')">
60 <body> 58 <body>
61 <p>This test checks that the grid element's preferred logical widths are properl y computed with different combinations of minmax().</p> 59 <p>This test checks that the grid element's preferred logical widths are properl y computed with different combinations of minmax().</p>
62 <div class="dummyContainer"> 60 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data -expected-width="40">
63 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="40"> 61 <div class="firstRowFirstColumn">XX XX XX</div>
64 <div class="firstRowFirstColumn">XX XX XX</div> 62 <div class="firstRowSecondColumn">XX XX XX</div>
65 <div class="firstRowSecondColumn">XX XX XX</div>
66 </div>
67 </div> 63 </div>
68 64
69 <div class="dummyContainer"> 65 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data -expected-width="80">
70 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="80"> 66 <div class="firstRowFirstColumn">XX XX XX</div>
71 <div class="firstRowFirstColumn">XX XX XX</div> 67 <div class="firstRowSecondColumn">XX XX XX</div>
72 <div class="firstRowSecondColumn">XX XX XX</div>
73 </div>
74 </div> 68 </div>
75 69
76 <div class="dummyContainer"> 70 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data -expected-width="60">
77 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60"> 71 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
78 <div class="firstRowFirstColumn">XXXXX XXXXX</div> 72 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
79 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
80 </div>
81 </div> 73 </div>
82 74
83 <div class="dummyContainer"> 75 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data -expected-width="100">
84 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="100"> 76 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
85 <div class="firstRowFirstColumn">XXXXX XXXXX</div> 77 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
86 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
87 </div>
88 </div> 78 </div>
89 79
90 <div class="dummyContainer"> 80 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data -expected-width="80">
91 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80"> 81 <div class="firstRowFirstColumn">XX XX XX</div>
92 <div class="firstRowFirstColumn">XX XX XX</div> 82 <div class="firstRowSecondColumn">XX XX XX</div>
93 <div class="firstRowSecondColumn">XX XX XX</div>
94 </div>
95 </div> 83 </div>
96 84
97 <div class="dummyContainer"> 85 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data -expected-width="160">
98 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="160"> 86 <div class="firstRowFirstColumn">XX XX XX</div>
99 <div class="firstRowFirstColumn">XX XX XX</div> 87 <div class="firstRowSecondColumn">XX XX XX</div>
100 <div class="firstRowSecondColumn">XX XX XX</div>
101 </div>
102 </div> 88 </div>
103 89
104 <div class="dummyContainer"> 90 <div class="grid gridFixedFixed min-content" data-expected-height="10" data-expe cted-width="60"></div>
105 <div class="grid gridFixedFixed min-content" data-expected-height="10" data- expected-width="60"></div>
106 </div> 91 </div>
107 92
108 <div class="dummyContainer"> 93 <div class="grid gridFixedFixed max-content" data-expected-height="10" data-expe cted-width="80"></div>
109 <div class="grid gridFixedFixed max-content" data-expected-height="10" data- expected-width="80"></div>
110 </div> 94 </div>
111 95
112 <div class="dummyContainer"> 96 <div class="grid gridAutoContent min-content" data-expected-height="10" data-exp ected-width="40">
113 <div class="grid gridAutoContent min-content" data-expected-height="10" data -expected-width="40"> 97 <div class="firstRowFirstColumn">XX XX XX</div>
114 <div class="firstRowFirstColumn">XX XX XX</div> 98 <div class="firstRowSecondColumn">XX XX XX</div>
115 <div class="firstRowSecondColumn">XX XX XX</div>
116 </div>
117 </div> 99 </div>
118 100
119 <div class="dummyContainer"> 101 <div class="grid gridAutoContent max-content" data-expected-height="10" data-exp ected-width="160">
120 <div class="grid gridAutoContent max-content" data-expected-height="10" data -expected-width="160"> 102 <div class="firstRowFirstColumn">XX XX XX</div>
121 <div class="firstRowFirstColumn">XX XX XX</div> 103 <div class="firstRowSecondColumn">XX XX XX</div>
122 <div class="firstRowSecondColumn">XX XX XX</div>
123 </div>
124 </div> 104 </div>
125 105
126 <div class="dummyContainer"> 106 <div class="grid gridFixedFraction min-content" data-expected-height="10" data-e xpected-width="10"></div>
127 <div class="grid gridFixedFraction min-content" data-expected-height="10" da ta-expected-width="10"></div>
128 </div> 107 </div>
129 108
130 <div class="dummyContainer"> 109 <div class="grid gridFixedFraction max-content" data-expected-height="10" data-e xpected-width="30"></div>
131 <div class="grid gridFixedFraction max-content" data-expected-height="10" da ta-expected-width="30"></div>
132 </div>
133 <!-- Now with margin on one of the grid items. -->
134 <div class="dummyContainer">
135 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="100">
136 <div class="firstRowFirstColumn">XX XX XX</div>
137 <div class="firstRowSecondColumn margins">XX XX XX</div>
138 </div>
139 </div> 110 </div>
140 111
141 <div class="dummyContainer"> 112 <!-- Now with margin on one of the grid items. -->
142 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data-expected-width="120"> 113 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data -expected-width="100">
143 <div class="firstRowFirstColumn margins">XX XX XX</div> 114 <div class="firstRowFirstColumn">XX XX XX</div>
144 <div class="firstRowSecondColumn">XX XX XX</div> 115 <div class="firstRowSecondColumn margins">XX XX XX</div>
145 </div>
146 </div> 116 </div>
147 117
148 <div class="dummyContainer"> 118 <div class="grid gridMinContentFixed max-content" data-expected-height="10" data -expected-width="120">
149 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data-expected-width="60"> 119 <div class="firstRowFirstColumn margins">XX XX XX</div>
150 <div class="firstRowFirstColumn">XXXXX XXXXX</div> 120 <div class="firstRowSecondColumn">XX XX XX</div>
151 <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
152 </div>
153 </div> 121 </div>
154 122
155 <div class="dummyContainer"> 123 <div class="grid gridFixedMinContent min-content" data-expected-height="10" data -expected-width="60">
156 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="160"> 124 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
157 <div class="firstRowFirstColumn margins">XXXXX XXXXX</div> 125 <div class="firstRowSecondColumn margins">XXXXX XXXXX</div>
158 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
159 </div>
160 </div> 126 </div>
161 127
162 <div class="dummyContainer"> 128 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data -expected-width="160">
163 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data-expected-width="80"> 129 <div class="firstRowFirstColumn margins">XXXXX XXXXX</div>
164 <div class="firstRowFirstColumn">XX XX XX</div> 130 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
165 <div class="firstRowSecondColumn margins">XX XX XX</div>
166 </div>
167 </div> 131 </div>
168 132
169 <div class="dummyContainer"> 133 <div class="grid gridFixedMaxContent min-content" data-expected-height="10" data -expected-width="80">
170 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="220"> 134 <div class="firstRowFirstColumn">XX XX XX</div>
171 <div class="firstRowFirstColumn margins">XX XX XX</div> 135 <div class="firstRowSecondColumn margins">XX XX XX</div>
172 <div class="firstRowSecondColumn">XX XX XX</div> 136 </div>
173 </div> 137
138 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data -expected-width="220">
139 <div class="firstRowFirstColumn margins">XX XX XX</div>
140 <div class="firstRowSecondColumn">XX XX XX</div>
174 </div> 141 </div>
175 142
176 <!-- Spanning cells --> 143 <!-- Spanning cells -->
177 <div class="dummyContainer"> 144 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data -expected-width="20">
178 <div class="grid gridMinContentFixed min-content" data-expected-height="10" data-expected-width="20"> 145 <div class="firstRowBothColumn">XX XX XX</div>
179 <div class="firstRowBothColumn">XX XX XX</div>
180 </div>
181 </div> 146 </div>
182 147
183 <div class="dummyContainer"> 148 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data -expected-width="80">
184 <div class="grid gridFixedMinContent max-content" data-expected-height="10" data-expected-width="80"> 149 <div class="firstRowBothColumn">XXXXX XXXXX</div>
185 <div class="firstRowBothColumn">XXXXX XXXXX</div> 150 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
186 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
187 </div>
188 </div> 151 </div>
189 152
190 <div class="dummyContainer"> 153 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data -expected-width="80">
191 <div class="grid gridFixedMaxContent max-content" data-expected-height="10" data-expected-width="80"> 154 <div class="firstRowBothColumn">XX XX XX</div>
192 <div class="firstRowBothColumn">XX XX XX</div> 155 <div class="firstRowBothColumn">XX XX XX</div>
193 <div class="firstRowBothColumn">XX XX XX</div>
194 </div>
195 </div> 156 </div>
196 157
197 <div class="dummyContainer"> 158 <div class="grid gridAutoContent min-content" data-expected-height="10" data-exp ected-width="20">
198 <div class="grid gridAutoContent min-content" data-expected-height="10" data -expected-width="20"> 159 <div class="firstRowFirstColumn">XX XX XX</div>
199 <div class="firstRowFirstColumn">XX XX XX</div> 160 <div class="firstRowBothColumn">XX XX XX</div>
200 <div class="firstRowBothColumn">XX XX XX</div>
201 </div>
202 </div> 161 </div>
203 162
204 <div class="dummyContainer"> 163 <div class="grid gridAutoContent max-content" data-expected-height="10" data-exp ected-width="80">
205 <div class="grid gridAutoContent max-content" data-expected-height="10" data -expected-width="80"> 164 <div class="firstRowBothColumn">XX XX XX</div>
206 <div class="firstRowBothColumn">XX XX XX</div> 165 <div class="firstRowSecondColumn">XX XX XX</div>
207 <div class="firstRowSecondColumn">XX XX XX</div>
208 </div>
209 </div> 166 </div>
210 167
211 <!-- Grids under min-width / max-width constraints --> 168 <!-- Grids under min-width / max-width constraints -->
212 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="70"> 169 <div class="min-content grid gridMinContentFixed minWidth70" data-expected-heigh t="10" data-expected-width="70">
213 <div class="grid gridMinContentFixed minWidth70" data-expected-height="10" d ata-expected-width="70"> 170 <div class="firstRowFirstColumn">XX XX XX</div>
214 <div class="firstRowFirstColumn">XX XX XX</div> 171 <div class="firstRowSecondColumn">XX XX XX</div>
215 <div class="firstRowSecondColumn">XX XX XX</div>
216 </div>
217 </div> 172 </div>
218 173
219 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20"> 174 <div class="max-content grid gridMinContentFixed maxWidth20" data-expected-heigh t="10" data-expected-width="20">
220 <div class="grid gridMinContentFixed maxWidth20" data-expected-height="10" d ata-expected-width="20"> 175 <div class="firstRowFirstColumn">XX XX XX</div>
221 <div class="firstRowFirstColumn">XX XX XX</div> 176 <div class="firstRowSecondColumn">XX XX XX</div>
222 <div class="firstRowSecondColumn">XX XX XX</div>
223 </div>
224 </div> 177 </div>
225 178
226 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="70"> 179 <div class="min-content grid gridFixedMinContent minWidth70" data-expected-heigh t="10" data-expected-width="70">
227 <div class="grid gridFixedMinContent minWidth70" data-expected-height="10" d ata-expected-width="70"> 180 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
228 <div class="firstRowFirstColumn">XXXXX XXXXX</div> 181 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
229 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
230 </div>
231 </div> 182 </div>
232 183
233 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20"> 184 <div class="max-content grid gridFixedMinContent maxWidth20" data-expected-heigh t="10" data-expected-width="20">
234 <div class="grid gridFixedMinContent maxWidth20" data-expected-height="10" d ata-expected-width="20"> 185 <div class="firstRowFirstColumn">XXXXX XXXXX</div>
235 <div class="firstRowFirstColumn">XXXXX XXXXX</div> 186 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
236 <div class="firstRowSecondColumn">XXXXX XXXXX</div>
237 </div>
238 </div> 187 </div>
239 188
240 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="80"> 189 <div class="max-content grid gridFixedMaxContent minWidth70" data-expected-heigh t="10" data-expected-width="160">
241 <div class="grid gridFixedMaxContent minWidth70" data-expected-height="10" d ata-expected-width="80"> 190 <div class="firstRowFirstColumn">XX XX XX</div>
242 <div class="firstRowFirstColumn">XX XX XX</div> 191 <div class="firstRowSecondColumn">XX XX XX</div>
243 <div class="firstRowSecondColumn">XX XX XX</div> 192 </div>
244 </div>
245 </div> 193 </div>
246 194
247 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20"> 195 <div class="max-content grid gridFixedMaxContent maxWidth20" data-expected-heigh t="10" data-expected-width="20">
248 <div class="grid gridFixedMaxContent maxWidth20" data-expected-height="10" d ata-expected-width="20"> 196 <div class="firstRowFirstColumn">XX XX XX</div>
249 <div class="firstRowFirstColumn">XX XX XX</div> 197 <div class="firstRowSecondColumn">XX XX XX</div>
250 <div class="firstRowSecondColumn">XX XX XX</div>
251 </div>
252 </div> 198 </div>
253 199
254 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="70"> 200 <div class="min-content grid gridFixedFixed minWidth70" data-expected-height="10 " data-expected-width="70"></div>
255 <div class="grid gridFixedFixed minWidth70" data-expected-height="10" data-e xpected-width="70"></div> 201
202 <div class="min-content grid gridFixedFixed maxWidth20" data-expected-height="10 " data-expected-width="20"></div>
203
204 <div class="min-content grid gridAutoContent minWidth70" data-expected-height="1 0" data-expected-width="70">
205 <div class="firstRowFirstColumn">XX XX XX</div>
206 <div class="firstRowSecondColumn">XX XX XX</div>
256 </div> 207 </div>
257 208
258 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20"> 209 <div class="min-content grid gridAutoContent maxWidth20" data-expected-height="1 0" data-expected-width="20">
259 <div class="grid gridFixedFixed maxWidth20" data-expected-height="10" data-e xpected-width="20"></div> 210 <div class="firstRowFirstColumn">XX XX XX</div>
211 <div class="firstRowSecondColumn">XX XX XX</div>
260 </div> 212 </div>
261 213
262 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="70"> 214 <div class="min-content grid gridFixedFraction minWidth70" data-expected-height= "10" data-expected-width="70"></div>
263 <div class="grid gridAutoContent minWidth70" data-expected-height="10" data- expected-width="70">
264 <div class="firstRowFirstColumn">XX XX XX</div>
265 <div class="firstRowSecondColumn">XX XX XX</div>
266 </div>
267 </div>
268 215
269 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20"> 216 <div class="min-content grid gridFixedFraction maxWidth20" data-expected-height= "10" data-expected-width="10"></div>
270 <div class="grid gridAutoContent maxWidth20" data-expected-height="10" data- expected-width="20">
271 <div class="firstRowFirstColumn">XX XX XX</div>
272 <div class="firstRowSecondColumn">XX XX XX</div>
273 </div>
274 </div>
275
276 <div class="dummyContainer min-content" data-expected-height="10" data-expected- width="70">
277 <div class="grid gridFixedFraction minWidth70" data-expected-height="10" dat a-expected-width="70"></div>
278 </div>
279
280 <div class="dummyContainer max-content" data-expected-height="10" data-expected- width="20">
281 <div class="grid gridFixedFraction maxWidth20" data-expected-height="10" dat a-expected-width="20"></div>
282 </div>
283 217
284 </body> 218 </body>
285 </html> 219 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-change-column-repaint.html ('k') | LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html » ('j') | LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html » ('J')

Powered by Google App Engine