grid-items-minimum-height-orthogonal-001.html (12028B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Grid Layout Test: Mininum height of grid items orthogonal</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-grid-1/#grid-items"> 6 <meta name="assert" content="Checks that orthogonal grid items minimum height take into account borders, padding and margins for grid containers with definite height."> 7 <link rel="stylesheet" href="/css/support/grid.css"> 8 <style> 9 .grid { 10 display: inline-grid; 11 height: 100px; 12 border: solid thick; 13 grid: minmax(auto, 0px) / 10px 10px; 14 } 15 16 .grid > div:nth-child(1) { background: cyan; writing-mode: vertical-lr; } 17 .grid > div:nth-child(2) { background: magenta; } 18 19 .height60 { height: 60px; } 20 .minHeight60 { min-height: 60px; } 21 22 .marginTop5 { margin-top: 5px; } 23 .marginBottom10 { margin-bottom: 10px; } 24 .marginLeftAuto { margin-left: auto } 25 26 .paddingTop6 { padding-top: 6px; } 27 .paddingBottom3 { padding-bottom: 3px; } 28 29 .borderTop2, .borderBottom4 { border: solid yellow 0px; } 30 .borderTop2 { border-top-width: 2px; } 31 .borderBottom4 { border-bottom-width: 4px; } 32 </style> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script src="/resources/check-layout-th.js"></script> 36 37 <body onload="checkLayout('.grid')"> 38 39 <div id="log"></div> 40 41 <h3>Direction LTR</h3> 42 43 <pre>Item height: 60px;</pre> 44 45 <div class="grid"> 46 <div class="height60" data-expected-height="60"></div> 47 <div data-expected-height="60"></div> 48 </div> 49 50 <pre>Item min-height: 60px;</pre> 51 52 <div class="grid"> 53 <div class="minHeight60" data-expected-height="60"></div> 54 <div data-expected-height="60"></div> 55 </div> 56 57 <pre>Item height: 60px; & margin-left: 5px;</pre> 58 59 <div class="grid"> 60 <div class="height60 marginTop5" data-expected-height="60"></div> 61 <div data-expected-height="65"></div> 62 </div> 63 64 <pre>Item min-height: 60px; & margin-left: 5px;</pre> 65 66 <div class="grid"> 67 <div class="minHeight60 marginTop5" data-expected-height="60"></div> 68 <div data-expected-height="65"></div> 69 </div> 70 71 <pre>Item min-height: 60px; & margin-top: 5px; & margin-left: auto</pre> 72 73 <div class="grid"> 74 <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div> 75 <div data-expected-height="65"></div> 76 </div> 77 78 <pre>Item height: 60px; & margin-right: 10px;</pre> 79 80 <div class="grid"> 81 <div class="height60 marginBottom10" data-expected-height="60"></div> 82 <div data-expected-height="70"></div> 83 </div> 84 85 <pre>Item min-height: 60px; & margin-right: 10px;</pre> 86 87 <div class="grid"> 88 <div class="minHeight60 marginBottom10" data-expected-height="60"></div> 89 <div data-expected-height="70"></div> 90 </div> 91 92 <pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> 93 94 <div class="grid"> 95 <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div> 96 <div data-expected-height="75"></div> 97 </div> 98 99 <pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> 100 101 <div class="grid"> 102 <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div> 103 <div data-expected-height="75"></div> 104 </div> 105 106 <pre>Item height: 60px; & padding-left: 6px;</pre> 107 108 <div class="grid"> 109 <div class="height60 paddingTop6" data-expected-height="66"></div> 110 <div data-expected-height="66"></div> 111 </div> 112 113 <pre>Item min-height: 60px; & padding-left: 6px;</pre> 114 115 <div class="grid"> 116 <div class="minHeight60 paddingTop6" data-expected-height="66"></div> 117 <div data-expected-height="66"></div> 118 </div> 119 120 <pre>Item height: 60px; & padding-right: 3px;</pre> 121 122 <div class="grid"> 123 <div class="height60 paddingBottom3" data-expected-height="63"></div> 124 <div data-expected-height="63"></div> 125 </div> 126 127 <pre>Item min-height: 60px; & padding-right: 3px;</pre> 128 129 <div class="grid"> 130 <div class="minHeight60 paddingBottom3" data-expected-height="63"></div> 131 <div data-expected-height="63"></div> 132 </div> 133 134 <pre>Item height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> 135 136 <div class="grid"> 137 <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div> 138 <div data-expected-height="69"></div> 139 </div> 140 141 <pre>Item min-height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> 142 143 <div class="grid"> 144 <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div> 145 <div data-expected-height="69"></div> 146 </div> 147 148 <pre>Item height: 60px; & border-left-width: 2px;</pre> 149 150 <div class="grid"> 151 <div class="height60 borderTop2" data-expected-height="62"></div> 152 <div data-expected-height="62"></div> 153 </div> 154 155 <pre>Item min-height: 60px; & border-left-width: 2px;</pre> 156 157 <div class="grid"> 158 <div class="minHeight60 borderTop2" data-expected-height="62"></div> 159 <div data-expected-height="62"></div> 160 </div> 161 162 <pre>Item height: 60px; & border-right-width: 4px;</pre> 163 164 <div class="grid"> 165 <div class="height60 borderBottom4" data-expected-height="64"></div> 166 <div data-expected-height="64"></div> 167 </div> 168 169 <pre>Item min-height: 60px; & border-right-width: 4px;</pre> 170 171 <div class="grid"> 172 <div class="minHeight60 borderBottom4" data-expected-height="64"></div> 173 <div data-expected-height="64"></div> 174 </div> 175 176 <pre>Item height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> 177 178 <div class="grid"> 179 <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div> 180 <div data-expected-height="66"></div> 181 </div> 182 183 <pre>Item min-height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> 184 185 <div class="grid"> 186 <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div> 187 <div data-expected-height="66"></div> 188 </div> 189 190 <pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> 191 192 <div class="grid"> 193 <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> 194 <div data-expected-height="90"></div> 195 </div> 196 197 <pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> 198 199 <div class="grid"> 200 <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> 201 <div data-expected-height="90"></div> 202 </div> 203 204 <h3>Direction RTL</h3> 205 206 <pre>Item height: 60px;</pre> 207 208 <div class="grid directionRTL"> 209 <div class="height60" data-expected-height="60"></div> 210 <div data-expected-height="60"></div> 211 </div> 212 213 <pre>Item min-height: 60px;</pre> 214 215 <div class="grid directionRTL"> 216 <div class="minHeight60" data-expected-height="60"></div> 217 <div data-expected-height="60"></div> 218 </div> 219 220 <pre>Item height: 60px; & margin-left: 5px;</pre> 221 222 <div class="grid directionRTL"> 223 <div class="height60 marginTop5" data-expected-height="60"></div> 224 <div data-expected-height="65"></div> 225 </div> 226 227 <pre>Item min-height: 60px; & margin-left: 5px;</pre> 228 229 <div class="grid directionRTL"> 230 <div class="minHeight60 marginTop5" data-expected-height="60"></div> 231 <div data-expected-height="65"></div> 232 </div> 233 234 <pre>Item min-height: 60px; & margin-top: 5px; & margin-left: auto</pre> 235 236 <div class="grid directionRTL"> 237 <div class="minHeight60 marginTop5 marginLeftAuto" data-expected-height="60"></div> 238 <div data-expected-height="65"></div> 239 </div> 240 241 <pre>Item height: 60px; & margin-right: 10px;</pre> 242 243 <div class="grid directionRTL"> 244 <div class="height60 marginBottom10" data-expected-height="60"></div> 245 <div data-expected-height="70"></div> 246 </div> 247 248 <pre>Item min-height: 60px; & margin-right: 10px;</pre> 249 250 <div class="grid directionRTL"> 251 <div class="minHeight60 marginBottom10" data-expected-height="60"></div> 252 <div data-expected-height="70"></div> 253 </div> 254 255 <pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> 256 257 <div class="grid directionRTL"> 258 <div class="height60 marginTop5 marginBottom10" data-expected-height="60"></div> 259 <div data-expected-height="75"></div> 260 </div> 261 262 <pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px;</pre> 263 264 <div class="grid directionRTL"> 265 <div class="minHeight60 marginTop5 marginBottom10" data-expected-height="60"></div> 266 <div data-expected-height="75"></div> 267 </div> 268 269 <pre>Item height: 60px; & padding-left: 6px;</pre> 270 271 <div class="grid directionRTL"> 272 <div class="height60 paddingTop6" data-expected-height="66"></div> 273 <div data-expected-height="66"></div> 274 </div> 275 276 <pre>Item min-height: 60px; & padding-left: 6px;</pre> 277 278 <div class="grid directionRTL"> 279 <div class="minHeight60 paddingTop6" data-expected-height="66"></div> 280 <div data-expected-height="66"></div> 281 </div> 282 283 <pre>Item height: 60px; & padding-right: 3px;</pre> 284 285 <div class="grid directionRTL"> 286 <div class="height60 paddingBottom3" data-expected-height="63"></div> 287 <div data-expected-height="63"></div> 288 </div> 289 290 <pre>Item min-height: 60px; & padding-right: 3px;</pre> 291 292 <div class="grid directionRTL"> 293 <div class="minHeight60 paddingBottom3" data-expected-height="63"></div> 294 <div data-expected-height="63"></div> 295 </div> 296 297 <pre>Item height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> 298 299 <div class="grid directionRTL"> 300 <div class="height60 paddingTop6 paddingBottom3" data-expected-height="69"></div> 301 <div data-expected-height="69"></div> 302 </div> 303 304 <pre>Item min-height: 60px; & padding-left: 6px; & padding-right: 3px;</pre> 305 306 <div class="grid directionRTL"> 307 <div class="minHeight60 paddingTop6 paddingBottom3" data-expected-height="69"></div> 308 <div data-expected-height="69"></div> 309 </div> 310 311 <pre>Item height: 60px; & border-left-width: 2px;</pre> 312 313 <div class="grid directionRTL"> 314 <div class="height60 borderTop2" data-expected-height="62"></div> 315 <div data-expected-height="62"></div> 316 </div> 317 318 <pre>Item min-height: 60px; & border-left-width: 2px;</pre> 319 320 <div class="grid directionRTL"> 321 <div class="minHeight60 borderTop2" data-expected-height="62"></div> 322 <div data-expected-height="62"></div> 323 </div> 324 325 <pre>Item height: 60px; & border-right-width: 4px;</pre> 326 327 <div class="grid directionRTL"> 328 <div class="height60 borderBottom4" data-expected-height="64"></div> 329 <div data-expected-height="64"></div> 330 </div> 331 332 <pre>Item min-height: 60px; & border-right-width: 4px;</pre> 333 334 <div class="grid directionRTL"> 335 <div class="minHeight60 borderBottom4" data-expected-height="64"></div> 336 <div data-expected-height="64"></div> 337 </div> 338 339 <pre>Item height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> 340 341 <div class="grid directionRTL"> 342 <div class="height60 borderTop2 borderBottom4" data-expected-height="66"></div> 343 <div data-expected-height="66"></div> 344 </div> 345 346 <pre>Item min-height: 60px; & border-left-width: 2px; & border-right-width: 4px;</pre> 347 348 <div class="grid directionRTL"> 349 <div class="minHeight60 borderTop2 borderBottom4" data-expected-height="66"></div> 350 <div data-expected-height="66"></div> 351 </div> 352 353 <pre>Item height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> 354 355 <div class="grid directionRTL"> 356 <div class="height60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> 357 <div data-expected-height="90"></div> 358 </div> 359 360 <pre>Item min-height: 60px; & margin-left: 5px; & margin-right: 10px; & padding-left: 6px; & padding-right: 3px; & border-left-width: 2px; & border-right-width: 4px;</pre> 361 362 <div class="grid directionRTL"> 363 <div class="minHeight60 marginTop5 marginBottom10 paddingTop6 paddingBottom3 borderTop2 borderBottom4" data-expected-height="75"></div> 364 <div data-expected-height="90"></div> 365 </div>