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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/maximize-tracks-definite-indefinite-width.html

Issue 1583433002: [css-align] New CSS Value 'normal' for Content Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixed layout tests failing. Created 4 years, 10 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/mark-as-infinitely-growable.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 2
3 <link href="resources/grid.css" rel="stylesheet"> 3 <link href="resources/grid.css" rel="stylesheet">
4 <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/width-keyword-classes.css" rel ="stylesheet">
5 6
6 <style> 7 <style>
7 div.grid > div { font: 10px/1 Ahem; } 8 div.grid > div { font: 10px/1 Ahem; }
8 9
9 .max-width-35 { max-width: 35px; } 10 .max-width-35 { max-width: 35px; }
10 .min-width-35 { min-width: 35px; } 11 .min-width-35 { min-width: 35px; }
11 .min-width-50 { min-width: 50px; } 12 .min-width-50 { min-width: 50px; }
12 </style> 13 </style>
13 14
(...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after
66 <div data-expected-width="20" data-expected-height="20">XX X</div> 67 <div data-expected-width="20" data-expected-height="20">XX X</div>
67 </div> 68 </div>
68 69
69 <div class="grid max-content" data-expected-width="40" data-expected-height="10" > 70 <div class="grid max-content" data-expected-width="40" data-expected-height="10" >
70 <div data-expected-width="40" data-expected-height="10">XX X</div> 71 <div data-expected-width="40" data-expected-height="10">XX X</div>
71 </div> 72 </div>
72 73
73 <br> 74 <br>
74 <h2>Check the behavior of grids under min-content contstraints.</h2> 75 <h2>Check the behavior of grids under min-content contstraints.</h2>
75 <div class="min-content min-width-50"> 76 <div class="min-content min-width-50">
76 <div class="grid" data-expected-width="50" data-expected-height="10"> 77 <div class="grid justifyContentStart" data-expected-width="50" data-expected -height="10">
77 <div data-expected-width="40" data-expected-height="10">XX X</div> 78 <div data-expected-width="40" data-expected-height="10">XX X</div>
78 </div> 79 </div>
79 <div class="grid min-content" data-expected-width="20" data-expected-height= "20"> 80 <div class="grid min-content" data-expected-width="20" data-expected-height= "20">
80 <div data-expected-width="20" data-expected-height="20">XX X</div> 81 <div data-expected-width="20" data-expected-height="20">XX X</div>
81 </div> 82 </div>
82 <div class="grid min-content min-width-35" data-expected-width="35" data-exp ected-height="20"> 83 <div class="grid min-content min-width-35" data-expected-width="35" data-exp ected-height="20">
83 <div data-expected-width="35" data-expected-height="20">XX X</div> 84 <div data-expected-width="35" data-expected-height="20">XX X</div>
84 </div> 85 </div>
85 <div class="grid min-content min-width-fit-content" data-expected-width="40" data-expected-height="10"> 86 <div class="grid min-content min-width-fit-content" data-expected-width="40" data-expected-height="10">
86 <div data-expected-width="40" data-expected-height="10">XX X</div> 87 <div data-expected-width="40" data-expected-height="10">XX X</div>
87 </div> 88 </div>
88 </div> 89 </div>
89 90
90 <div style="width: 200px;"> 91 <div style="width: 200px;">
91 <div class="grid min-content min-width-fill-available" data-expected-width=" 200" data-expected-height="10"> 92 <div class="grid justifyContentStart min-content min-width-fill-available" d ata-expected-width="200" data-expected-height="10">
92 <div data-expected-width="40" data-expected-height="10">XX X</div> 93 <div data-expected-width="40" data-expected-height="10">XX X</div>
93 </div> 94 </div>
94 </div> 95 </div>
95 96
96 <div class="grid min-content" data-expected-width="20" data-expected-height="20" > 97 <div class="grid min-content" data-expected-width="20" data-expected-height="20" >
97 <div data-expected-width="20" data-expected-height="20">XX X</div> 98 <div data-expected-width="20" data-expected-height="20">XX X</div>
98 </div> 99 </div>
99 100
100 <div class="grid min-content min-width-min-content" data-expected-width="20" dat a-expected-height="20"> 101 <div class="grid min-content min-width-min-content" data-expected-width="20" dat a-expected-height="20">
101 <div data-expected-width="20" data-expected-height="20">XX X</div> 102 <div data-expected-width="20" data-expected-height="20">XX X</div>
102 </div> 103 </div>
103 104
104 <div class="grid min-content min-width-35" data-expected-width="35" data-expecte d-height="20"> 105 <div class="grid min-content min-width-35" data-expected-width="35" data-expecte d-height="20">
105 <div data-expected-width="35" data-expected-height="20">XX X</div> 106 <div data-expected-width="35" data-expected-height="20">XX X</div>
106 </div> 107 </div>
107 108
108 <div class="grid min-content min-width-max-content" data-expected-width="40" dat a-expected-height="10"> 109 <div class="grid min-content min-width-max-content" data-expected-width="40" dat a-expected-height="10">
109 <div data-expected-width="40" data-expected-height="10">XX X</div> 110 <div data-expected-width="40" data-expected-height="10">XX X</div>
110 </div> 111 </div>
111 112
112 <div class="grid min-content min-width-50" data-expected-width="50" data-expecte d-height="10"> 113 <div class="grid justifyContentStart min-content min-width-50" data-expected-wid th="50" data-expected-height="10">
113 <div data-expected-width="40" data-expected-height="10">XX X</div> 114 <div data-expected-width="40" data-expected-height="10">XX X</div>
114 </div> 115 </div>
115 116
116 <br> 117 <br>
117 <h2>Check the behavior of grids with definite available space.</h2> 118 <h2>Check the behavior of grids with definite available space.</h2>
118 <div style="width: 100px;"> 119 <div style="width: 100px;">
119 <div class="grid" data-expected-width="100" data-expected-height="10"> 120 <div class="grid justifyContentStart" data-expected-width="100" data-expecte d-height="10">
120 <div data-expected-width="40" data-expected-height="10">XX X</div> 121 <div data-expected-width="40" data-expected-height="10">XX X</div>
121 </div> 122 </div>
122 </div> 123 </div>
123 124
124 <div class="max-width-35" style="width: 100px;"> 125 <div class="max-width-35" style="width: 100px;">
125 <div class="grid" data-expected-width="35" data-expected-height="20"> 126 <div class="grid" data-expected-width="35" data-expected-height="20">
126 <div data-expected-width="35" data-expected-height="20">XX X</div> 127 <div data-expected-width="35" data-expected-height="20">XX X</div>
127 </div> 128 </div>
128 </div> 129 </div>
129 130
130 <div style="width: 100px;"> 131 <div style="width: 100px;">
131 <div class="grid max-width-35" data-expected-width="35" data-expected-height ="20"> 132 <div class="grid max-width-35" data-expected-width="35" data-expected-height ="20">
132 <div data-expected-width="35" data-expected-height="20">XX X</div> 133 <div data-expected-width="35" data-expected-height="20">XX X</div>
133 </div> 134 </div>
134 </div> 135 </div>
135 136
136 <div class="grid" style="width: 90px;" data-expected-width="90" data-expected-he ight="10"> 137 <div class="grid justifyContentStart" style="width: 90px;" data-expected-width=" 90" data-expected-height="10">
137 <div data-expected-width="40" data-expected-height="10">XX X</div> 138 <div data-expected-width="40" data-expected-height="10">XX X</div>
138 </div> 139 </div>
139 140
140 <div class="grid min-width-50" style="width: 10px;" data-expected-width="50" dat a-expected-height="10"> 141 <div class="grid justifyContentStart min-width-50" style="width: 10px;" data-exp ected-width="50" data-expected-height="10">
141 <div data-expected-width="40" data-expected-height="10">XX X</div> 142 <div data-expected-width="40" data-expected-height="10">XX X</div>
142 </div> 143 </div>
143 144
144 <div class="min-width-50" style="width: 20px;"> 145 <div class="min-width-50" style="width: 20px;">
145 <div class="grid" data-expected-width="50" data-expected-height="10"> 146 <div class="grid justifyContentStart" data-expected-width="50" data-expected -height="10">
146 <div data-expected-width="40" data-expected-height="10">XX X</div> 147 <div data-expected-width="40" data-expected-height="10">XX X</div>
147 </div> 148 </div>
148 </div> 149 </div>
149 150
150 <div style="width: 100px;"> 151 <div style="width: 100px;">
151 <div class="grid" style="width: 37%;" data-expected-width="37" data-expected -height="20"> 152 <div class="grid" style="width: 37%;" data-expected-width="37" data-expected -height="20">
152 <div data-expected-width="37" data-expected-height="20">XX X</div> 153 <div data-expected-width="37" data-expected-height="20">XX X</div>
153 </div> 154 </div>
154 <div class="grid min-width-50" style="width: 37%;" data-expected-width="50" data-expected-height="10"> 155 <div class="grid justifyContentStart min-width-50" style="width: 37%;" data- expected-width="50" data-expected-height="10">
155 <div data-expected-width="40" data-expected-height="10">XX X</div> 156 <div data-expected-width="40" data-expected-height="10">XX X</div>
156 </div> 157 </div>
157 <div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20"> 158 <div class="grid min-width-35" style="width: 37%;" data-expected-width="37" data-expected-height="20">
158 <div data-expected-width="37" data-expected-height="20">XX X</div> 159 <div data-expected-width="37" data-expected-height="20">XX X</div>
159 </div> 160 </div>
160 </div> 161 </div>
161 162
162 <br> 163 <br>
163 <h2>Check the behavior of grids with indefinite available space.</h2> 164 <h2>Check the behavior of grids with indefinite available space.</h2>
164 <div class="fit-content"> 165 <div class="fit-content">
165 <div class="grid" data-expected-width="40" data-expected-height="10"> 166 <div class="grid" data-expected-width="40" data-expected-height="10">
166 <div data-expected-width="40" data-expected-height="10">XX X</div> 167 <div data-expected-width="40" data-expected-height="10">XX X</div>
167 </div> 168 </div>
168 <div class="grid min-width-35" data-expected-width="40" data-expected-height ="10"> 169 <div class="grid min-width-35" data-expected-width="40" data-expected-height ="10">
169 <div data-expected-width="40" data-expected-height="10">XX X</div> 170 <div data-expected-width="40" data-expected-height="10">XX X</div>
170 </div> 171 </div>
171 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20"> 172 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20">
172 <div data-expected-width="20" data-expected-height="20">XX X</div> 173 <div data-expected-width="20" data-expected-height="20">XX X</div>
173 </div> 174 </div>
174 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10"> 175 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10">
175 <div data-expected-width="40" data-expected-height="10">XX X</div> 176 <div data-expected-width="40" data-expected-height="10">XX X</div>
176 </div> 177 </div>
177 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="10"> 178 <div class="grid fill-available" data-expected-width="40" data-expected-heig ht="10">
178 <div data-expected-width="40" data-expected-height="10">XX X</div> 179 <div data-expected-width="40" data-expected-height="10">XX X</div>
179 </div> 180 </div>
180 </div> 181 </div>
181 182
182 <div class="fit-content min-width-50"> 183 <div class="fit-content min-width-50">
183 <div class="grid" data-expected-width="50" data-expected-height="10"> 184 <div class="grid justifyContentStart" data-expected-width="50" data-expected -height="10">
184 <div data-expected-width="40" data-expected-height="10">XX X</div> 185 <div data-expected-width="40" data-expected-height="10">XX X</div>
185 </div> 186 </div>
186 <div class="grid min-width-35" data-expected-width="50" data-expected-height ="10"> 187 <div class="grid justifyContentStart min-width-35" data-expected-width="50" data-expected-height="10">
187 <div data-expected-width="40" data-expected-height="10">XX X</div> 188 <div data-expected-width="40" data-expected-height="10">XX X</div>
188 </div> 189 </div>
189 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20"> 190 <div class="grid max-width-min-content" data-expected-width="20" data-expect ed-height="20">
190 <div data-expected-width="20" data-expected-height="20">XX X</div> 191 <div data-expected-width="20" data-expected-height="20">XX X</div>
191 </div> 192 </div>
192 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10"> 193 <div class="grid fit-content" data-expected-width="40" data-expected-height= "10">
193 <div data-expected-width="40" data-expected-height="10">XX X</div> 194 <div data-expected-width="40" data-expected-height="10">XX X</div>
194 </div> 195 </div>
195 <div class="grid fill-available" data-expected-width="50" data-expected-heig ht="10"> 196 <div class="grid justifyContentStart fill-available" data-expected-width="50 " data-expected-height="10">
196 <div data-expected-width="40" data-expected-height="10">XX X</div> 197 <div data-expected-width="40" data-expected-height="10">XX X</div>
197 </div> 198 </div>
198 </div> 199 </div>
199 200
200 <div style="width: 25px;"> 201 <div style="width: 25px;">
201 <div class="grid fit-content" data-expected-width="25" data-expected-height= "20"> 202 <div class="grid fit-content" data-expected-width="25" data-expected-height= "20">
202 <div data-expected-width="25" data-expected-height="20">XX X</div> 203 <div data-expected-width="25" data-expected-height="20">XX X</div>
203 </div> 204 </div>
204 <div class="grid fill-available" data-expected-width="25" data-expected-heig ht="20"> 205 <div class="grid fill-available" data-expected-width="25" data-expected-heig ht="20">
205 <div data-expected-width="25" data-expected-height="20">XX X</div> 206 <div data-expected-width="25" data-expected-height="20">XX X</div>
206 </div> 207 </div>
207 <div class="grid fit-content min-width-35" data-expected-width="35" data-exp ected-height="20"> 208 <div class="grid fit-content min-width-35" data-expected-width="35" data-exp ected-height="20">
208 <div data-expected-width="35" data-expected-height="20">XX X</div> 209 <div data-expected-width="35" data-expected-height="20">XX X</div>
209 </div> 210 </div>
210 <div class="grid fit-content max-width-min-content" data-expected-width="20" data-expected-height="20"> 211 <div class="grid fit-content max-width-min-content" data-expected-width="20" data-expected-height="20">
211 <div data-expected-width="20" data-expected-height="20">XX X</div> 212 <div data-expected-width="20" data-expected-height="20">XX X</div>
212 </div> 213 </div>
213 </div> 214 </div>
214 215
215 216
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/mark-as-infinitely-growable.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/minmax-spanning-resolution-columns.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698