1 <!doctype html> 2 <!-- 3 @license 4 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 5 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 8 Code distributed by Google as part of the polymer project is also 9 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <title>iron-flex-layout tests</title> 14 15 <meta charset="utf-8"> 16 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 17 <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> 18 19 <script src="../../webcomponentsjs/webcomponents.js"></script> 20 <script src="../../web-component-tester/browser.js"></script> 21 <link rel="import" href="../iron-flex-layout.html"> 22 23 <style is="custom-style"> 24 body { 25 margin: 0; 26 padding: 0; 27 } 28 .container { 29 width: 300px; 30 min-height: 50px; 31 background-color: #ccc; 32 } 33 .container > div { 34 width: 50px; 35 min-height: 50px; /* so that it can grow in vertical layouts. */ 36 } 37 /* IE11 does not calculate flex proportions correctly in a vertical 38 * layout if the children just have a min-height. For those tests, 39 * use a fixed height instead. */ 40 .container > div.fixed-height { 41 min-height: 0; 42 height: 50px; 43 } 44 .relative { @apply(--layout-relative); } 45 .container.relative > div { 46 min-width: 50px; 47 min-height: 50px; 48 width: inherit; 49 } 50 .container.small { width: 120px; } 51 .container.tall { height: 300px; } 52 53 #c1 { background-color: #E91E63; } 54 #c2 { background-color: #03A9F4; } 55 #c3 { background-color: #CDDC39; } 56 #c4 { background-color: #03A9F4; } 57 #c5 { background-color: #E91E63; } 58 59 .horizontal { @apply(--layout-horizontal); } 60 .horizontal-reverse { @apply(--layout-horizontal-reverse); } 61 .vertical { @apply(--layout-vertical); } 62 .vertical-reverse { @apply(--layout-vertical-reverse); } 63 .wrap { @apply(--layout-wrap); } 64 .wrap-reverse { @apply(--layout-wrap-reverse); } 65 .flex { @apply(--layout-flex); } 66 .flex2 { @apply(--layout-flex-2); } 67 .flex3 { @apply(--layout-flex-3); } 68 .center { @apply(--layout-center); } 69 .start { @apply(--layout-start); } 70 .end { @apply(--layout-end); } 71 .start-justified { @apply(--layout-start-justified); } 72 .center-justified { @apply(--layout-center-justified); } 73 .end-justified { @apply(--layout-end-justified); } 74 .justified { @apply(--layout-justified); } 75 .around-justified { @apply(--layout-around-justified); } 76 .fit { @apply(--layout-fit); } 77 .start-aligned { @apply(--layout-start-aligned); } 78 .end-aligned { @apply(--layout-end-aligned); } 79 .center-aligned { @apply(--layout-center-aligned); } 80 .between-aligned { @apply(--layout-between-aligned); } 81 .around-aligned { @apply(--layout-around-aligned); } 82 83 </style> 84 </head> 85 <body> 86 <test-fixture id="basic"> 87 <template> 88 <div class="container"> 89 <div id="c1"></div> 90 <div id="c2"></div> 91 <div id="c3"></div> 92 </div> 93 </template> 94 </test-fixture> 95 96 <test-fixture id="flex"> 97 <template> 98 <div class="container"> 99 <div id="c1" class="fixed-height"></div> 100 <div id="c2" class="fixed-height"></div> 101 <div id="c3" class="fixed-height"></div> 102 </div> 103 </template> 104 </test-fixture> 105 106 <test-fixture id="single-child"> 107 <template> 108 <div class="container"> 109 <div id="c1"></div> 110 </div> 111 </template> 112 </test-fixture> 113 114 <test-fixture id="positioning"> 115 <template> 116 <div class="container relative"> 117 <div id="c1"></div> 118 </div> 119 </template> 120 </test-fixture> 121 122 <test-fixture id="align-content"> 123 <template> 124 <div class="container small tall horizontal flex wrap"> 125 <div id="c1"></div> 126 <div id="c2"></div> 127 <div id="c3"></div> 128 <div id="c4"></div> 129 <div id="c5"></div> 130 </div> 131 </template> 132 </test-fixture> 133 <script> 134 function positionEquals(node, top, bottom, left, right) { 135 var rect = node.getBoundingClientRect(); 136 return rect.top === top && rect.bottom === bottom && 137 rect.left === left && rect.right === right; 138 } 139 suite('basic layout', function() { 140 var container; 141 142 setup(function() { 143 container = fixture('basic'); 144 }); 145 146 test('--layout-horizontal', function() { 147 container.classList.add('horizontal'); 148 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 149 // |c1| |c2| |c3| 150 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 151 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 152 assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok"); 153 }); 154 155 test('--layout-horizontal-reverse', function() { 156 container.classList.add('horizontal-reverse'); 157 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 158 // |c3| |c2| |c1| 159 assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); 160 assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok"); 161 assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok"); 162 }); 163 164 test('--layout-vertical', function() { 165 container.classList.add('vertical'); 166 assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); 167 // vertically, |c1| |c2| |c3| 168 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 169 assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); 170 assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok"); 171 }); 172 173 test('--layout-vertical-reverse', function() { 174 container.classList.add('vertical-reverse'); 175 assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); 176 // vertically, |c3| |c2| |c1| 177 assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok"); 178 assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); 179 assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok"); 180 }); 181 182 test('--layout-wrap', function() { 183 container.classList.add('horizontal'); 184 container.classList.add('wrap'); 185 container.classList.add('small'); 186 assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok"); 187 // |c1| |c2| 188 // |c3| 189 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 190 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 191 assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); 192 }); 193 194 test('--layout-wrap-reverse', function() { 195 container.classList.add('horizontal'); 196 container.classList.add('wrap-reverse'); 197 container.classList.add('small'); 198 assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok"); 199 // |c3| 200 // |c1| |c2| 201 assert.isTrue(positionEquals(c1, 50, 100, 0, 50), "child 1 position ok"); 202 assert.isTrue(positionEquals(c2, 50, 100, 50, 100), "child 2 position ok"); 203 assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok"); 204 }); 205 }); 206 207 suite('flex', function() { 208 var container; 209 210 setup(function() { 211 container = fixture('flex'); 212 }); 213 214 test('--layout-flex child in a horizontal layout', function() { 215 container.classList.add('horizontal'); 216 c2.classList.add('flex'); 217 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 218 // |c1| | c2 | |c3| 219 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 220 assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok"); 221 assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); 222 }); 223 224 test('--layout-flex child in a vertical layout', function() { 225 container.classList.add('vertical'); 226 container.classList.add('tall'); 227 c2.classList.add('flex'); 228 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 229 // vertically, |c1| | c2 | |c3| 230 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 231 assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok"); 232 assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok"); 233 }); 234 235 test('--layout-flex, --layout-flex-2, --layout-flex-3 in a horizontal layout', function() { 236 container.classList.add('horizontal'); 237 c1.classList.add('flex'); 238 c2.classList.add('flex2'); 239 c3.classList.add('flex3'); 240 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 241 // |c1| | c2 | | c3 | 242 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 243 assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok"); 244 assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok"); 245 }); 246 247 test('--layout-flex, --layout-flex-2, --layout-flex-3 in a vertical layout', function() { 248 container.classList.add('vertical'); 249 container.classList.add('tall'); 250 c1.classList.add('flex'); 251 c2.classList.add('flex2'); 252 c3.classList.add('flex3'); 253 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 254 // vertically, |c1| | c2 | | c3 | 255 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 256 assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok"); 257 assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok"); 258 }); 259 }); 260 261 suite('alignment', function() { 262 var container; 263 264 setup(function() { 265 container = fixture('single-child'); 266 container.classList.add('horizontal'); 267 }); 268 269 test('stretch (default)', function() { 270 container.classList.add('tall'); 271 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 272 assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok"); 273 }); 274 275 test('--layout-center', function() { 276 container.classList.add('center'); 277 container.classList.add('tall'); 278 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 279 var center = (300 - 50) / 2; 280 assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok"); 281 }); 282 283 test('--layout-start', function() { 284 container.classList.add('start'); 285 container.classList.add('tall'); 286 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 287 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 288 }); 289 290 test('--layout-end', function() { 291 container.classList.add('end'); 292 container.classList.add('tall'); 293 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 294 assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok"); 295 }); 296 297 test('--layout-start-justified', function() { 298 container.classList.add('start-justified'); 299 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 300 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 301 }); 302 303 test('--layout-end-justified', function() { 304 container.classList.add('end-justified'); 305 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 306 assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); 307 }); 308 309 test('--layout-center-justified', function() { 310 container.classList.add('center-justified'); 311 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 312 var center = (300 - 50) / 2; 313 assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok"); 314 }); 315 }); 316 317 suite('justification', function() { 318 var container; 319 320 setup(function() { 321 container = fixture('flex'); 322 container.classList.add('horizontal'); 323 }); 324 325 test('--layout-justified', function() { 326 container.classList.add('justified'); 327 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 328 var center = (300 - 50) / 2; 329 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 330 assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok"); 331 assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); 332 }); 333 334 test('--layout-around-justified', function() { 335 container.classList.add('around-justified'); 336 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 337 var spacing = (300 - 50 * 3) / 6; 338 // Every child gets `spacing` on its left and right side. 339 assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok"); 340 var end = spacing + 50 + spacing; 341 assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok"); 342 end = end + spacing + 50 + spacing; 343 assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok"); 344 }); 345 }); 346 347 suite('align-content', function() { 348 var container; 349 350 setup(function() { 351 container = fixture('align-content'); 352 }); 353 354 test('default is stretch', function() { 355 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 356 assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok"); 357 assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok"); 358 assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok"); 359 assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok"); 360 assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok"); 361 }); 362 363 test('--layout-start-aligned', function() { 364 container.classList.add('start-aligned'); 365 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 366 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 367 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 368 assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); 369 assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok"); 370 assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok"); 371 }); 372 373 test('--layout-end-aligned', function() { 374 container.classList.add('end-aligned'); 375 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 376 assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok"); 377 assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok"); 378 assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok"); 379 assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok"); 380 assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); 381 }); 382 383 test('--layout-center-aligned', function() { 384 container.classList.add('center-aligned'); 385 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 386 var center = (300 - 50) / 2; 387 assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok"); 388 assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok"); 389 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 390 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 391 assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok"); 392 }); 393 394 test('--layout-between-aligned', function() { 395 container.classList.add('between-aligned'); 396 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 397 var center = (300 - 50) / 2; 398 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 399 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 400 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 401 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 402 assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); 403 }); 404 405 test('--layout-around-aligned', function() { 406 container.classList.add('around-aligned'); 407 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 408 var center = (300 - 50) / 2; 409 assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok"); 410 assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok"); 411 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 412 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 413 assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok"); 414 }); 415 }); 416 417 suite('positioning', function() { 418 var container; 419 420 setup(function() { 421 container = fixture('positioning'); 422 container.classList.add('tall'); 423 424 }); 425 426 test('--layout-fit', function() { 427 c1.classList.add('fit'); 428 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 429 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok"); 430 }); 431 }); 432 </script> 433 </body> 434 </html> 435
