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-classes 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-classes.html"> 22 23 <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning"> 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 .container.relative > div { 45 min-width: 50px; 46 min-height: 50px; 47 width: inherit; 48 } 49 .container.small { width: 120px; } 50 .container.tall { height: 300px; } 51 52 #c1 { background-color: #E91E63; } 53 #c2 { background-color: #03A9F4; } 54 #c3 { background-color: #CDDC39; } 55 #c4 { background-color: #03A9F4; } 56 #c5 { background-color: #E91E63; } 57 </style> 58 </head> 59 <body> 60 <test-fixture id="basic"> 61 <template> 62 <div class="container layout"> 63 <div id="c1"></div> 64 <div id="c2"></div> 65 <div id="c3"></div> 66 </div> 67 </template> 68 </test-fixture> 69 70 <test-fixture id="flex"> 71 <template> 72 <div class="container layout"> 73 <div id="c1" class="fixed-height"></div> 74 <div id="c2" class="fixed-height"></div> 75 <div id="c3" class="fixed-height"></div> 76 </div> 77 </template> 78 </test-fixture> 79 80 <test-fixture id="single-child"> 81 <template> 82 <div class="container layout"> 83 <div id="c1"></div> 84 </div> 85 </template> 86 </test-fixture> 87 88 <test-fixture id="positioning"> 89 <template> 90 <div class="container layout relative"> 91 <div id="c1"></div> 92 </div> 93 </template> 94 </test-fixture> 95 96 <test-fixture id="align-content"> 97 <template> 98 <div class="container layout"> 99 <div id="c1"></div> 100 <div id="c2"></div> 101 <div id="c3"></div> 102 <div id="c4"></div> 103 <div id="c5"></div> 104 </div> 105 </template> 106 </test-fixture> 107 <script> 108 function positionEquals(node, top, bottom, left, right) { 109 var rect = node.getBoundingClientRect(); 110 return rect.top === top && rect.bottom === bottom && 111 rect.left === left && rect.right === right; 112 } 113 suite('basic layout', function() { 114 var container; 115 116 setup(function() { 117 container = fixture('basic'); 118 }); 119 120 test('layout-horizontal', function() { 121 container.classList.add('horizontal'); 122 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 123 // |c1| |c2| |c3| 124 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 125 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 126 assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok"); 127 }); 128 129 test('layout-horizontal-reverse', function() { 130 container.classList.add('horizontal-reverse'); 131 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 132 // |c3| |c2| |c1| 133 assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); 134 assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok"); 135 assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok"); 136 }); 137 138 test('layout-vertical', function() { 139 container.classList.add('vertical'); 140 assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); 141 // vertically, |c1| |c2| |c3| 142 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 143 assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); 144 assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok"); 145 }); 146 147 test('layout-vertical-reverse', function() { 148 container.classList.add('vertical-reverse'); 149 assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); 150 // vertically, |c3| |c2| |c1| 151 assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok"); 152 assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); 153 assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok"); 154 }); 155 156 test('layout-wrap', function() { 157 container.classList.add('horizontal'); 158 container.classList.add('wrap'); 159 container.classList.add('small'); 160 assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok"); 161 // |c1| |c2| 162 // |c3| 163 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 164 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 165 assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); 166 }); 167 168 test('layout-wrap-reverse', function() { 169 container.classList.add('horizontal-reverse'); 170 container.classList.add('wrap-reverse'); 171 container.style.width = '100px'; 172 assert.isTrue(positionEquals(container, 0, 100, 0, 100), "container position ok"); 173 // |c3| 174 // |c2| |c1| 175 assert.isTrue(positionEquals(c1, 50, 100, 50, 100), "child 1 position ok"); 176 assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); 177 assert.isTrue(positionEquals(c3, 0, 50, 50, 100), "child 3 position ok"); 178 }); 179 }); 180 181 suite('flex', function() { 182 var container; 183 184 setup(function() { 185 container = fixture('flex'); 186 }); 187 188 test('layout-flex child in a horizontal layout', function() { 189 container.classList.add('horizontal'); 190 c2.classList.add('flex'); 191 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 192 // |c1| | c2 | |c3| 193 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 194 assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok"); 195 assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); 196 }); 197 198 test('layout-flex child in a vertical layout', function() { 199 container.classList.add('vertical'); 200 container.classList.add('tall'); 201 c2.classList.add('flex'); 202 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 203 // vertically, |c1| | c2 | |c3| 204 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 205 assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok"); 206 assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok"); 207 }); 208 209 test('layout-flex, layout-flex-2, layout-flex-3 in a horizontal layout', function() { 210 container.classList.add('horizontal'); 211 c1.classList.add('flex'); 212 c2.classList.add('flex-2'); 213 c3.classList.add('flex-3'); 214 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 215 // |c1| | c2 | | c3 | 216 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 217 assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok"); 218 assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok"); 219 }); 220 221 test('layout-flex, layout-flex-2, layout-flex-3 in a vertical layout', function() { 222 container.classList.add('vertical'); 223 container.classList.add('tall'); 224 c1.classList.add('flex'); 225 c2.classList.add('flex-2'); 226 c3.classList.add('flex-3'); 227 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 228 // vertically, |c1| | c2 | | c3 | 229 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 230 assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok"); 231 assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok"); 232 }); 233 }); 234 235 suite('alignment', function() { 236 var container; 237 238 setup(function() { 239 container = fixture('single-child'); 240 container.classList.add('horizontal'); 241 }); 242 243 test('stretch (default)', function() { 244 container.classList.add('tall'); 245 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 246 assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok"); 247 }); 248 249 test('layout-center', function() { 250 container.classList.add('center'); 251 container.classList.add('tall'); 252 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 253 var center = (300 - 50) / 2; 254 assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok"); 255 }); 256 257 test('layout-start', function() { 258 container.classList.add('start'); 259 container.classList.add('tall'); 260 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 261 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 262 }); 263 264 test('layout-end', function() { 265 container.classList.add('end'); 266 container.classList.add('tall'); 267 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 268 assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok"); 269 }); 270 271 test('layout-start-justified', function() { 272 container.classList.add('start-justified'); 273 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 274 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 275 }); 276 277 test('layout-end-justified', function() { 278 container.classList.add('end-justified'); 279 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 280 assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); 281 }); 282 283 test('layout-center-justified', function() { 284 container.classList.add('center-justified'); 285 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 286 var center = (300 - 50) / 2; 287 assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok"); 288 }); 289 }); 290 291 suite('justification', function() { 292 var container; 293 294 setup(function() { 295 container = fixture('flex'); 296 container.classList.add('horizontal'); 297 }); 298 299 test('layout-justified', function() { 300 container.classList.add('justified'); 301 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 302 var center = (300 - 50) / 2; 303 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 304 assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok"); 305 assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); 306 }); 307 308 test('layout-around-justified', function() { 309 container.classList.add('around-justified'); 310 assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); 311 var spacing = (300 - 50 * 3) / 6; 312 // Every child gets `spacing` on its left and right side. 313 assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok"); 314 var end = spacing + 50 + spacing; 315 assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok"); 316 end = end + spacing + 50 + spacing; 317 assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok"); 318 }); 319 }); 320 321 suite('align-content', function() { 322 var container; 323 324 setup(function() { 325 container = fixture('align-content'); 326 container.classList.add('small'); 327 container.classList.add('tall'); 328 container.classList.add('horizontal'); 329 container.classList.add('flex'); 330 container.classList.add('wrap'); 331 }); 332 333 test('default is stretch', function() { 334 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 335 assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok"); 336 assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok"); 337 assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok"); 338 assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok"); 339 assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok"); 340 }); 341 342 test('layout-start-aligned', function() { 343 container.classList.add('start-aligned'); 344 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 345 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 346 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 347 assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); 348 assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok"); 349 assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok"); 350 }); 351 352 test('layout-end-aligned', function() { 353 container.classList.add('end-aligned'); 354 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 355 assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok"); 356 assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok"); 357 assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok"); 358 assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok"); 359 assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); 360 }); 361 362 test('layout-center-aligned', function() { 363 container.classList.add('center-aligned'); 364 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 365 var center = (300 - 50) / 2; 366 assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok"); 367 assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok"); 368 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 369 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 370 assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok"); 371 }); 372 373 test('layout-between-aligned', function() { 374 container.classList.add('between-aligned'); 375 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 376 var center = (300 - 50) / 2; 377 assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); 378 assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); 379 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 380 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 381 assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); 382 }); 383 384 test('layout-around-aligned', function() { 385 container.classList.add('around-aligned'); 386 assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); 387 var center = (300 - 50) / 2; 388 assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok"); 389 assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok"); 390 assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); 391 assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); 392 assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok"); 393 }); 394 }); 395 396 suite('positioning', function() { 397 var container; 398 399 setup(function() { 400 container = fixture('positioning'); 401 container.classList.add('tall'); 402 }); 403 404 test('layout-fit', function() { 405 c1.classList.add('fit'); 406 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); 407 assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok"); 408 }); 409 }); 410 </script> 411 </body> 412 </html> 413
