LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.html - Issue 1317643005: [css-grid] Fix track sizing algo w/ size restrictions and intrinsic sizes

Side by Side Diff: LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height.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: Created 5 years, 3 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-preferred-logical-widths.html ('K') | « LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html ('k') | LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-height-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/percent-of-indefinite-track-size.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2

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

	4 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">

	5

	6 <style>

	7 .grid {

	8 grid-template-rows: minmax(0px, 100px);

	9 width: 40px;

	10

	11 align-items: start;

	12 justify-items: start;

	13 }

	14

	15 .max-height-35 { max-height: 35px; }

	16 .max-height-50 { max-height: 50px; }

	17 .min-height-35 { min-height: 35px; }

	18 .min-height-50 { min-height: 50px; }

	19 </style>

	20

	21 <script src="../../resources/check-layout.js"></script>

	22

	23 <body onload="checkLayout('.grid')">

	24

	25 <h2>Check the behavior of grids under max-content constraints.</h2>

	26 <div class="grid max-content max-height-35" data-expected-width="40" data-expect ed-height="35">

	27 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XXX XX XXX</div>
	jfernandez 2015/09/01 23:41:39 I don't get the 'sizedToGridArea' because that's w I don't get the 'sizedToGridArea' because that's what 'stretch' already does. You need it because you have set align-items and justify-items to 'start'. Just wondering the reason behind this. svillar 2015/09/02 13:25:48 Hmm good point, I should have done it for some rea Show quoted text On 2015/09/01 23:41:39, jfernandez wrote: > I don't get the 'sizedToGridArea' because that's what 'stretch' already does. > You need it because you have set align-items and justify-items to 'start'. Just > wondering the reason behind this. Hmm good point, I should have done it for some reason, but I don't remember now. I agree what I did seems equivalent to not adding anything... Manuel Rego 2015/09/17 11:04:02 You're using "align\|justify-items: start;" before, Show quoted text On 2015/09/02 13:25:48, svillar wrote: > On 2015/09/01 23:41:39, jfernandez wrote: > > I don't get the 'sizedToGridArea' because that's what 'stretch' already does. > > You need it because you have set align-items and justify-items to 'start'. > Just > > wondering the reason behind this. > > Hmm good point, I should have done it for some reason, but I don't remember now. > I agree what I did seems equivalent to not adding anything... You're using "align\|justify-items: start;" before, so you need this if you want them to take 100% of the size. Not sure why you've used "start" before though. In addition .sizedToGridArea is the class setting Ahem font. Probably we should change this at some point and try to remove the "width\|height: 100%;" from .sizedToGridArea (as stretch should be already doing it) and rename the class to something related to the Ahem font. svillar 2015/09/17 14:05:44 Yeah, that's it. The patch is a bit old, so I forg Show quoted text On 2015/09/17 11:04:02, Manuel Rego wrote: > On 2015/09/02 13:25:48, svillar wrote: > > On 2015/09/01 23:41:39, jfernandez wrote: > > > I don't get the 'sizedToGridArea' because that's what 'stretch' already > does. > > > You need it because you have set align-items and justify-items to 'start'. > > Just > > > wondering the reason behind this. > > > > Hmm good point, I should have done it for some reason, but I don't remember > now. > > I agree what I did seems equivalent to not adding anything... > > You're using "align\|justify-items: start;" before, so you need this > if you want them to take 100% of the size. > Not sure why you've used "start" before though. > > In addition .sizedToGridArea is the class setting Ahem font. > Probably we should change this at some point and > try to remove the "width\|height: 100%;" from .sizedToGridArea > (as stretch should be already doing it) > and rename the class to something related to the Ahem font. Yeah, that's it. The patch is a bit old, so I forgot the rationale behind some decisions.
	28 </div>

	29

	30 <div class="grid max-content max-height-min-content" data-expected-width="40" da ta-expected-height="0">

	31 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX X</div>

	32 </div>

	33

	34 <div class="grid max-height-min-content" data-expected-width="40" data-expected- height="0">

	35 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>

	36 </div>

	37

	38 <div class="grid max-content max-height-fill-available" data-expected-width="40" data-expected-height="100">

	39 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XXX X XXX</div>

	40 </div>

	41

	42 <div class="grid max-content" data-expected-width="40" data-expected-height="100 ">

	43 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX XXX XX</div>

	44 </div>

	45

	46 <br>

	47 <h2>Check the behavior of grids under min-content contstraints.</h2>

	48 <div class="grid min-content" data-expected-width="40" data-expected-height="0">

	49 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XX XX</div>

	50 </div>

	51

	52 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">

	53 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX X</div>

	54 </div>

	55

	56 <div class="grid min-content min-height-fit-content" data-expected-width="40" da ta-expected-height="0">

	57 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX XXXX</div>

	58 </div>

	59

	60 <div style="height: 200px;">

	61 <div class="grid min-content min-height-fill-available" data-expected-width= "40" data-expected-height="200">

	62 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXXX XXXX XXX</div>

	63 </div>

	64 </div>

	65

	66 <div class="grid min-content min-height-min-content" data-expected-width="40" da ta-expected-height="0">

	67 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 0">XX XXX</div>

	68 </div>

	69

	70 <div class="grid min-content min-height-35" data-expected-width="40" data-expect ed-height="35">

	71 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>

	72 </div>

	73

	74 <div class="grid min-content min-height-max-content" data-expected-width="40" da ta-expected-height="100">

	75 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">X XXX X</div>

	76 </div>

	77

	78 <div class="grid min-content min-height-50" data-expected-width="40" data-expect ed-height="50">

	79 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XXXX XXXX XXXX XXXX</div>

	80 </div>
	Manuel Rego 2015/09/17 11:04:02 This seems a duplicated test comparing it with lin This seems a duplicated test comparing it with line 52. I see that the item will be 20x20 vs 40x40, but the min-height is 50px, so it's bigger than the item in both cases.
	81

	82 <div class="grid min-content max-height-50" data-expected-width="40" data-expect ed-height="0">

	83 <div class="sizedToGridArea min-height-fill-available" data-expected-width=" 40" data-expected-height="50">XXXX X X XXXX</div>

	84 </div>

	85

	86 <br>

	87 <h2>Check the behavior of grids with definite available space.</h2>

	88 <div class="grid" style="height: 100px;" data-expected-width="40" data-expected- height="100">

	89 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 100">XX XXX X</div>

	90 </div>

	91

	92 <div class="grid max-height-35" style="height: 100px;" data-expected-width="40" data-expected-height="35">

	93 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 35">XX XX</div>

	94 </div>

	95

	96 <div class="grid min-height-50" style="height: 10px;" data-expected-width="40" d ata-expected-height="50">

	97 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXXX</div>

	98 </div>

	99

	100 <div class="grid min-height-50" style="height: 20px; data-expected-width="40" da ta-expected-height="50">

	101 <div class="sizedToGridArea" data-expected-width="40" data-expected-height=" 50">XX XXX XX XXX XX XXX</div>

	102 </div>

	103

	104 <div style="height: 100px;">

	105 <div class="grid" style="height: 37%;" data-expected-width="40" data-expecte d-height="37">

	106 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">X X X X</div>

	107 </div>

	108 <div class="grid min-height-50" style="height: 37%;" data-expected-width="40 " data-expected-height="50">

	109 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="50">XX XX XX</div>

	110 </div>

	111 <div class="grid min-height-35" style="height: 37%;" data-expected-width="40 " data-expected-height="37">

	112 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="37">XXXX</div>

	113 </div>

	114 </div>

	115

	116 <br>

	117 <h2>Check the behavior of grids with indefinite available space.</h2>

	118 <div class="fit-content">

	119 <div class="grid" data-expected-width="40" data-expected-height="100">

	120 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX</div>

	121 </div>

	122 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">

	123 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XXXX X</div>

	124 </div>

	125 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">

	126 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX XX XX</div>

	127 </div>

	128 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">

	129 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>

	130 </div>

	131 </div>

	132

	133 <div class="fit-content" style="height: 125px;">

	134 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="125">

	135 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">X XX X</div>

	136 </div>

	137 </div>

	138

	139 <div class="fit-content min-height-50">

	140 <div class="grid" data-expected-width="40" data-expected-height="100">

	141 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX XX X XXX</div>

	142 </div>

	143 <div class="grid min-height-35" data-expected-width="40" data-expected-heigh t="100">

	144 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XXXX X X</div>

	145 </div>

	146 <div class="grid max-height-min-content" data-expected-width="40" data-expec ted-height="0">

	147 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">X XXX XX</div>

	148 </div>

	149 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">

	150 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX XXX XX X</div>

	151 </div>

	152 </div>

	153

	154 <div class="fit-content min-height-50" style="height: 75px;">

	155 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="75">

	156 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>

	157 </div>

	158 </div>

	159

	160 <div style="height: 25px;">

	161 <div class="grid fit-content" data-expected-width="40" data-expected-height= "100">

	162 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>

	163 </div>

	164 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="25">

	165 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>

	166 </div>

	167 <div class="grid fit-content min-height-35" data-expected-width="40" data-ex pected-height="100">

	168 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="100">XX X</div>

	169 </div>

	170 <div class="grid fit-content max-height-min-content" data-expected-width="40 " data-expected-height="0">

	171 <div class="sizedToGridArea" data-expected-width="40" data-expected-heig ht="0">XX X</div>

	172 </div>

	173 </div>

OLD	NEW