Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(23)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html

Issue 815833005: [css-grid] Handle min-content/max-content with orthogonal flows (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Comments and assertions to make the code clearer. Created 4 years, 6 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
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <link href="resources/grid.css" rel="stylesheet">
3 <link href="resources/grid-alignment.css" rel="stylesheet">
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">
6 <style>
7 body {
8 margin: 0;
9 }
10
11 .container {
12 position: relative;
13 }
14
15 .grid {
16 position: relative;
17 font: 10px/1 Ahem;
18 }
19
20 .width300 { width: 300px; }
21 .height200 { height: 200px; }
22
23 .minWidthZero { min-width: 0; }
24 .minWidthFixed { min-width: 50px;}
25 .minHeightZero { min-height: 0; }
26 .minHeightFixed { min-height: 50px;}
27
28 .firstAndSecondRowSecondColumn {
29 background-color: lime;
30 grid-column: 2;
31 grid-row: 1 / 3;
32 }
33 </style>
34 <script src="../../resources/testharness.js"></script>
35 <script src="../../resources/testharnessreport.js"></script>
36 <script src="../../resources/check-layout-th.js"></script>
37 <body onload="checkLayout('.grid')">
38 <div id="log"></div>
39 <p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
40
41 <div class="container">
42 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-{width, height} auto</b>.<br> Enough available space in the inline axis, s o parallel tracks grow until their limits; orthogonal tracks, however, are limit ed to the bloc-axis available space, which will determine their column tracks si ze.</p>
43 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
44 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
45 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
46 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
47 </div>
48 </div>
49
50 <div class="container">
51 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Orthogonal gree n row track assumed as infinity, hence 10px for the column track. Actual row tra cks size is different, hence overflowing. </p>
52 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="50" data-expected-height="200">
53 <div class="firstRowFirstColumn" data-offset-x="0" data-off set-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</ div>
54 <div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-off set-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX X X XXX X XXXX X XX</div>
55 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-off set-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX< /div>
56 </div>
57 </div>
58
59 <div class="container">
60 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-{width, height} auto</b>.<br> Parallel blue c olumn track sized as its max of 150x, while Orthogonal green row, assumed as inf inity, sized as 10px. Since actual row tracks size is different, green column tr ack will occupy some space initally assigned to the blue one.</p>
61 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="170" data-expected-height="200">
62 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX </div>
63 <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
64 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
65 </div>
66 </div>
67
68 <div class="container">
69 <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since we use as sumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.</p>
70 <div class="grid itemsStart contentStart fit-content height200" data-expecte d-width="170" data-expected-height="200">
71 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX </div>
72 <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-of fset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
73 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XX X</div>
74 </div>
75 </div>
76
77 <div class="container">
78 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since ther e is enough space in the inline-axis, the orthogonal green row sets the min-cont ent size, which is 50px because of the 5 chars line.</p>
79 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="90">
80 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
81 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
82 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="40" data-expected-height="40">XXXX XX X XX XX X</div>
83 </div>
84 </div>
85
86 <div class="container">
87 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Both paral ell and orthogonal tracks reach their maximum sizes.</p>
88 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
89 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
90 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
91 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div>
92 </div>
93 </div>
94
95 <div class="container">
96 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Same resul t as sizing under max-content constrain.</p>
97 <div class="grid itemsStart contentStart fit-content width300" data-expected -width="300" data-expected-height="490">
98 <div class="firstRowFirstColumn" data-offset-x="0" data-of fset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX </div>
99 <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-of fset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
100 <div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-of fset-y="330" data-expected-width="10" data-expected-height="160">XXXX XX X XX X XX</div>
101 </div>
102 </div>
103
104 <!-- Playing with min-{width,height} constrains. -->
105
106 <div class="container">
107 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 0px, min-height: auto</b>.<br> Since grid container has definite si ze in both axis, all grid tracks grow until reach their maximum breadth, hence m in-width has no effect.</p>
108 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
109 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
110 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
111 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div>
112 </div>
113 </div>
114
115 <div class="container">
116 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Both pa rallel and orthogonal column tracks are 0px because of item's min-width and cont ainer's min-content constrain.</p>
117 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="0" data-expected-height="200">
118 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50"> XX XXX X XXX XX</div>
119 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
120 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div>
121 </div>
122 </div>
123
124 <div class="container">
125 <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since c ontainer is sized under max-content, tracks will use its maximum size.</p>
126 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="170" data-expected-height="200">
127 <div class="minWidthZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="130" data-expected-height="20"> XX XXX X XXX XX</div>
128 <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset- x="130" data-offset-y="0" data-expected-width="40" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
129 <div class="minWidthZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95"> XXXX XX X XX XXX</div>
130 </div>
131 </div>
132
133 <div class="container">
134 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Bo th parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
135 <div class="grid itemsStart contentStart min-content width300 " data-expecte d-width="300" data-expected-height="0">
136 <div class="minHeightZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
137 <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50"> X XXX XX XXXXX XX XXX X XXXX X XX</div>
138 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="40" data-expected-height="40"> XXXX XX X XX XXX</div>
139 </div>
140 </div>
141
142 <div class="container">
143 <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Bo th parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
144 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
145 <div class="minHeightZero firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
146 <div class="minHeightZero verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
147 <div class="minHeightZero verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div>
148 </div>
149 </div>
150
151 <div class="container">
152 <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with < b>min-width: 50px, min-height: auto</b>.<br> Since grid container has definite s ize in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p>
153 <div class="grid itemsStart contentStart width300 height200" data-expected-w idth="300" data-expected-height="200">
154 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
155 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
156 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
157 </div>
158 </div>
159
160 <div class="container">
161 <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br > All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Column tracks size is set by min-width, while rows grow until exhaust the available he ight.</p>
162 <div class="grid itemsStart contentStart min-content height200" data-expecte d-width="100" data-expected-height="200">
163 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40"> XX XXX X XXX XX</div>
164 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="50" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
165 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
166 </div>
167 </div>
168
169 <div class="container">
170 <p>Grid width under <b>max-content</b> constrain and fixed height.<br> All g rid items sized with <b>min-width: 50px, min-height: auto</b>.<br> .</p>
171 <div class="grid itemsStart contentStart max-content height200" data-expecte d-width="200" data-expected-height="200">
172 <div class="minWidthFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10"> XX XXX X XXX XX</div>
173 <div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
174 <div class="minWidthFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="105" data-expected-width="50" data-expected-height="95"> XXXX XX X XX XXX</div>
175 </div>
176 </div>
177
178 <div class="container">
179 <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> P arallel blue row track must grow to fulfill min-height restriction, while orthog onal shrink to satisfy container's min-content constrain.</p>
180 <div class="grid itemsStart contentStart min-content width300" data-expected -width="300" data-expected-height="100">
181 <div class="minHeightFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"> XX XXX X XXX XX</div>
182 <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50"> X XXX XX XXXXX XX XXX X XXXX X XX</div>
183 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="50" data-expected-width="40" data-expected-height="50"> XXXX XX X XX XXX</div>
184 </div>
185 </div>
186
187 <div class="container">
188 <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrai n.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> O rthogonal rows can grow now to reach their maximum, exceeding min-height as well , while parallel row tracks are still sized according to min-height.</p>
189 <div class="grid itemsStart contentStart max-content width300" data-expected -width="300" data-expected-height="490">
190 <div class="minHeightFixed firstRowFirstColumn" data-offset- x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50"> XX XXX X XXX XX</div>
191 <div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset- x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330" >X XXX XX XXXXX XX XXX X XXXX X XX</div>
192 <div class="minHeightFixed verticalLR secondRowFirstColumn" data-offset- x="0" data-offset-y="330" data-expected-width="10" data-expected-height="160" >XXXX XX X XX XXX</div>
193 </div>
194 </div>
195
196 </body>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-item-spanning-and-orthogonal-flows.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698