align-content-wrap-003.html (16204B)
1 <!DOCTYPE html> 2 <link rel="help" href="https://drafts.csswg.org/css-flexbox/#propdef-align-content" /> 3 <title>css-flexbox: Tests align-content with flex-wrap: wrap</title> 4 <style> 5 .flexbox { 6 display: flex; 7 background-color: #aaa; 8 position: relative; 9 flex-wrap: wrap; 10 } 11 12 .horizontal { 13 width: 200px; 14 height: 120px; 15 } 16 .horizontal > div { 17 min-height: 20px; 18 } 19 .horizontal > :nth-child(1) { 20 width: 100px; 21 min-height: 10px; 22 } 23 .horizontal > :nth-child(2) { 24 width: 100px; 25 } 26 .horizontal > :nth-child(3) { 27 width: 200px; 28 } 29 .horizontal > :nth-child(4) { 30 width: 50px; 31 } 32 33 .vertical-rl { 34 writing-mode: vertical-rl; 35 width: 120px; 36 height: 20px; 37 } 38 .vertical-rl > div { 39 min-width: 20px; 40 } 41 .vertical-rl > :nth-child(1) { 42 height: 10px; 43 min-width: 10px; 44 } 45 .vertical-rl > :nth-child(2) { 46 height: 10px; 47 } 48 .vertical-rl > :nth-child(3) { 49 height: 20px; 50 } 51 .vertical-rl > :nth-child(4) { 52 height: 5px; 53 } 54 55 .flexbox :nth-child(1) { 56 background-color: lightblue; 57 } 58 .flexbox :nth-child(2) { 59 background-color: lightgreen; 60 } 61 .flexbox :nth-child(3) { 62 background-color: pink; 63 } 64 .flexbox :nth-child(4) { 65 background-color: yellow; 66 } 67 </style> 68 <script src="/resources/testharness.js"></script> 69 <script src="/resources/testharnessreport.js"></script> 70 <script src="/resources/check-layout-th.js"></script> 71 <body onload="checkLayout('.flexbox')"> 72 <div id=log></div> 73 <p>Test to make sure that align-content works properly.</p> 74 75 <div data-expected-height="120" class="flexbox horizontal"> 76 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> 77 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> 78 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> 79 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> 80 </div> 81 82 <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-start"> 83 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 84 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 85 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 86 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 87 </div> 88 89 <div data-expected-height="120" class="flexbox horizontal" style="align-content: flex-end"> 90 <div data-offset-x="0" data-offset-y="60" data-expected-height="20"></div> 91 <div data-offset-x="100" data-offset-y="60" data-expected-height="20"></div> 92 <div data-offset-x="0" data-offset-y="80" data-expected-height="20"></div> 93 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> 94 </div> 95 96 <div data-expected-height="120" class="flexbox horizontal" style="align-content: center"> 97 <div data-offset-x="0" data-offset-y="30" data-expected-height="20"></div> 98 <div data-offset-x="100" data-offset-y="30" data-expected-height="20"></div> 99 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 100 <div data-offset-x="0" data-offset-y="70" data-expected-height="20"></div> 101 </div> 102 103 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-between"> 104 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 105 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 106 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 107 <div data-offset-x="0" data-offset-y="100" data-expected-height="20"></div> 108 </div> 109 110 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-evenly"> 111 <div data-offset-x="0" data-offset-y="15" data-expected-height="20"></div> 112 <div data-offset-x="100" data-offset-y="15" data-expected-height="20"></div> 113 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 114 <div data-offset-x="0" data-offset-y="85" data-expected-height="20"></div> 115 </div> 116 117 <div data-expected-height="120" class="flexbox horizontal" style="align-content: space-around"> 118 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> 119 <div data-offset-x="100" data-offset-y="10" data-expected-height="20"></div> 120 <div data-offset-x="0" data-offset-y="50" data-expected-height="20"></div> 121 <div data-offset-x="0" data-offset-y="90" data-expected-height="20"></div> 122 </div> 123 124 <div data-expected-height="120" class="flexbox horizontal" style="align-content: stretch"> 125 <div data-offset-x="0" data-offset-y="0" data-expected-height="40"></div> 126 <div data-offset-x="100" data-offset-y="0" data-expected-height="40"></div> 127 <div data-offset-x="0" data-offset-y="40" data-expected-height="40"></div> 128 <div data-offset-x="0" data-offset-y="80" data-expected-height="40"></div> 129 </div> 130 131 <!-- Negative overflow goes out the top. --> 132 <div data-expected-height="30" class="flexbox horizontal" style="align-content: flex-end; height: 30px"> 133 <div data-offset-x="0" data-offset-y="-30" data-expected-height="20"></div> 134 <div data-offset-x="100" data-offset-y="-30" data-expected-height="20"></div> 135 <div data-offset-x="0" data-offset-y="-10" data-expected-height="20"></div> 136 <div data-offset-x="0" data-offset-y="10" data-expected-height="20"></div> 137 </div> 138 139 <!-- If we overflow, we should true center. --> 140 <div data-expected-height="30" class="flexbox horizontal" style="align-content: center; height: 30px"> 141 <div data-offset-x="0" data-offset-y="-15" data-expected-height="20"></div> 142 <div data-offset-x="100" data-offset-y="-15" data-expected-height="20"></div> 143 <div data-offset-x="0" data-offset-y="5" data-expected-height="20"></div> 144 <div data-offset-x="0" data-offset-y="25" data-expected-height="20"></div> 145 </div> 146 147 <!-- If we overflow, we should be the same as flex-start. --> 148 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> 149 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 150 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 151 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 152 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 153 </div> 154 155 <!-- If we overflow, we should safe center. --> 156 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 157 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 158 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 159 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 160 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 161 </div> 162 163 <!-- If we overflow, we should true center. --> 164 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> 165 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 166 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 167 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 168 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 169 </div> 170 171 <!-- Stretch should only grow, not shrink. --> 172 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 173 <div data-offset-x="0" data-offset-y="0" data-expected-height="20"></div> 174 <div data-offset-x="100" data-offset-y="0" data-expected-height="20"></div> 175 <div data-offset-x="0" data-offset-y="20" data-expected-height="20"></div> 176 <div data-offset-x="0" data-offset-y="40" data-expected-height="20"></div> 177 </div> 178 179 <!-- 0 lines should not crash. --> 180 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> 181 </div> 182 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 183 </div> 184 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> 185 </div> 186 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 187 </div> 188 189 <!-- 1 line should not crash. --> 190 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-between; height: 30px"> 191 <div data-offset-x="0" data-offset-y="0" data-expected-height="10"></div> 192 </div> 193 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-around; height: 30px"> 194 <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div> 195 </div> 196 <div data-expected-height="30" class="flexbox horizontal" style="align-content: space-evenly; height: 30px"> 197 <div data-offset-x="0" data-offset-y="10" data-expected-height="10"></div> 198 </div> 199 <div data-expected-height="30" class="flexbox horizontal" style="align-content: stretch; height: 30px"> 200 <div data-offset-x="0" data-offset-y="0" data-expected-height="30"></div> 201 </div> 202 203 204 <div data-expected-width="120" class="flexbox vertical-rl"> 205 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> 206 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> 207 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> 208 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> 209 </div> 210 211 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-start"> 212 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> 213 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> 214 <div data-offset-x="80" data-offset-y="0" data-expected-width="20"></div> 215 <div data-offset-x="60" data-offset-y="0" data-expected-width="20"></div> 216 </div> 217 218 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: flex-end"> 219 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> 220 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> 221 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> 222 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> 223 </div> 224 225 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: center"> 226 <div data-offset-x="70" data-offset-y="0" data-expected-width="20"></div> 227 <div data-offset-x="70" data-offset-y="10" data-expected-width="20"></div> 228 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> 229 <div data-offset-x="30" data-offset-y="0" data-expected-width="20"></div> 230 </div> 231 232 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-between"> 233 <div data-offset-x="100" data-offset-y="0" data-expected-width="20"></div> 234 <div data-offset-x="100" data-offset-y="10" data-expected-width="20"></div> 235 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> 236 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> 237 </div> 238 239 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-around"> 240 <div data-offset-x="90" data-offset-y="0" data-expected-width="20"></div> 241 <div data-offset-x="90" data-offset-y="10" data-expected-width="20"></div> 242 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> 243 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 244 </div> 245 246 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: space-evenly"> 247 <div data-offset-x="85" data-offset-y="0" data-expected-width="20"></div> 248 <div data-offset-x="85" data-offset-y="10" data-expected-width="20"></div> 249 <div data-offset-x="50" data-offset-y="0" data-expected-width="20"></div> 250 <div data-offset-x="15" data-offset-y="0" data-expected-width="20"></div> 251 </div> 252 253 <div data-expected-width="120" class="flexbox vertical-rl" style="align-content: stretch"> 254 <div data-offset-x="80" data-offset-y="0" data-expected-width="40"></div> 255 <div data-offset-x="80" data-offset-y="10" data-expected-width="40"></div> 256 <div data-offset-x="40" data-offset-y="0" data-expected-width="40"></div> 257 <div data-offset-x="0" data-offset-y="0" data-expected-width="40"></div> 258 </div> 259 260 <!-- Negative overflow goes out the right. --> 261 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: flex-end; width: 30px;"> 262 <div data-offset-x="40" data-offset-y="0" data-expected-width="20"></div> 263 <div data-offset-x="40" data-offset-y="10" data-expected-width="20"></div> 264 <div data-offset-x="20" data-offset-y="0" data-expected-width="20"></div> 265 <div data-offset-x="0" data-offset-y="0" data-expected-width="20"></div> 266 </div> 267 268 <!-- If we overflow, we should true center. --> 269 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: center; width: 30px;"> 270 <div data-offset-x="25" data-offset-y="0" data-expected-width="20"></div> 271 <div data-offset-x="25" data-offset-y="10" data-expected-width="20"></div> 272 <div data-offset-x="5" data-offset-y="0" data-expected-width="20"></div> 273 <div data-offset-x="-15" data-offset-y="0" data-expected-width="20"></div> 274 </div> 275 276 <!-- If we overflow, we should be the same as flex-start. --> 277 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px;"> 278 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 279 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> 280 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> 281 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> 282 </div> 283 284 <!-- If we overflow, we should safe center. --> 285 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px;"> 286 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 287 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> 288 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> 289 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> 290 </div> 291 292 <!-- If we overflow, we should true center. --> 293 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px;"> 294 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 295 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> 296 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> 297 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> 298 </div> 299 300 <!-- Stretch should only grow, not shrink. --> 301 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px;"> 302 <div data-offset-x="10" data-offset-y="0" data-expected-width="20"></div> 303 <div data-offset-x="10" data-offset-y="10" data-expected-width="20"></div> 304 <div data-offset-x="-10" data-offset-y="0" data-expected-width="20"></div> 305 <div data-offset-x="-30" data-offset-y="0" data-expected-width="20"></div> 306 </div> 307 308 <!-- 0 lines should not crash. --> 309 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> 310 </div> 311 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> 312 </div> 313 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> 314 </div> 315 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> 316 </div> 317 318 <!-- 1 line should not crash. --> 319 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-between; width: 30px"> 320 <div data-offset-x="20" data-offset-y="0" data-expected-width="10"></div> 321 </div> 322 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-around; width: 30px"> 323 <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div> 324 </div> 325 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: space-evenly; width: 30px"> 326 <div data-offset-x="10" data-offset-y="0" data-expected-width="10"></div> 327 </div> 328 <div data-expected-width="30" class="flexbox vertical-rl" style="align-content: stretch; width: 30px"> 329 <div data-offset-x="0" data-offset-y="0" data-expected-width="30"></div> 330 </div>