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