| <!doctype html> |
| <!-- |
| @license |
| Copyright (c) 2016 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| <html> |
| <head> |
| <title>iron-flex-layout tests</title> |
| |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> |
| |
| <script src="../../webcomponentsjs/webcomponents.js"></script> |
| <script src="../../web-component-tester/browser.js"></script> |
| <link rel="import" href="../iron-flex-layout.html"> |
| |
| <style is="custom-style"> |
| body { |
| margin: 0; |
| padding: 0; |
| } |
| .container { |
| width: 300px; |
| min-height: 50px; |
| background-color: #ccc; |
| } |
| .container > div { |
| width: 50px; |
| min-height: 50px; /* so that it can grow in vertical layouts. */ |
| } |
| /* IE11 does not calculate flex proportions correctly in a vertical |
| * layout if the children just have a min-height. For those tests, |
| * use a fixed height instead. */ |
| .container > div.fixed-height { |
| min-height: 0; |
| height: 50px; |
| } |
| .relative { @apply(--layout-relative); } |
| .container.relative > div { |
| min-width: 50px; |
| min-height: 50px; |
| width: inherit; |
| } |
| .container.small { width: 120px; } |
| .container.tall { height: 300px; } |
| |
| #c1 { background-color: #E91E63; } |
| #c2 { background-color: #03A9F4; } |
| #c3 { background-color: #CDDC39; } |
| #c4 { background-color: #03A9F4; } |
| #c5 { background-color: #E91E63; } |
| |
| .horizontal { @apply(--layout-horizontal); } |
| .horizontal-reverse { @apply(--layout-horizontal-reverse); } |
| .vertical { @apply(--layout-vertical); } |
| .vertical-reverse { @apply(--layout-vertical-reverse); } |
| .wrap { @apply(--layout-wrap); } |
| .wrap-reverse { @apply(--layout-wrap-reverse); } |
| .flex { @apply(--layout-flex); } |
| .flex2 { @apply(--layout-flex-2); } |
| .flex3 { @apply(--layout-flex-3); } |
| .center { @apply(--layout-center); } |
| .start { @apply(--layout-start); } |
| .end { @apply(--layout-end); } |
| .start-justified { @apply(--layout-start-justified); } |
| .center-justified { @apply(--layout-center-justified); } |
| .end-justified { @apply(--layout-end-justified); } |
| .justified { @apply(--layout-justified); } |
| .around-justified { @apply(--layout-around-justified); } |
| .fit { @apply(--layout-fit); } |
| .start-aligned { @apply(--layout-start-aligned); } |
| .end-aligned { @apply(--layout-end-aligned); } |
| .center-aligned { @apply(--layout-center-aligned); } |
| .between-aligned { @apply(--layout-between-aligned); } |
| .around-aligned { @apply(--layout-around-aligned); } |
| |
| </style> |
| </head> |
| <body> |
| <test-fixture id="basic"> |
| <template> |
| <div class="container"> |
| <div id="c1"></div> |
| <div id="c2"></div> |
| <div id="c3"></div> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="flex"> |
| <template> |
| <div class="container"> |
| <div id="c1" class="fixed-height"></div> |
| <div id="c2" class="fixed-height"></div> |
| <div id="c3" class="fixed-height"></div> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="single-child"> |
| <template> |
| <div class="container"> |
| <div id="c1"></div> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="positioning"> |
| <template> |
| <div class="container relative"> |
| <div id="c1"></div> |
| </div> |
| </template> |
| </test-fixture> |
| |
| <test-fixture id="align-content"> |
| <template> |
| <div class="container small tall horizontal flex wrap"> |
| <div id="c1"></div> |
| <div id="c2"></div> |
| <div id="c3"></div> |
| <div id="c4"></div> |
| <div id="c5"></div> |
| </div> |
| </template> |
| </test-fixture> |
| <script> |
| function positionEquals(node, top, bottom, left, right) { |
| var rect = node.getBoundingClientRect(); |
| return rect.top === top && rect.bottom === bottom && |
| rect.left === left && rect.right === right; |
| } |
| suite('basic layout', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('basic'); |
| }); |
| |
| test('--layout-horizontal', function() { |
| container.classList.add('horizontal'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| // |c1| |c2| |c3| |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok"); |
| }); |
| |
| test('--layout-horizontal-reverse', function() { |
| container.classList.add('horizontal-reverse'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| // |c3| |c2| |c1| |
| assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok"); |
| }); |
| |
| test('--layout-vertical', function() { |
| container.classList.add('vertical'); |
| assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); |
| // vertically, |c1| |c2| |c3| |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok"); |
| }); |
| |
| test('--layout-vertical-reverse', function() { |
| container.classList.add('vertical-reverse'); |
| assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok"); |
| // vertically, |c3| |c2| |c1| |
| assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok"); |
| }); |
| |
| test('--layout-wrap', function() { |
| container.classList.add('horizontal'); |
| container.classList.add('wrap'); |
| container.classList.add('small'); |
| assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok"); |
| // |c1| |c2| |
| // |c3| |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); |
| }); |
| |
| test('--layout-wrap-reverse', function() { |
| container.classList.add('horizontal'); |
| container.classList.add('wrap-reverse'); |
| container.classList.add('small'); |
| assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok"); |
| // |c3| |
| // |c1| |c2| |
| assert.isTrue(positionEquals(c1, 50, 100, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 50, 100, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok"); |
| }); |
| }); |
| |
| suite('flex', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('flex'); |
| }); |
| |
| test('--layout-flex child in a horizontal layout', function() { |
| container.classList.add('horizontal'); |
| c2.classList.add('flex'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| // |c1| | c2 | |c3| |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); |
| }); |
| |
| test('--layout-flex child in a vertical layout', function() { |
| container.classList.add('vertical'); |
| container.classList.add('tall'); |
| c2.classList.add('flex'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| // vertically, |c1| | c2 | |c3| |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok"); |
| }); |
| |
| test('--layout-flex, --layout-flex-2, --layout-flex-3 in a horizontal layout', function() { |
| container.classList.add('horizontal'); |
| c1.classList.add('flex'); |
| c2.classList.add('flex2'); |
| c3.classList.add('flex3'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| // |c1| | c2 | | c3 | |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok"); |
| }); |
| |
| test('--layout-flex, --layout-flex-2, --layout-flex-3 in a vertical layout', function() { |
| container.classList.add('vertical'); |
| container.classList.add('tall'); |
| c1.classList.add('flex'); |
| c2.classList.add('flex2'); |
| c3.classList.add('flex3'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| // vertically, |c1| | c2 | | c3 | |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok"); |
| }); |
| }); |
| |
| suite('alignment', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('single-child'); |
| container.classList.add('horizontal'); |
| }); |
| |
| test('stretch (default)', function() { |
| container.classList.add('tall'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok"); |
| }); |
| |
| test('--layout-center', function() { |
| container.classList.add('center'); |
| container.classList.add('tall'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok"); |
| }); |
| |
| test('--layout-start', function() { |
| container.classList.add('start'); |
| container.classList.add('tall'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| }); |
| |
| test('--layout-end', function() { |
| container.classList.add('end'); |
| container.classList.add('tall'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok"); |
| }); |
| |
| test('--layout-start-justified', function() { |
| container.classList.add('start-justified'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| }); |
| |
| test('--layout-end-justified', function() { |
| container.classList.add('end-justified'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok"); |
| }); |
| |
| test('--layout-center-justified', function() { |
| container.classList.add('center-justified'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok"); |
| }); |
| }); |
| |
| suite('justification', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('flex'); |
| container.classList.add('horizontal'); |
| }); |
| |
| test('--layout-justified', function() { |
| container.classList.add('justified'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok"); |
| }); |
| |
| test('--layout-around-justified', function() { |
| container.classList.add('around-justified'); |
| assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok"); |
| var spacing = (300 - 50 * 3) / 6; |
| // Every child gets `spacing` on its left and right side. |
| assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok"); |
| var end = spacing + 50 + spacing; |
| assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok"); |
| end = end + spacing + 50 + spacing; |
| assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok"); |
| }); |
| }); |
| |
| suite('align-content', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('align-content'); |
| }); |
| |
| test('default is stretch', function() { |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok"); |
| }); |
| |
| test('--layout-start-aligned', function() { |
| container.classList.add('start-aligned'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok"); |
| }); |
| |
| test('--layout-end-aligned', function() { |
| container.classList.add('end-aligned'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); |
| }); |
| |
| test('--layout-center-aligned', function() { |
| container.classList.add('center-aligned'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok"); |
| }); |
| |
| test('--layout-between-aligned', function() { |
| container.classList.add('between-aligned'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok"); |
| }); |
| |
| test('--layout-around-aligned', function() { |
| container.classList.add('around-aligned'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok"); |
| var center = (300 - 50) / 2; |
| assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok"); |
| assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok"); |
| assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok"); |
| assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok"); |
| assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok"); |
| }); |
| }); |
| |
| suite('positioning', function() { |
| var container; |
| |
| setup(function() { |
| container = fixture('positioning'); |
| container.classList.add('tall'); |
| |
| }); |
| |
| test('--layout-fit', function() { |
| c1.classList.add('fit'); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok"); |
| assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok"); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |