• 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-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