LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html - Issue 802243003: [CSS Grid Layout] Incorrect sizing of tracks with non-spanning items

Side by Side Diff: LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html

Issue 802243003: [CSS Grid Layout] Incorrect sizing of tracks with non-spanning items (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 5 years, 12 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items.html ('K') | « LayoutTests/fast/css-grid-layout/grid-initialize-span-one-items-expected.txt ('k') | Source/core/rendering/RenderGrid.h » ('j') | Source/core/rendering/style/GridTrackSize.h » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <link href="resources/grid.css" rel="stylesheet">	3 <link href="resources/grid.css" rel="stylesheet">

4 <style>	4 <style>

5 .gridAutoAutoContent {	5 .gridAutoAutoContent {

6 grid-template-columns: auto auto;	6 grid-template-columns: auto auto;

7 grid-template-rows: 50px 100px;	7 grid-template-rows: 50px 100px;

8 }	8 }

9	9

10 .gridFixedAutoContent {	10 .gridFixedAutoContent {

(...skipping 174 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
185 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>	185 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>

186 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>	186 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>

187 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>	187 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>

188 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>	188 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>

189 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>	189 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>

190 </div>	190 </div>

191 </div>	191 </div>

192	192

193 <div class="unconstrainedContainer">	193 <div class="unconstrainedContainer">

194 <div class="grid gridMinMaxMax">	194 <div class="grid gridMinMaxMax">

195 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="110 " data-expected-height="50">XXX XXX XXX</div>	195 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="145 " data-expected-height="50">XXX XXX XXX</div>
	Julien - ping for review 2015/01/02 10:56:39 That looks like a regression to me: the spanning i That looks like a regression to me: the spanning item's 'max-content' is 110px so we shouldn't go above that. On top of it, the 5px seems to be because we spread the max-content over 2 tracks but only track can be impacted (as it has a max sizing function that is 'max-content'). svillar 2015/01/02 11:36:54 The technical reason why it happens is because aft Show quoted text On 2015/01/02 10:56:39, Julien Chaffraix - CET wrote: > That looks like a regression to me: the spanning item's 'max-content' is 110px > so we shouldn't go above that. The technical reason why it happens is because after processing the intrinsic maximums (step 2.3) the sizes are (50px, 15px) (40px, 15px) so when we want to distribute 110px for the max-content maximums, we do 110-15-15 because we use the growth limits, perhaps we should get the max(base size, growth limit) instead. This goes against the spec in a way, but I guess it makes much more sense. Show quoted text > > On top of it, the 5px seems to be because we spread the max-content over 2 > tracks but only track can be impacted (as it has a max sizing function that is > 'max-content'). Yeah, so using the sizes I mentioned above we need to distribute 80px so the final result is: (50px, 15px) (40px, 95px) we do respect the max-content on growth limits, but as the used breadths are bigger the end result in awkward.
196 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>	196 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>

197 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="6 0" data-expected-height="50"></div>	197 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="9 5" data-expected-height="50"></div>

198 </div>	198 </div>

199 </div>	199 </div>

200	200

201 <div class="constrainedContainer">	201 <div class="constrainedContainer">

202 <div class="grid gridMinMaxMax">	202 <div class="grid gridMinMaxMax">

203 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>	203 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="90" data-expected-height="150">XXXXX XXXXX XXXXX</div>

204 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>	204 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50 " data-expected-height="50"></div>

205 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>	205 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>

206 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>	206 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>

207 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>	207 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>

(...skipping 15 matching lines...) Expand all Loading...
223 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>	223 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="4 0" data-expected-height="50"></div>

224 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>	224 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="5 0" data-expected-height="100"></div>

225 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>	225 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 40" data-expected-height="100"></div>

226 </div>	226 </div>

227 </div>	227 </div>

228	228

229 <!-- Allow the extra logical space distribution to occur. -->	229 <!-- Allow the extra logical space distribution to occur. -->

230 <div style="width: 140px; height: 10px">	230 <div style="width: 140px; height: 10px">

231 <div class="grid gridMinMaxMax">	231 <div class="grid gridMinMaxMax">

232 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="140 " data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>	232 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="140 " data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>

233 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65 " data-expected-height="50"></div>	233 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60 " data-expected-height="50"></div>

234 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="7 5" data-expected-height="50"></div>	234 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="8 0" data-expected-height="50"></div>

235 </div>	235 </div>

236 </div>	236 </div>

237	237

238 <div style="width: 140px; height: 10px">	238 <div style="width: 140px; height: 10px">

239 <div class="grid gridMinMaxMax">	239 <div class="grid gridMinMaxMax">

240 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="140" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>	240 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="140" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>

241 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65 " data-expected-height="50"></div>	241 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60 " data-expected-height="50"></div>

242 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="7 5" data-expected-height="50"></div>	242 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="8 0" data-expected-height="50"></div>

243 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="6 5" data-expected-height="100"></div>	243 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="6 0" data-expected-height="100"></div>

244 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 75" data-expected-height="100"></div>	244 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 80" data-expected-height="100"></div>

245 </div>	245 </div>

246 </div>	246 </div>

247	247

248 <div class="unconstrainedContainer">	248 <div class="unconstrainedContainer">

249 <div class="grid gridMinMaxMax">	249 <div class="grid gridMinMaxMax">

250 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="250 " data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>	250 <div class="sizedToGridArea firstRowBothColumn" data-expected-width="250 " data-expected-height="50">XXXXXXXXXXXX XXXXXXXXXXXX</div>

251 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65 " data-expected-height="50"></div>	251 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60 " data-expected-height="50"></div>

252 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 85" data-expected-height="50"></div>	252 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 90" data-expected-height="50"></div>

253 </div>	253 </div>

254 </div>	254 </div>

255	255

256 <div class="unconstrainedContainer">	256 <div class="unconstrainedContainer">

257 <div class="grid gridMinMaxMax">	257 <div class="grid gridMinMaxMax">

258 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="250" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>	258 <div class="sizedToGridArea bothRowBothColumn" data-expected-width="250" data-expected-height="150">XXXXXXXXXXXX XXXXXXXXXXXX</div>

259 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="65 " data-expected-height="50"></div>	259 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="60 " data-expected-height="50"></div>

260 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 85" data-expected-height="50"></div>	260 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="1 90" data-expected-height="50"></div>

261 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="6 5" data-expected-height="100"></div>	261 <div class="sizedToGridArea secondRowFirstColumn" data-expected-width="6 0" data-expected-height="100"></div>

262 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 185" data-expected-height="100"></div>	262 <div class="sizedToGridArea secondRowSecondColumn" data-expected-width=" 190" data-expected-height="100"></div>

263 </div>	263 </div>

264 </div>	264 </div>

265	265

266 </body>	266 </body>

267 </html>	267 </html>

OLD	NEW