test_flex_lines.html (9340B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> 6 <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> 7 <style> 8 f { 9 display: flex; 10 background-color: grey; 11 font: 12px sans-serif; 12 width: 800px; 13 height: 42px; 14 margin-bottom: 5px; 15 } 16 17 .withZ::after { 18 background-color: pink; 19 content: "Z"; 20 width: 100px; 21 height: 10px; 22 } 23 24 .wrap { 25 flex-wrap: wrap; 26 } 27 28 .wrapReverse { 29 flex-wrap: wrap-reverse; 30 } 31 32 b { 33 background-color: gold; 34 min-width: 100px; 35 height: 20px; 36 flex-grow: 1; 37 } 38 b::after { 39 content: "B"; 40 } 41 42 c { 43 background-color: yellow; 44 width: 200px; 45 height: 15px; 46 } 47 c::after { 48 content: "C"; 49 } 50 51 d { 52 background-color: orange; 53 width: 300px; 54 height: 10px; 55 } 56 d::after { 57 content: "D"; 58 } 59 60 e { 61 background-color: silver; 62 width: 300px; 63 height: 10px; 64 flex-shrink: 2; 65 } 66 e::after { 67 content: "E"; 68 } 69 </style> 70 71 <script> 72 "use strict"; 73 74 SimpleTest.waitForExplicitFinish(); 75 76 function testLineMatchesExpectedValues(line, values, lineIndex, flexIndex) { 77 if (typeof(values.growthState) != "undefined") { 78 is(line.growthState, values.growthState, "Flex index " + flexIndex + " line index " + lineIndex + " has expected growthState."); 79 } 80 81 if (typeof(values.crossStart) != "undefined") { 82 is(line.crossStart, values.crossStart, "Flex index " + flexIndex + " line index " + lineIndex + " has expected crossStart."); 83 } 84 85 if (typeof(values.crossSize) != "undefined") { 86 is(line.crossSize, values.crossSize, "Flex index " + flexIndex + " line index " + lineIndex + " has expected crossSize."); 87 } 88 89 if (typeof(values.itemCount) != "undefined") { 90 is(line.getItems().length, values.itemCount, "Flex index " + flexIndex + " line index " + lineIndex + " has expected number of items."); 91 } 92 } 93 94 function runTests() { 95 let expectedValues = [ 96 // items don't fill container, no grow, shrink, or min-width 97 [{ crossStart: 0, 98 crossSize: 42, 99 itemCount: 2, 100 growthState: "growing" }], 101 [{ crossStart: 0, 102 crossSize: 42, 103 itemCount: 3, 104 growthState: "growing" }], 105 106 // items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center --> 107 [{ crossStart: 13.5, 108 crossSize: 15, 109 itemCount: 2, 110 growthState: "growing" }], 111 [{ crossStart: 13.5, 112 crossSize: 15, 113 itemCount: 3, 114 growthState: "growing" }], 115 116 // items don't fill container, with grow 117 [{ crossStart: 0, 118 crossSize: 42, 119 itemCount: 3, 120 growthState: "growing" }], 121 [{ crossStart: 0, 122 crossSize: 42, 123 itemCount: 4, 124 growthState: "growing" }], 125 126 // items overfill container, with min-width, and sometimes with wrap 127 [{ crossStart: 0, 128 crossSize: 42, 129 itemCount: 5, 130 growthState: "shrinking" }], 131 [{ crossStart: 0, 132 crossSize: 21, 133 itemCount: 3, 134 growthState: "growing" }, 135 { crossStart: 21, 136 crossSize: 21, 137 itemCount: 2, 138 growthState: "growing" }], 139 [{ crossStart: 0, 140 crossSize: 42, 141 itemCount: 6, 142 growthState: "shrinking" }], 143 [{ crossStart: 0, 144 crossSize: 21, 145 itemCount: 3, 146 growthState: "growing" }, 147 { crossStart: 21, 148 crossSize: 21, 149 itemCount: 3, 150 growthState: "growing" }], 151 152 // items overfill container, with shrink and sometimes with wrap 153 [{ crossStart: 0, 154 crossSize: 42, 155 itemCount: 3, 156 growthState: "shrinking" }], 157 [{ crossStart: 0, 158 crossSize: 21, 159 itemCount: 2, 160 growthState: "growing" }, 161 { crossStart: 21, 162 crossSize: 21, 163 itemCount: 1, 164 growthState: "growing" }], 165 [{ crossStart: 0, 166 crossSize: 42, 167 itemCount: 4, 168 growthState: "shrinking" }], 169 [{ crossStart: 0, 170 crossSize: 21, 171 itemCount: 2, 172 growthState: "growing" }, 173 { crossStart: 21, 174 crossSize: 21, 175 itemCount: 2, 176 growthState: "growing" }], 177 178 // items overfill container, with wrap and different types of align-content 179 [{ crossStart: 0, 180 crossSize: 26, 181 itemCount: 3 }, 182 { crossStart: 26, 183 crossSize: 16, 184 itemCount: 1 }], 185 [{ crossStart: 0, 186 crossSize: 20, 187 itemCount: 3 }, 188 { crossStart: 20, 189 crossSize: 10, 190 itemCount: 1 }], 191 [{ crossStart: 12, 192 crossSize: 20, 193 itemCount: 3 }, 194 { crossStart: 32, 195 crossSize: 10, 196 itemCount: 1 }], 197 [{ crossStart: 6, 198 crossSize: 20, 199 itemCount: 3 }, 200 { crossStart: 26, 201 crossSize: 10, 202 itemCount: 1 }], 203 [{ crossStart: 0, 204 crossSize: 20, 205 itemCount: 3 }, 206 { crossStart: 32, 207 crossSize: 10, 208 itemCount: 1 }], 209 [{ crossStart: 3, 210 crossSize: 20, 211 itemCount: 3 }, 212 { crossStart: 29, 213 crossSize: 10, 214 itemCount: 1 }], 215 216 // items overfill container, with wrap-reverse and different types of align-content 217 [{ crossStart: 0, 218 crossSize: 26, 219 itemCount: 3 }, 220 { crossStart: 26, 221 crossSize: 16, 222 itemCount: 2 }], 223 [{ crossStart: 0, 224 crossSize: 20, 225 itemCount: 3 }, 226 { crossStart: 20, 227 crossSize: 10, 228 itemCount: 2 }], 229 [{ crossStart: 12, 230 crossSize: 20, 231 itemCount: 3 }, 232 { crossStart: 32, 233 crossSize: 10, 234 itemCount: 2 }], 235 [{ crossStart: 6, 236 crossSize: 20, 237 itemCount: 3 }, 238 { crossStart: 26, 239 crossSize: 10, 240 itemCount: 2 }], 241 [{ crossStart: 0, 242 crossSize: 20, 243 itemCount: 3 }, 244 { crossStart: 32, 245 crossSize: 10, 246 itemCount: 2 }], 247 [{ crossStart: 3, 248 crossSize: 20, 249 itemCount: 3 }, 250 { crossStart: 29, 251 crossSize: 10, 252 itemCount: 2 }], 253 254 // other strange types of flex containers 255 [{ itemCount: 3 }], 256 [{ crossStart: 100, 257 crossSize: 300, 258 mainSize: 40, 259 itemCount: 3 }, 260 { crossStart: 400, 261 crossSize: 300, 262 mainSize: 20, 263 itemCount: 2 }], 264 ]; 265 266 let children = document.body.children; 267 is(children.length, expectedValues.length, "Document has expected number of flex containers."); 268 269 for (let i = 0; i < children.length; ++i) { 270 let flex = children.item(i).getAsFlexContainer(); 271 ok(flex, "Document child index " + i + " is a flex container."); 272 if (flex) { 273 let values = expectedValues[i]; 274 275 let lines = flex.getLines(); 276 is(lines.length, values.length, "Flex index " + i + " has expected number of lines."); 277 278 for (let j = 0; j < lines.length; ++j) { 279 testLineMatchesExpectedValues(lines[j], values[j], j, i); 280 } 281 } 282 } 283 284 SimpleTest.finish(); 285 } 286 </script> 287 </head> 288 289 <body onLoad="runTests();"> 290 291 <!-- items don't fill container, no grow, shrink, or min-width --> 292 <f><c></c><d></d></f> 293 <f class="withZ"><c></c><d></d></f> 294 295 <!-- items don't fill container, no grow, shrink, or min-width, with wrap and align-content:center --> 296 <f class="wrap" style="align-content:center"><c></c><d></d></f> 297 <f class="withZ wrap" style="align-content:center"><c></c><d></d></f> 298 299 <!-- items don't fill container, with grow --> 300 <f><b></b><c></c><d></d></f> 301 <f class="withZ"><b></b><c></c><d></d></f> 302 303 <!-- items overfill container, with min-width, and sometimes with wrap --> 304 <f><b></b><d></d><d></d><d></d><b></b></f> 305 <f class="wrap"><b></b><d></d><d></d><d></d><b></b></f> 306 <f class="withZ"><b></b><d></d><d></d><d></d><b></b></f> 307 <f class="wrap withZ"><b></b><d></d><d></d><d></d><b></b></f> 308 309 <!-- items overfill container, with shrink and sometimes with wrap --> 310 <f><d></d><d></d><e></e></f> 311 <f class="wrap"><d></d><d></d><e></e></f> 312 <f class="withZ"><d></d><d></d><e></e></f> 313 <f class="wrap withZ"><d></d><d></d><e></e></f> 314 315 <!-- items overfill container, with wrap and different types of align-content --> 316 <f class="wrap"><b></b><c></c><d></d><e></e></f> 317 <f class="wrap" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f> 318 <f class="wrap" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f> 319 <f class="wrap" style="align-content:center"><b></b><c></c><d></d><e></e></f> 320 <f class="wrap" style="align-content:space-between"><b></b><c></c><d></d><e></e></f> 321 <f class="wrap" style="align-content:space-around"><b></b><c></c><d></d><e></e></f> 322 323 <!-- items overfill container, with wrap-reverse and different types of align-content --> 324 <f class="wrapReverse withZ"><b></b><c></c><d></d><e></e></f> 325 <f class="wrapReverse withZ" style="align-content:flex-start"><b></b><c></c><d></d><e></e></f> 326 <f class="wrapReverse withZ" style="align-content:flex-end"><b></b><c></c><d></d><e></e></f> 327 <f class="wrapReverse withZ" style="align-content:center"><b></b><c></c><d></d><e></e></f> 328 <f class="wrapReverse withZ" style="align-content:space-between"><b></b><c></c><d></d><e></e></f> 329 <f class="wrapReverse withZ" style="align-content:space-around"><b></b><c></c><d></d><e></e></f> 330 331 <!-- other strange types of flex containers --> 332 <f style="overflow:scroll"><d></d><d></d><e></e></f> 333 <f class="wrap" style="flex-direction:column; align-content:center"><c></c><d></d><c></c><d></d><e></e></f> 334 335 </body> 336 </html>