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