diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-flex-layout')
17 files changed, 4328 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-flex-layout/.bower.json b/catapult/third_party/polymer/components/iron-flex-layout/.bower.json new file mode 100644 index 00000000..07a77908 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/.bower.json @@ -0,0 +1,44 @@ +{ + "name": "iron-flex-layout", + "version": "1.3.7", + "description": "Provide flexbox-based layouts", + "keywords": [ + "web-components", + "polymer", + "layout" + ], + "main": "iron-flex-layout.html", + "private": true, + "license": "http://polymer.github.io/LICENSE.txt", + "authors": [ + "The Polymer Authors" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-flex-layout.git" + }, + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "web-component-tester": "^4.0.0" + }, + "pages": { + "Flexbox layout guide": "GUIDE.md" + }, + "ignore": [], + "homepage": "https://github.com/polymerelements/iron-flex-layout", + "_release": "1.3.7", + "_resolution": { + "type": "version", + "tag": "v1.3.7", + "commit": "2a9c084c933e87469824b69f3faadfcba12efbcd" + }, + "_source": "https://github.com/polymerelements/iron-flex-layout.git", + "_target": "^1.0.0", + "_originalSource": "polymerelements/iron-flex-layout" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/iron-flex-layout/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/iron-flex-layout/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..b79eca40 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/iron-flex-layout/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/iron-flex-layout/.gitignore b/catapult/third_party/polymer/components/iron-flex-layout/.gitignore new file mode 100644 index 00000000..1eb1fa5e --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/.gitignore @@ -0,0 +1,2 @@ +bower_components + diff --git a/catapult/third_party/polymer/components/iron-flex-layout/.travis.yml b/catapult/third_party/polymer/components/iron-flex-layout/.travis.yml new file mode 100644 index 00000000..6bd14cba --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: >- + idlCNYtNQ7rLGCSl2NuZ++XZEwofpojkakXhL8m34pCX1ZwhGRprHsvNE7h7tz8SIV+mUjuUT8DaM7rlgZ+bLyw/Hq7G15DdmU5puUsCVibFFBBEhh82lxkdK/Rlfo+ytt0MFsbTJljEoqTSbnL0fSeC0cN/7wf6yEQs/+mTR0I= + - secure: >- + i/rAHa9rxszmbE+RbQ2b7ln6OYzrcoUssdPk36lNeJk/B1HjBS9cfg1PMwSAw+t6yvAN3I0fbOOl4dlGB1K5T4kAtmcAcC3fbptJL08IvK9K15pz/rMEzIBWLXj9oVJliwBZR2GFH+5zv6aFdEwQxh1leBnHQwmKgl24QX8XGO4= +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +dist: trusty diff --git a/catapult/third_party/polymer/components/iron-flex-layout/CONTRIBUTING.md b/catapult/third_party/polymer/components/iron-flex-layout/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +If you edit this file, your changes will get overridden :) + +You can however override the jsbin link with one that's customized to this +specific element: + +jsbin=https://jsbin.com/cagaye/edit?html,output +--> + +# Polymer Elements +## Guide for Contributors + +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: + +### Filing Issues + +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 3. Click the `paper-foo` element. + ``` + + 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). + + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. + +### Submitting Pull Requests + +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. + +When submitting pull requests, please provide: + + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. + +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! diff --git a/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md b/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md new file mode 100644 index 00000000..67a9e309 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/GUIDE.md @@ -0,0 +1,1265 @@ +## Overview + +The `iron-flex-layout` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as _flexbox_. This component provides two different ways to use flexbox: + +* Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes + let you specify layout properties directly in markup. + +* Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied + inside a CSS rule using the `@apply` function. + +Using the classes or CSS mixins is largely a matter of preference. The following sections discuss +how to use the each of the stylesheets. + +> <b>Note:</b> Before using either of these stylesheets, it's helpful to be familiar with the basics +of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a +good primer.</aside> + +### Using layout classes + +To use layout classes import the `iron-flex-layout-classes` file. You +must do this in any element that uses any of the `iron-flex-layout` styles. +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> +``` + +Then include the module(s) that you need: +```html +<!-- include classes in the main document --> +<style is="custom-style" include="iron-flex iron-flex-alignment"> +``` + +or: +```html +<!-- import classes in an element --> +<style include="iron-flex iron-flex-alignment"> +``` + +Then simply apply the classes to any element. +```html +<div class="layout horizontal wrap"> +``` + +Many of the layout rules involve combinations of multiple classes (such as `layout horizontal wrap` above), +and will need a combination of modules. +The order in which the classes are specified doesn't matter, so `layout horizontal` and `horizontal layout` +are equivalent. + +There are 5 modules available: +- `iron-flex`. Basic flex layouts. +- `iron-flex-reverse`. Reverse flexbox layouts. +- `iron-flex-alignment`. Main axis, cross axis and self alignment. +- `iron-flex-factors`. All the available flex factors. +- `iron-positioning`. Generic, non-flexbox positioning helpers. + +**Example: using classes in the main document** +```html +<head> + + ... + + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> + + ... + + <!-- main document -- include the module you need in a custom-style element --> + <style is="custom-style" include="iron-flex"></style> + +</head> +<body> + + <div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + +</body> +``` +**Example: using classes in a Polymer element** +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html"> + + ... + +<dom-module id="mixin-demo"> + + <!-- inside an element -- include the module you need in a standard style element --> + <style include="iron-flex"></style> + + <template> + <div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + </template> + + <script> + Polymer({ is: 'mixin-demo' }); + </script> + +</dom-module> +``` + +It's important to note that unlike the previous layout class stylesheets +(found in `/classes/iron-flex-layout.html`), the new version does not use the `/deep/` +combinator: it does not work across local DOM boundaries, +and the modules must be imported into each scope where they're used. + +### Using layout mixins + +Custom mixins can be applied inside a Polymer +custom element's stylesheet, **or** inside a `custom-style` stylesheet to apply styles to the +main document. (They cannot be applied in the main document without a `custom-style` stylesheet.) + +**Example: using mixins in the main document** +```html +<head> + + ... + + <link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> + + ... + + <!-- main document -- apply mixins in a custom-style element --> + <style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-wrap); + } + </style> + +</head> +<body> + + <div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + +</body> +``` +**Example: using mixins in a Polymer element** +```html +<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html"> + + ... + +<dom-module id="mixin-demo"> + + <!-- inside an element -- apply mixins in a standard style element --> + <style> + .container { + @apply(--layout-horizontal); + @apply(--layout-wrap); + } + </style> + + <template> + <div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> + </div> + </template> + + <script> + Polymer({ is: 'mixin-demo' }); + </script> + +</dom-module> +``` + +In general the mixins require a little more code to use, but they can be preferable if you +don't want to use the classes, or if you want to switch layouts based on a media query. + +Custom CSS properties and mixins are features provided by the Polymer library. +See [Cross-scope styling](https://www.polymer-project.org/1.0/docs/devguide/styling.html#xscope-styling) +in the Polymer developer guide. + +## Horizontal and vertical layout + +Create a flex container that lays out its children vertically or horizontally. + +Class | Mixin | Result +:-|:-|:- +<code>layout horizontal</code>| <code>--layout-horizontal</code> | Horizontal layout container. +<code>layout vertical</code> | <code>--layout-vertical</code> | Vertical layout container. + +The classes listed here are included in the `iron-flex` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="layout horizontal"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } +</style> + +<div class="container"> + <div>One</div> + <div>Two</div> + <div>Three</div> +</div> +``` + +### Flexible children + +Children of a flex container can use flex to control their own sizing. + +Class | Mixin | Result +:-|:-|:- +<code>flex</code>| <code>--layout-flex</code> | Expand the child to fill available space in the main axis. +<code>flex-<var>ratio</var></code>| <code>--layout-flex-<var>ratio</var></code> | Assign a flex ratio of 1 to 12. +<code>flex-none</code>| <code>--layout-flex-none</code> | Don't flex the child. +<code>flex-auto</code>| <code>--layout-flex-auto</code> | Sets flex `flex-basis` to `auto` and `flex-grow` and `flex-shrink` to 1. + +The classes listed here are included in the `iron-flex` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="horizontal layout"> + <div>Alpha</div> + <div class="flex">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } +</style> + +<div class="container"> +<div>Alpha</div> + <div class="flexchild">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +#### Flexible children in vertical layouts + +The same rules can be used for children in vertical layouts. + +**Example: classes** +```html +<div class="vertical layout" style="height:250px"> + <div>Alpha</div> + <div class="flex">Beta (flex)</div> + <div>Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-vertical); + } + .flexchild { + @apply(--layout-flex); + } +</style> + +<div class="container" style="height: 250px"> + <div>One</div> + <div class="flexchild">Two</div> + <div>Three</div> +</div> +``` + +> **Note**: for vertical layouts, the container needs to have a height for the +children to flex correctly. + +#### Flex ratios + +Children elements can be told to take up more space by including a "flex ratio" +from 1 to 12. This is equivalent to specifying the CSS `flex-grow` property. + +For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use +`flex-2` and `flex-3`, respectively. + +The classes listed here are included in the `iron-flex-factors` module of the `iron-flex-layout-classes` file. + +**Example: classes** +```html +<div class="horizontal layout demo"> + <div class="flex-3">Alpha</div> + <div class="flex">Beta</div> + <div class="flex-2">Gamma</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex) + } + .flex2child { + @apply(--layout-flex-2); + } + .flex3child { + @apply(--layout-flex-3); + } +</style> + +<div class="container"> + <div class="flex3child">One</div> + <div class="flexchild">Two</div> + <div class="flex2child">Three</div> +</div> +``` + +### Cross-axis alignment + +By default, children stretch to fit the cross-axis (e.g. _vertical_ stretching in a _horizontal_ layout). + +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout" style="height: 154px"> + <div>Stretch Fill</div> +</div> +``` + +Center _across_ the main axis (e.g. _vertical_ centering elements in a _horizontal_ layout) +by adding the `center` class or applying the `--layout-center` mixin. + +**Example: classes, cross-axis center** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout center" style="height: 154px"> + <div>Center</div> +</div> +``` + +**Example: mixins, cross-axis center** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + height: 154px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-center); + } +</style> + +<div class="container" style="height: 154px"> + <div>Center</div> +</div> +``` + +You can also position at the top/bottom (or left/right in `vertical` layouts) using the `start` or `end` +classes, or by applying the `--layout-start` or `--layout-end` mixins. + + +**Example: classes, cross-axis start** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout start" style="height: 154px"> + <div>start</div> +</div> +``` + +**Example: mixins, cross-axis start** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-start); + } +</style> + +<div class="container" style="height: 154px"> + <div>start</div> +</div> +``` + +**Example: classes, cross-axis end** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout end" style="height: 154px"> + <div>end</div> +</div> +``` + +**Example: mixins, cross-axis end** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-end); + } +</style> + +<div class="container" style="height: 154px"> + <div>end</div> +</div> +``` + +### Justification + +Justifying aligns contents along the **main axis**. Justify the layout +by specifying one of the following. + + +Class | Mixin | Result +:-|:-|:- +`start-justified`| <code>--layout-start-justified</code> | Aligns contents at the start of the main axis. +`center-justified` | <code>--layout-center-justified</code> | Centers contents along the main axis. +`end-justified` | <code>--layout-end-justified</code> | Aligns contents to the end of the main axis. +`justified` | <code>--layout-justified</code> | Aligns contents with equal spaces between children. +`around-justified` | <code>--layout-around-justified</code> | Aligns contents with equal spaces arround children. + +The classes listed here are included in the `iron-flex-alignment` module of the `iron-flex-layout-classes` file. + +**Example: classes, start justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal start-justified layout"> + <div>start-justified</div> +</div> +``` + +**Example: mixins, center justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-center-justified); + } +</style> + +<div class="container"> + <div>center-justified</div> +</div> +``` + +**Example: classes, end justified** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal end-justified layout"> + <div>end-justified</div> +</div> +``` + +**Example: mixins, equal space between elements** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-justified); + } +</style> + +<div class="container"> + <div>justified</div> + <div>justified</div> + <div>justified</div> +</div> +``` + +**Example: classes, equal space around each element** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal around-justified layout"> + <div>around-justified</div> + <div>around-justified</div> +</div> +``` + +## Self alignment + +Alignment can also be set per-child (instead of using the layout container's rules). + +Class | Mixin | Result +:-|:-|:- +`self-start`| <code>--layout-self-start</code> | Aligns the child at the start of the cross-axis. +`self-center` | <code>--layout-self-center</code> | Centers the child along the cross-axis. +`self-end` | <code>--layout-self-end</code> | Aligns the child at the end of the cross-axis. +`self-stretch` | <code>--layout-self-stretch</code> | Stretches the child to fit the cross-axis. + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout" style="height: 120px;"> + <div class="flex self-start">Alpha</div> + <div class="flex self-center">Beta</div> + <div class="flex self-end">Gamma</div> + <div class="flex self-stretch">Delta</div> +</div> +``` + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal); + @apply(--layout-justified); + height: 120px; + } + .container div { + @apply(--layout-flex); + } + .child1 { + @apply(--layout-self-start); + } + .child2 { + @apply(--layout-self-center); + } + .child3 { + @apply(--layout-self-end); + } + .child4 { + @apply(--layout-self-stretch); + } +</style> +<div class="container"> + <div class="child1">Alpha</div> + <div class="child2">Beta</div> + <div class="child3">Gamma</div> + <div class="child4">Delta</div> +</div> +``` + +> <b>Note:</b> The <code>flex</code> class +(and <code>--layout-flex</code> mixin) shown in these examples is +added for the demo and not required for self-alignment. + + +## Wrapping + +Wrapped layouts can be enabled with the `wrap` class or `--layout-wrap` mixin. + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="horizontal layout wrap" style="width: 220px"> + <div>Alpha</div> + <div>Beta</div> + <div>Gamma</div> + <div>Delta</div> +</div> +``` + +## Reversed layouts + +Layout direction can be mirrored using the following rules: + +Class | Mixin | Result +:-|:-|:- +<code>layout horizontal-reverse</code>| <code>--layout-horizontal-reverse</code> | Horizontal layout with children laid out in reverse order (last-to-first). +<code>layout vertical-reverse</code> | <code>--layout-vertical-reverse</code> | Vertical layout with children laid out in reverse order. +<code>layout wrap-reverse</code> | <code>--layout-wrap-reverse</code> | Wrap layout with wrapped rows placed in the reverse order (for example, in a vertical layout, the second row is placed above the first row, instead of below). + +The classes listed here are included in the `iron-flex-reverse` module of the `iron-flex-layout-classes` file. + +**Example: mixins** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment iron-flex-reverse"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<style is="custom-style"> + .container { + @apply(--layout-horizontal-reverse); + } +</style> + +<div class="container"> + <div>Alpha</div> + <div>Beta</div> + <div>Gamma</div> + <div>Delta</div> +</div> +``` + +## Full bleed <body> + +It's common to want the entire `<body>` to fit to the viewport. By themselves, Polymer's layout features on +`<body>` don't achieve the result. You can make `<body>` take up the entire viewport by adding the `fullbleed` class: + +```html +<body class="fullbleed vertical layout"> + <div class="flex">Fitting a fullbleed body.</div> +</body> +``` + +This removes its margins and maximizes its height to the viewport. There is no equivalent mixin, but the same result can +be achieved in CSS very simply: +```css +body { + margin: 0; + height: 100vh; +} +``` + +This class is included in the `iron-positioning` module of the `iron-flex-layout-classes` file. + +Note that the `fullbleed` class **only works on the `<body>` tag.** This is the only rule in the +stylesheet that is scoped to a particular tag. + + +## General purpose rules + +Polymer also includes other general purpose rules for basic positioning: + +Class | Mixin | Result +:-|:-|:- +`block`| `--layout-block` | Assigns `display: block` +`invisible` | `--layout-invisible` | Assigns `visibility: hidden` +`relative` | `--layout-relative` | Assigns `position: relative` +`fit` | `--layout-fit` | Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting"). + +The classes listed here are included in the `iron-positioning` module of the `iron-flex-layout-classes` file. + +> <b>Note:</b>When using `fit` layout, the element must have an ancestor with fixed size and `position: relative` layout +to fit inside of. + + +**Example: classes** +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style> + <style> + :host { + display: block; + background: #ccc; + } + + .demo { + background-color: white; + margin: 12px; + padding: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="demo">Before <span>[A Span]</span> After</div> +<div class="demo">Before <span class="block">[A Block Span]</span> After</div> +<div class="demo">Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> +<div class="relative" style="height: 100px;"> + <div class="fit" style="background-color: #000;color: white">Fit</div> +</div> +``` diff --git a/catapult/third_party/polymer/components/iron-flex-layout/README.md b/catapult/third_party/polymer/components/iron-flex-layout/README.md new file mode 100644 index 00000000..d5aac2fb --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/README.md @@ -0,0 +1,67 @@ +[](https://travis-ci.org/PolymerElements/iron-flex-layout) +[](https://beta.webcomponents.org/element/PolymerElements/iron-flex-layout) + +## <iron-flex-layout> + +The `<iron-flex-layout>` component provides simple ways to use +[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), +also known as flexbox. This component provides two different ways to use flexbox: + +1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). +The layout class stylesheet provides a simple set of class-based flexbox rules, that +let you specify layout properties directly in markup. You must include this file +in every element that needs to use them. + +Sample use: + +<!-- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.min.js"></script> + <link rel="import" href="iron-flex-layout-classes.html"> + <dom-module id="demo-element"> + <template> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .container, .layout { + background-color: #ccc; + padding: 4px; + } + + .container div, .layout div { + background-color: white; + padding: 12px; + margin: 4px; + } + </style> + <next-code-block></next-code-block> + </template> + <script>Polymer({is: "demo-element"});</script> + </dom-module> + <demo-element></demo-element> + </template> +</custom-element-demo> +``` +--> +```html +<div class="layout horizontal layout-start" style="height: 154px"> + <div>cross axis start alignment</div> +</div> +``` + +1. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). +The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. + + + +Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes) +are deprecated, and should not be used. To continue using layout properties +directly in markup, please switch to using the new `dom-module`-based +[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). +Please note that the new version does not use `/deep/`, and therefore requires you +to import the `dom-modules` in every element that needs to use them. + +A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available. + + diff --git a/catapult/third_party/polymer/components/iron-flex-layout/bower.json b/catapult/third_party/polymer/components/iron-flex-layout/bower.json new file mode 100644 index 00000000..7b6b1a2c --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/bower.json @@ -0,0 +1,34 @@ +{ + "name": "iron-flex-layout", + "version": "1.3.7", + "description": "Provide flexbox-based layouts", + "keywords": [ + "web-components", + "polymer", + "layout" + ], + "main": "iron-flex-layout.html", + "private": true, + "license": "http://polymer.github.io/LICENSE.txt", + "authors": [ + "The Polymer Authors" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-flex-layout.git" + }, + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "web-component-tester": "^4.0.0" + }, + "pages": { + "Flexbox layout guide": "GUIDE.md" + }, + "ignore": [] +} diff --git a/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-flex-layout.html b/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-flex-layout.html new file mode 100644 index 00000000..5fa7ce65 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-flex-layout.html @@ -0,0 +1,317 @@ +<!-- +@license +Copyright (c) 2015 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 +--> + +<link rel="import" href="iron-shadow-flex-layout.html"> + +<script> + console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead'); +</script> + +<style> + + /******************************* + Flex Layout + *******************************/ + + .layout.horizontal, + .layout.horizontal-reverse, + .layout.vertical, + .layout.vertical-reverse { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + .layout.inline { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + } + + .layout.horizontal { + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + .layout.horizontal-reverse { + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .layout.vertical { + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + .layout.vertical-reverse { + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .layout.wrap { + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + } + + .layout.no-wrap { + -ms-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + } + + .layout.wrap-reverse { + -ms-flex-wrap: wrap-reverse; + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + } + + .flex-auto { + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + .flex-none { + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + .flex, + .flex-1 { + -ms-flex: 1; + -webkit-flex: 1; + flex: 1; + } + + .flex-2 { + -ms-flex: 2; + -webkit-flex: 2; + flex: 2; + } + + .flex-3 { + -ms-flex: 3; + -webkit-flex: 3; + flex: 3; + } + + .flex-4 { + -ms-flex: 4; + -webkit-flex: 4; + flex: 4; + } + + .flex-5 { + -ms-flex: 5; + -webkit-flex: 5; + flex: 5; + } + + .flex-6 { + -ms-flex: 6; + -webkit-flex: 6; + flex: 6; + } + + .flex-7 { + -ms-flex: 7; + -webkit-flex: 7; + flex: 7; + } + + .flex-8 { + -ms-flex: 8; + -webkit-flex: 8; + flex: 8; + } + + .flex-9 { + -ms-flex: 9; + -webkit-flex: 9; + flex: 9; + } + + .flex-10 { + -ms-flex: 10; + -webkit-flex: 10; + flex: 10; + } + + .flex-11 { + -ms-flex: 11; + -webkit-flex: 11; + flex: 11; + } + + .flex-12 { + -ms-flex: 12; + -webkit-flex: 12; + flex: 12; + } + + /* alignment in cross axis */ + + .layout.start { + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + } + + .layout.center, + .layout.center-center { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + .layout.end { + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + } + + /* alignment in main axis */ + + .layout.start-justified { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + .layout.center-justified, + .layout.center-center { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + .layout.end-justified { + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; + } + + .layout.around-justified { + -ms-flex-pack: around; + -webkit-justify-content: space-around; + justify-content: space-around; + } + + .layout.justified { + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + + /* self alignment */ + + .self-start { + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; + } + + .self-center { + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; + } + + .self-end { + -ms-align-self: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + } + + .self-stretch { + -ms-align-self: stretch; + -webkit-align-self: stretch; + align-self: stretch; + } + + /******************************* + Other Layout + *******************************/ + + .block { + display: block; + } + + /* IE 10 support for HTML5 hidden attr */ + [hidden] { + display: none !important; + } + + .invisible { + visibility: hidden !important; + } + + .relative { + position: relative; + } + + .fit { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + body.fullbleed { + margin: 0; + height: 100vh; + } + + .scroll { + -webkit-overflow-scrolling: touch; + overflow: auto; + } + + /* fixed position */ + + .fixed-bottom, + .fixed-left, + .fixed-right, + .fixed-top { + position: fixed; + } + + .fixed-top { + top: 0; + left: 0; + right: 0; + } + + .fixed-right { + top: 0; + right: 0; + bottom: 0; + } + + .fixed-bottom { + right: 0; + bottom: 0; + left: 0; + } + + .fixed-left { + top: 0; + bottom: 0; + left: 0; + } + +</style> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-shadow-flex-layout.html b/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-shadow-flex-layout.html new file mode 100644 index 00000000..5dcde193 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/classes/iron-shadow-flex-layout.html @@ -0,0 +1,313 @@ +<!-- +@license +Copyright (c) 2015 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 +--> + +<script> + console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead'); +</script> + +<style> + + /******************************* + Flex Layout + *******************************/ + + html /deep/ .layout.horizontal, + html /deep/ .layout.horizontal-reverse, + html /deep/ .layout.vertical, + html /deep/ .layout.vertical-reverse { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + html /deep/ .layout.inline { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + } + + html /deep/ .layout.horizontal { + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + html /deep/ .layout.horizontal-reverse { + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + html /deep/ .layout.vertical { + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + html /deep/ .layout.vertical-reverse { + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + html /deep/ .layout.wrap { + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + } + + html /deep/ .layout-no-wrap { + -ms-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + } + + html /deep/ .layout.wrap-reverse { + -ms-flex-wrap: wrap-reverse; + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + } + + html /deep/ .flex-auto { + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + html /deep/ .flex-none { + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + + html /deep/ .flex, + html /deep/ .flex-1 { + -ms-flex: 1; + -webkit-flex: 1; + flex: 1; + } + + html /deep/ .flex-2 { + -ms-flex: 2; + -webkit-flex: 2; + flex: 2; + } + + html /deep/ .flex-3 { + -ms-flex: 3; + -webkit-flex: 3; + flex: 3; + } + + html /deep/ .flex-4 { + -ms-flex: 4; + -webkit-flex: 4; + flex: 4; + } + + html /deep/ .flex-5 { + -ms-flex: 5; + -webkit-flex: 5; + flex: 5; + } + + html /deep/ .flex-6 { + -ms-flex: 6; + -webkit-flex: 6; + flex: 6; + } + + html /deep/ .flex-7 { + -ms-flex: 7; + -webkit-flex: 7; + flex: 7; + } + + html /deep/ .flex-8 { + -ms-flex: 8; + -webkit-flex: 8; + flex: 8; + } + + html /deep/ .flex-9 { + -ms-flex: 9; + -webkit-flex: 9; + flex: 9; + } + + html /deep/ .flex-10 { + -ms-flex: 10; + -webkit-flex: 10; + flex: 10; + } + + html /deep/ .flex-11 { + -ms-flex: 11; + -webkit-flex: 11; + flex: 11; + } + + html /deep/ .flex-12 { + -ms-flex: 12; + -webkit-flex: 12; + flex: 12; + } + + /* alignment in cross axis */ + + html /deep/ .layout.start { + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + } + + html /deep/ .layout.center, + html /deep/ .layout.center-center { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + html /deep/ .layout.end { + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + } + + /* alignment in main axis */ + + html /deep/ .layout.start-justified { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + html /deep/ .layout.center-justified, + html /deep/ .layout.center-center { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + html /deep/ .layout.end-justified { + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; + } + + html /deep/ .layout.around-justified { + -ms-flex-pack: around; + -webkit-justify-content: space-around; + justify-content: space-around; + } + + html /deep/ .layout.justified { + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + + /* self alignment */ + + html /deep/ .self-start { + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; + } + + html /deep/ .self-center { + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; + } + + html /deep/ .self-end { + -ms-align-self: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + } + + html /deep/ .self-stretch { + -ms-align-self: stretch; + -webkit-align-self: stretch; + align-self: stretch; + } + + /******************************* + Other Layout + *******************************/ + + html /deep/ .block { + display: block; + } + + /* IE 10 support for HTML5 hidden attr */ + html /deep/ [hidden] { + display: none !important; + } + + html /deep/ .invisible { + visibility: hidden !important; + } + + html /deep/ .relative { + position: relative; + } + + html /deep/ .fit { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + body.fullbleed { + margin: 0; + height: 100vh; + } + + html /deep/ .scroll { + -webkit-overflow-scrolling: touch; + overflow: auto; + } + + .fixed-bottom, + .fixed-left, + .fixed-right, + .fixed-top { + position: fixed; + } + + html /deep/ .fixed-top { + top: 0; + left: 0; + right: 0; + } + + html /deep/ .fixed-right { + top: 0; + right: 0; + bottom: 0; + } + + html /deep/ .fixed-bottom { + right: 0; + bottom: 0; + left: 0; + } + + html /deep/ .fixed-left { + top: 0; + bottom: 0; + left: 0; + } + +</style> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html b/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html new file mode 100644 index 00000000..4bc2d410 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/demo/index.html @@ -0,0 +1,396 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 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 demo</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../paper-styles/demo-pages.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../iron-flex-layout.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + demo-snippet { + --demo-snippet-demo: { + padding: 0; + } + } + .container { + background-color: #ccc; + padding: 5px; + margin: 0; + } + .container > div { + padding: 15px; + margin: 5px; + background-color: white; + min-height: 20px; + } + + .vertical-section-container { + max-width: 700px + } + </style> + +</head> +<body unresolved class="fullbleed"> + <div class="vertical-section-container centered"> + <h4>Horizontal and vertical layout</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex { + @apply(--layout-horizontal); + } + </style> + <div class="container flex"> + <div>one</div> + <div>two</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flexible children</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-horizontal { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } + </style> + + <div class="container flex-horizontal"> + <div>one</div> + <div class="flexchild">two (flex)</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flexible children in vertical layouts</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-vertical { + @apply(--layout-vertical); + height: 220px; + } + .flexchild-vertical { + @apply(--layout-flex); + } + </style> + + <div class="container flex-vertical"> + <div>one</div> + <div class="flexchild-vertical">two (flex)</div> + <div>three</div> + </div> + </template> + </demo-snippet> + + <h4>Flex ratios</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-horizontal-with-ratios { + @apply(--layout-horizontal); + } + .flexchild { + @apply(--layout-flex); + } + .flex2child { + @apply(--layout-flex-2); + } + .flex3child { + @apply(--layout-flex-3); + } + </style> + + <div class="container flex-horizontal-with-ratios"> + <div class="flex3child">one</div> + <div class="flexchild">two</div> + <div class="flex2child">three</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis stretch alignment (default)</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-stretch-align { + @apply(--layout-horizontal); + height: 120px; + } + </style> + + <div class="container flex-stretch-align"> + <div>stretch</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis center alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-center-align { + @apply(--layout-horizontal); + @apply(--layout-center); + height: 120px; + } + </style> + + <div class="container flex-center-align"> + <div>center</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis start alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-start-align { + @apply(--layout-horizontal); + @apply(--layout-start); + height: 120px; + } + </style> + + <div class="container flex-start-align"> + <div>start</div> + </div> + </template> + </demo-snippet> + + <h4>Cross-axis end alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-end-align { + @apply(--layout-horizontal); + @apply(--layout-end); + height: 120px; + } + </style> + + <div class="container flex-end-align"> + <div>end</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, start justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-start-justified { + @apply(--layout-horizontal); + @apply(--layout-start-justified); + } + </style> + + <div class="container flex-start-justified"> + <div>start-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, center justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-center-justified { + @apply(--layout-horizontal); + @apply(--layout-center-justified); + } + </style> + + <div class="container flex-center-justified"> + <div>center-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, end justified</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-end-justified { + @apply(--layout-horizontal); + @apply(--layout-end-justified); + } + </style> + + <div class="container flex-end-justified"> + <div>end-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, equal space between elements</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-equal-justified { + @apply(--layout-horizontal); + @apply(--layout-justified); + } + </style> + + <div class="container flex-equal-justified"> + <div>justified</div> + <div>justified</div> + <div>justified</div> + </div> + </template> + </demo-snippet> + + <h4>Justification, equal space around each element</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-equal-around-justified { + @apply(--layout-horizontal); + @apply(--layout-around-justified); + } + </style> + + <div class="container flex-equal-around-justified"> + <div>around-justified</div> + <div>around-justified</div> + </div> + </template> + </demo-snippet> + + <h4>Self alignment</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-self-align { + @apply(--layout-horizontal); + @apply(--layout-justified); + height: 120px; + } + .flex-self-align div { + @apply(--layout-flex); + } + .child1 { + @apply(--layout-self-start); + } + .child2 { + @apply(--layout-self-center); + } + .child3 { + @apply(--layout-self-end); + } + .child4 { + @apply(--layout-self-stretch); + } + </style> + + <div class="container flex-self-align"> + <div class="child1">one</div> + <div class="child2">two</div> + <div class="child3">three</div> + <div class="child4">four</div> + </div> + </template> + </demo-snippet> + + <h4>Wrapping</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-wrap { + @apply(--layout-horizontal); + @apply(--layout-wrap); + width: 200px; + } + </style> + + <div class="container flex-wrap"> + <div>one</div> + <div>two</div> + <div>three</div> + <div>four</div> + </div> + </template> + </demo-snippet> + + <h4>Reversed layouts</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .flex-reversed { + @apply(--layout-horizontal-reverse); + } + </style> + + <div class="container flex-reversed"> + <div>one</div> + <div>two</div> + <div>three</div> + <div>four</div> + </div> + </template> + </demo-snippet> + + <h4>General purpose rules</h4> + <demo-snippet> + <template> + <style is="custom-style"> + .general { + width: 100%; + } + .general > div { + background-color: #ccc; + padding: 4px; + margin: 12px; + } + .block { + @apply(--layout-block); + } + .invisible { + @apply(--layout-invisible); + } + .relative { + @apply(--layout-relative); + } + .fit { + @apply(--layout-fit); + } + </style> + + <div class="general"> + <div>Before <span>[A Span]</span> After</div> + <div>Before <span class="block">[A Block Span]</span> After</div> + <div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div> + <div class="relative" style="height: 100px;"> + <div class="fit" style="background-color: #000;color: white">Fit</div> + </div> + </div> + </template> + </demo-snippet> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/index.html b/catapult/third_party/polymer/components/iron-flex-layout/index.html new file mode 100644 index 00000000..7d3b0881 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/index.html @@ -0,0 +1,24 @@ +<!doctype html> +<!-- +@license +Copyright (c) 2015 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</title> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + +</head> +<body> + + <iron-component-page></iron-component-page> + +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout-classes.html b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout-classes.html new file mode 100644 index 00000000..6bf47f8c --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout-classes.html @@ -0,0 +1,437 @@ +<!-- +@license +Copyright (c) 2015 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 +--> + +<!-- +A set of layout classes that let you specify layout properties directly in markup. +You must include this file in every element that needs to use them. + +Sample use: + + <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + + <div class="layout horizontal layout-start"> + <div>cross axis start alignment</div> + </div> + +The following imports are available: + - iron-flex + - iron-flex-reverse + - iron-flex-alignment + - iron-flex-factors + - iron-positioning +--> + +<link rel="import" href="../polymer/polymer.html"> + +<!-- Most common used flex styles--> +<dom-module id="iron-flex"> + <template> + <style> + .layout.horizontal, + .layout.vertical { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + .layout.inline { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + } + + .layout.horizontal { + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + } + + .layout.vertical { + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + } + + .layout.wrap { + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + } + + .layout.no-wrap { + -ms-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + } + + .layout.center, + .layout.center-center { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + .layout.center-justified, + .layout.center-center { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + .flex { + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + } + + .flex-auto { + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + } + + .flex-none { + -ms-flex: none; + -webkit-flex: none; + flex: none; + } + </style> + </template> +</dom-module> + +<!-- Basic flexbox reverse styles --> +<dom-module id="iron-flex-reverse"> + <template> + <style> + .layout.horizontal-reverse, + .layout.vertical-reverse { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + } + + .layout.horizontal-reverse { + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .layout.vertical-reverse { + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; + } + + .layout.wrap-reverse { + -ms-flex-wrap: wrap-reverse; + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + } + </style> + </template> +</dom-module> + +<!-- Flexbox alignment --> +<dom-module id="iron-flex-alignment"> + <template> + <style> + /** + * Alignment in cross axis. + */ + .layout.start { + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + } + + .layout.center, + .layout.center-center { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + } + + .layout.end { + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + } + + .layout.baseline { + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; + } + + /** + * Alignment in main axis. + */ + .layout.start-justified { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + } + + .layout.center-justified, + .layout.center-center { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + } + + .layout.end-justified { + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; + } + + .layout.around-justified { + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; + } + + .layout.justified { + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + } + + /** + * Self alignment. + */ + .self-start { + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; + } + + .self-center { + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; + } + + .self-end { + -ms-align-self: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + } + + .self-stretch { + -ms-align-self: stretch; + -webkit-align-self: stretch; + align-self: stretch; + } + + .self-baseline { + -ms-align-self: baseline; + -webkit-align-self: baseline; + align-self: baseline; + } + + /** + * multi-line alignment in main axis. + */ + .layout.start-aligned { + -ms-flex-line-pack: start; /* IE10 */ + -ms-align-content: flex-start; + -webkit-align-content: flex-start; + align-content: flex-start; + } + + .layout.end-aligned { + -ms-flex-line-pack: end; /* IE10 */ + -ms-align-content: flex-end; + -webkit-align-content: flex-end; + align-content: flex-end; + } + + .layout.center-aligned { + -ms-flex-line-pack: center; /* IE10 */ + -ms-align-content: center; + -webkit-align-content: center; + align-content: center; + } + + .layout.between-aligned { + -ms-flex-line-pack: justify; /* IE10 */ + -ms-align-content: space-between; + -webkit-align-content: space-between; + align-content: space-between; + } + + .layout.around-aligned { + -ms-flex-line-pack: distribute; /* IE10 */ + -ms-align-content: space-around; + -webkit-align-content: space-around; + align-content: space-around; + } + </style> + </template> +</dom-module> + +<dom-module id="iron-flex-factors"> + <template> + <style> + .flex, + .flex-1 { + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + } + + .flex-2 { + -ms-flex: 2; + -webkit-flex: 2; + flex: 2; + } + + .flex-3 { + -ms-flex: 3; + -webkit-flex: 3; + flex: 3; + } + + .flex-4 { + -ms-flex: 4; + -webkit-flex: 4; + flex: 4; + } + + .flex-5 { + -ms-flex: 5; + -webkit-flex: 5; + flex: 5; + } + + .flex-6 { + -ms-flex: 6; + -webkit-flex: 6; + flex: 6; + } + + .flex-7 { + -ms-flex: 7; + -webkit-flex: 7; + flex: 7; + } + + .flex-8 { + -ms-flex: 8; + -webkit-flex: 8; + flex: 8; + } + + .flex-9 { + -ms-flex: 9; + -webkit-flex: 9; + flex: 9; + } + + .flex-10 { + -ms-flex: 10; + -webkit-flex: 10; + flex: 10; + } + + .flex-11 { + -ms-flex: 11; + -webkit-flex: 11; + flex: 11; + } + + .flex-12 { + -ms-flex: 12; + -webkit-flex: 12; + flex: 12; + } + </style> + </template> +</dom-module> + +<!-- Non-flexbox positioning helper styles --> +<dom-module id="iron-positioning"> + <template> + <style> + .block { + display: block; + } + + /* IE 10 support for HTML5 hidden attr */ + [hidden] { + display: none !important; + } + + .invisible { + visibility: hidden !important; + } + + .relative { + position: relative; + } + + .fit { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + body.fullbleed { + margin: 0; + height: 100vh; + } + + .scroll { + -webkit-overflow-scrolling: touch; + overflow: auto; + } + + /* fixed position */ + .fixed-bottom, + .fixed-left, + .fixed-right, + .fixed-top { + position: fixed; + } + + .fixed-top { + top: 0; + left: 0; + right: 0; + } + + .fixed-right { + top: 0; + right: 0; + bottom: 0; + } + + .fixed-bottom { + right: 0; + bottom: 0; + left: 0; + } + + .fixed-left { + top: 0; + bottom: 0; + left: 0; + } + </style> + </template> +</dom-module> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html new file mode 100644 index 00000000..a69f46a3 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html @@ -0,0 +1,418 @@ +<!-- +@license +Copyright (c) 2015 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 +--> + +<link rel="import" href="../polymer/polymer.html"> + +<!-- +The `<iron-flex-layout>` component provides simple ways to use +[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), +also known as flexbox. This component provides two different ways to use flexbox: + +1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). +The layout class stylesheet provides a simple set of class-based flexbox rules, that +let you specify layout properties directly in markup. You must include this file +in every element that needs to use them. + + Sample use: + + ``` + <custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <next-code-block></next-code-block> + </template> + </custom-element-demo> + ``` + + ```html + <link rel="import" href="iron-flex-layout-classes.html"> + <style is="custom-style" include="iron-flex iron-flex-alignment"></style> + <style> + .test { width: 100px; } + </style> + <div class="layout horizontal center-center"> + <div class="test">horizontal layout center alignment</div> + </div> + ``` + +2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). +The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function. + +Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes) +are deprecated, and should not be used. To continue using layout properties +directly in markup, please switch to using the new `dom-module`-based +[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). +Please note that the new version does not use `/deep/`, and therefore requires you +to import the `dom-modules` in every element that needs to use them. + +A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available. + +@group Iron Elements +@pseudoElement iron-flex-layout +@demo demo/index.html +--> + +<style> + /* IE 10 support for HTML5 hidden attr */ + [hidden] { + display: none !important; + } +</style> + +<style is="custom-style"> + :root { + + --layout: { + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + }; + + --layout-inline: { + display: -ms-inline-flexbox; + display: -webkit-inline-flex; + display: inline-flex; + }; + + --layout-horizontal: { + @apply(--layout); + + -ms-flex-direction: row; + -webkit-flex-direction: row; + flex-direction: row; + }; + + --layout-horizontal-reverse: { + @apply(--layout); + + -ms-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + flex-direction: row-reverse; + }; + + --layout-vertical: { + @apply(--layout); + + -ms-flex-direction: column; + -webkit-flex-direction: column; + flex-direction: column; + }; + + --layout-vertical-reverse: { + @apply(--layout); + + -ms-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + flex-direction: column-reverse; + }; + + --layout-wrap: { + -ms-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + flex-wrap: wrap; + }; + + --layout-no-wrap: { + -ms-flex-wrap: nowrap; + -webkit-flex-wrap: nowrap; + flex-wrap: nowrap; + }; + + --layout-wrap-reverse: { + -ms-flex-wrap: wrap-reverse; + -webkit-flex-wrap: wrap-reverse; + flex-wrap: wrap-reverse; + }; + + --layout-flex-auto: { + -ms-flex: 1 1 auto; + -webkit-flex: 1 1 auto; + flex: 1 1 auto; + }; + + --layout-flex-none: { + -ms-flex: none; + -webkit-flex: none; + flex: none; + }; + + --layout-flex: { + -ms-flex: 1 1 0.000000001px; + -webkit-flex: 1; + flex: 1; + -webkit-flex-basis: 0.000000001px; + flex-basis: 0.000000001px; + }; + + --layout-flex-2: { + -ms-flex: 2; + -webkit-flex: 2; + flex: 2; + }; + + --layout-flex-3: { + -ms-flex: 3; + -webkit-flex: 3; + flex: 3; + }; + + --layout-flex-4: { + -ms-flex: 4; + -webkit-flex: 4; + flex: 4; + }; + + --layout-flex-5: { + -ms-flex: 5; + -webkit-flex: 5; + flex: 5; + }; + + --layout-flex-6: { + -ms-flex: 6; + -webkit-flex: 6; + flex: 6; + }; + + --layout-flex-7: { + -ms-flex: 7; + -webkit-flex: 7; + flex: 7; + }; + + --layout-flex-8: { + -ms-flex: 8; + -webkit-flex: 8; + flex: 8; + }; + + --layout-flex-9: { + -ms-flex: 9; + -webkit-flex: 9; + flex: 9; + }; + + --layout-flex-10: { + -ms-flex: 10; + -webkit-flex: 10; + flex: 10; + }; + + --layout-flex-11: { + -ms-flex: 11; + -webkit-flex: 11; + flex: 11; + }; + + --layout-flex-12: { + -ms-flex: 12; + -webkit-flex: 12; + flex: 12; + }; + + /* alignment in cross axis */ + + --layout-start: { + -ms-flex-align: start; + -webkit-align-items: flex-start; + align-items: flex-start; + }; + + --layout-center: { + -ms-flex-align: center; + -webkit-align-items: center; + align-items: center; + }; + + --layout-end: { + -ms-flex-align: end; + -webkit-align-items: flex-end; + align-items: flex-end; + }; + + --layout-baseline: { + -ms-flex-align: baseline; + -webkit-align-items: baseline; + align-items: baseline; + }; + + /* alignment in main axis */ + + --layout-start-justified: { + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + }; + + --layout-center-justified: { + -ms-flex-pack: center; + -webkit-justify-content: center; + justify-content: center; + }; + + --layout-end-justified: { + -ms-flex-pack: end; + -webkit-justify-content: flex-end; + justify-content: flex-end; + }; + + --layout-around-justified: { + -ms-flex-pack: distribute; + -webkit-justify-content: space-around; + justify-content: space-around; + }; + + --layout-justified: { + -ms-flex-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + }; + + --layout-center-center: { + @apply(--layout-center); + @apply(--layout-center-justified); + }; + + /* self alignment */ + + --layout-self-start: { + -ms-align-self: flex-start; + -webkit-align-self: flex-start; + align-self: flex-start; + }; + + --layout-self-center: { + -ms-align-self: center; + -webkit-align-self: center; + align-self: center; + }; + + --layout-self-end: { + -ms-align-self: flex-end; + -webkit-align-self: flex-end; + align-self: flex-end; + }; + + --layout-self-stretch: { + -ms-align-self: stretch; + -webkit-align-self: stretch; + align-self: stretch; + }; + + --layout-self-baseline: { + -ms-align-self: baseline; + -webkit-align-self: baseline; + align-self: baseline; + }; + + /* multi-line alignment in main axis */ + + --layout-start-aligned: { + -ms-flex-line-pack: start; /* IE10 */ + -ms-align-content: flex-start; + -webkit-align-content: flex-start; + align-content: flex-start; + }; + + --layout-end-aligned: { + -ms-flex-line-pack: end; /* IE10 */ + -ms-align-content: flex-end; + -webkit-align-content: flex-end; + align-content: flex-end; + }; + + --layout-center-aligned: { + -ms-flex-line-pack: center; /* IE10 */ + -ms-align-content: center; + -webkit-align-content: center; + align-content: center; + }; + + --layout-between-aligned: { + -ms-flex-line-pack: justify; /* IE10 */ + -ms-align-content: space-between; + -webkit-align-content: space-between; + align-content: space-between; + }; + + --layout-around-aligned: { + -ms-flex-line-pack: distribute; /* IE10 */ + -ms-align-content: space-around; + -webkit-align-content: space-around; + align-content: space-around; + }; + + /******************************* + Other Layout + *******************************/ + + --layout-block: { + display: block; + }; + + --layout-invisible: { + visibility: hidden !important; + }; + + --layout-relative: { + position: relative; + }; + + --layout-fit: { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + }; + + --layout-scroll: { + -webkit-overflow-scrolling: touch; + overflow: auto; + }; + + --layout-fullbleed: { + margin: 0; + height: 100vh; + }; + + /* fixed position */ + + --layout-fixed-top: { + position: fixed; + top: 0; + left: 0; + right: 0; + }; + + --layout-fixed-right: { + position: fixed; + top: 0; + right: 0; + bottom: 0; + }; + + --layout-fixed-bottom: { + position: fixed; + right: 0; + bottom: 0; + left: 0; + }; + + --layout-fixed-left: { + position: fixed; + top: 0; + bottom: 0; + left: 0; + }; + + } + +</style> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/test/index.html b/catapult/third_party/polymer/components/iron-flex-layout/test/index.html new file mode 100644 index 00000000..90e12a78 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/test/index.html @@ -0,0 +1,31 @@ +<!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-behavior 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="../../web-component-tester/browser.js"></script> + </head> + + <body> + <script> + WCT.loadSuites([ + 'iron-flex-layout.html', + 'iron-flex-layout.html?dom=shadow', + 'iron-flex-layout-classes.html', + 'iron-flex-layout-classes.html?dom=shadow' + ]); + </script> + </body> +</html> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout-classes.html b/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout-classes.html new file mode 100644 index 00000000..3173b308 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout-classes.html @@ -0,0 +1,412 @@ +<!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-classes 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-classes.html"> + + <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning"> + 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; + } + .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; } + </style> + </head> + <body> + <test-fixture id="basic"> + <template> + <div class="container layout"> + <div id="c1"></div> + <div id="c2"></div> + <div id="c3"></div> + </div> + </template> + </test-fixture> + + <test-fixture id="flex"> + <template> + <div class="container layout"> + <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 layout"> + <div id="c1"></div> + </div> + </template> + </test-fixture> + + <test-fixture id="positioning"> + <template> + <div class="container layout relative"> + <div id="c1"></div> + </div> + </template> + </test-fixture> + + <test-fixture id="align-content"> + <template> + <div class="container layout"> + <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-reverse'); + container.classList.add('wrap-reverse'); + container.style.width = '100px'; + assert.isTrue(positionEquals(container, 0, 100, 0, 100), "container position ok"); + // |c3| + // |c2| |c1| + assert.isTrue(positionEquals(c1, 50, 100, 50, 100), "child 1 position ok"); + assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok"); + assert.isTrue(positionEquals(c3, 0, 50, 50, 100), "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('flex-2'); + c3.classList.add('flex-3'); + 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('flex-2'); + c3.classList.add('flex-3'); + 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'); + container.classList.add('small'); + container.classList.add('tall'); + container.classList.add('horizontal'); + container.classList.add('flex'); + container.classList.add('wrap'); + }); + + 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> diff --git a/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout.html b/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout.html new file mode 100644 index 00000000..f2090878 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-flex-layout/test/iron-flex-layout.html @@ -0,0 +1,434 @@ +<!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> |