• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject 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