testing/web-platform/tests/css/css-grid/grid-items/grid-items-minimum-width-orthogonal-001.html

   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="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
  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">
  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">
  51   <div class="minWidth60" data-expected-width="60"></div>
  52   <div data-expected-width="60"></div>
  53 </div>
  54
  55 <pre>Item width: 60px; &amp; margin-left: 5px;</pre>
  56
  57 <div class="grid">
  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; &amp; margin-left: 5px;</pre>
  63
  64 <div class="grid">
  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; &amp; margin-right: 10px;</pre>
  70
  71 <div class="grid">
  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; &amp; margin-right: 10px;</pre>
  77
  78 <div class="grid">
  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; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
  84
  85 <div class="grid">
  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; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
  91
  92 <div class="grid">
  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; &amp; padding-left: 6px;</pre>
  98
  99 <div class="grid">
 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; &amp; padding-left: 6px;</pre>
 105
 106 <div class="grid">
 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; &amp; padding-right: 3px;</pre>
 112
 113 <div class="grid">
 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; &amp; padding-right: 3px;</pre>
 119
 120 <div class="grid">
 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; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
 126
 127 <div class="grid">
 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; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
 133
 134 <div class="grid">
 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; &amp; border-left-width: 2px;</pre>
 140
 141 <div class="grid">
 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; &amp; border-left-width: 2px;</pre>
 147
 148 <div class="grid">
 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; &amp; border-right-width: 4px;</pre>
 154
 155 <div class="grid">
 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; &amp; border-right-width: 4px;</pre>
 161
 162 <div class="grid">
 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; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 168
 169 <div class="grid">
 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; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 175
 176 <div class="grid">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 182
 183 <div class="grid">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 189
 190 <div class="grid">
 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">
 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">
 207   <div class="minWidth60" data-expected-width="60"></div>
 208   <div data-expected-width="60"></div>
 209 </div>
 210
 211 <pre>Item width: 60px; &amp; margin-left: 5px;</pre>
 212
 213 <div class="grid directionRTL">
 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; &amp; margin-left: 5px;</pre>
 219
 220 <div class="grid directionRTL">
 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; &amp; margin-right: 10px;</pre>
 226
 227 <div class="grid directionRTL">
 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; &amp; margin-right: 10px;</pre>
 233
 234 <div class="grid directionRTL">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
 240
 241 <div class="grid directionRTL">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px;</pre>
 247
 248 <div class="grid directionRTL">
 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; &amp; padding-left: 6px;</pre>
 254
 255 <div class="grid directionRTL">
 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; &amp; padding-left: 6px;</pre>
 261
 262 <div class="grid directionRTL">
 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; &amp; padding-right: 3px;</pre>
 268
 269 <div class="grid directionRTL">
 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; &amp; padding-right: 3px;</pre>
 275
 276 <div class="grid directionRTL">
 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; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
 282
 283 <div class="grid directionRTL">
 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; &amp; padding-left: 6px; &amp; padding-right: 3px;</pre>
 289
 290 <div class="grid directionRTL">
 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; &amp; border-left-width: 2px;</pre>
 296
 297 <div class="grid directionRTL">
 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; &amp; border-left-width: 2px;</pre>
 303
 304 <div class="grid directionRTL">
 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; &amp; border-right-width: 4px;</pre>
 310
 311 <div class="grid directionRTL">
 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; &amp; border-right-width: 4px;</pre>
 317
 318 <div class="grid directionRTL">
 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; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 324
 325 <div class="grid directionRTL">
 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; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 331
 332 <div class="grid directionRTL">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 338
 339 <div class="grid directionRTL">
 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; &amp; margin-left: 5px; &amp; margin-right: 10px; &amp; padding-left: 6px; &amp; padding-right: 3px; &amp; border-left-width: 2px; &amp; border-right-width: 4px;</pre>
 345
 346 <div class="grid directionRTL">
 347   <div class="minWidth60 marginLeft5 marginRight10 paddingLeft6 paddingRight3 borderLeft2 borderRight4" data-expected-width="75"></div>
 348   <div data-expected-width="90"></div>
 349 </div>