diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-icon')
15 files changed, 869 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-icon/.bower.json b/catapult/third_party/polymer/components/iron-icon/.bower.json new file mode 100644 index 00000000..1fc1db97 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/.bower.json @@ -0,0 +1,45 @@ +{ + "name": "iron-icon", + "private": true, + "version": "1.0.13", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "An element that supports displaying an icon", + "main": "iron-icon.html", + "author": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "icon" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-icon.git" + }, + "ignore": [], + "dependencies": { + "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", + "iron-meta": "polymerelements/iron-meta#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "test-fixture": "polymerelements/test-fixture#^1.0.0", + "promise-polyfill": "polymerlabs/promise-polyfill#^1.0.0", + "iron-iconset": "polymerelements/iron-iconset#^1.0.0", + "iron-icons": "polymerelements/iron-icons#^1.0.0", + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "homepage": "https://github.com/PolymerElements/iron-icon", + "_release": "1.0.13", + "_resolution": { + "type": "version", + "tag": "v1.0.13", + "commit": "4ea0cab59cb2bdfd537e72c9cfbd4af099acb5c9" + }, + "_source": "https://github.com/PolymerElements/iron-icon.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/iron-icon" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/iron-icon/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/iron-icon/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..61da83fb --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/iron-icon/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-icon/.gitignore b/catapult/third_party/polymer/components/iron-icon/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/iron-icon/.travis.yml b/catapult/third_party/polymer/components/iron-icon/.travis.yml new file mode 100644 index 00000000..87da386c --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/.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: >- + TTp7q3OKEpaFqnqbYczhMd8iXTa1Ya0jOQVq1OhljpJogLWb78qvHLHgnxgMWkw+/KDyE5KHW1CXhYUQa7C9QF2Zn7uoN27+7+4q7HuK3pTuUtqdfstLVuLHQrfK6VqUT4XjSpeMzNX/HxuD3EMBH0bMBR4CIr76sLJOuIL/XF8= + - secure: >- + damHvQXygRYIJG/8Vmqh7U4zxoi5224JIZiZVQL6I5z//s5zqHq6AqwDyfOoc0zWndJCwE8NvOzKD/lmVYXIsPcY95kkZS45Dbye0krYWUzKnv42rDi/7olXcg647iAEDVhW3BRHmA+opzQtKUpAkXl97DtPVkszLL1ReyNyv3A= +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-icon/CONTRIBUTING.md b/catapult/third_party/polymer/components/iron-icon/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/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-icon/README.md b/catapult/third_party/polymer/components/iron-icon/README.md new file mode 100644 index 00000000..0649f738 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/README.md @@ -0,0 +1,22 @@ +[](https://travis-ci.org/PolymerElements/iron-icon) + +##<iron-icon> + +The `iron-icon` element displays an icon. By default an icon renders as a 24px square. + +<!--- +``` +<custom-element-demo> + <template> + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-icons/iron-icons.html"> + <link rel="import" href="iron-icon.html"> + <next-code-block></next-code-block> + </template> +</custom-element-demo> +``` +--> +```html +<iron-icon icon="menu"></iron-icon> +<iron-icon src="demo/location.png"></iron-icon> +``` diff --git a/catapult/third_party/polymer/components/iron-icon/bower.json b/catapult/third_party/polymer/components/iron-icon/bower.json new file mode 100644 index 00000000..3d1d4120 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/bower.json @@ -0,0 +1,35 @@ +{ + "name": "iron-icon", + "private": true, + "version": "1.0.13", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "An element that supports displaying an icon", + "main": "iron-icon.html", + "author": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "icon" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-icon.git" + }, + "ignore": [], + "dependencies": { + "iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0", + "iron-meta": "polymerelements/iron-meta#^1.0.0", + "polymer": "Polymer/polymer#^1.1.0" + }, + "devDependencies": { + "test-fixture": "polymerelements/test-fixture#^1.0.0", + "promise-polyfill": "polymerlabs/promise-polyfill#^1.0.0", + "iron-iconset": "polymerelements/iron-iconset#^1.0.0", + "iron-icons": "polymerelements/iron-icons#^1.0.0", + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + } +} diff --git a/catapult/third_party/polymer/components/iron-icon/demo/async.html b/catapult/third_party/polymer/components/iron-icon/demo/async.html new file mode 100644 index 00000000..eaf40d1b --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/demo/async.html @@ -0,0 +1,62 @@ +<!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-icon demo</title> + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-icon.html"> + <link rel="import" href="../../paper-styles/demo-pages.html" > + + <style is="custom-style"> + #loading_message { + color: #444; + margin-bottom: 16px; + } + .vertical-section h4 { + border-left: 3px solid var(--paper-grey-300); + padding-left: 10px; + } + + .vertical-section h4:hover { + border-left-color: var(--google-blue-700); + } + </style> +</head> +<body> + <div class="vertical-section-container centered"> + <h4> + This demo is for an <iron-icon> with an asynchronously loaded + iconset. + </h4> + + <div id='loading_message'>Waiting to load iconset...</div> + + <div class="vertical-section"> + <!-- iron-icon using a iron-iconset as its icon source --> + <iron-iconset name="example" icons="location" src="location.png" size="24" width="24"></iron-iconset> + + <h4><iron-icon icon="example:location"></h4> + <iron-icon icon="example:location"></iron-icon> + + </div> + </div> + <script> + setTimeout(function() { + // Import the code that powers the iron-iconset asynchronously + var linkElem = document.createElement('link'); + linkElem.setAttribute('rel', 'import'); + linkElem.setAttribute('href', '../../iron-iconset/iron-iconset.html'); + document.head.appendChild(linkElem); + document.querySelector('#loading_message').innerText = "Iconset Loaded."; + }, 1000); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-icon/demo/index.html b/catapult/third_party/polymer/components/iron-icon/demo/index.html new file mode 100644 index 00000000..999ed35b --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/demo/index.html @@ -0,0 +1,48 @@ +<!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-icon demo</title> + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../iron-icon.html"> + <link rel="import" href="../../iron-iconset/iron-iconset.html"> + <link href="../../paper-styles/demo-pages.html" rel="import"> + + <style is="custom-style"> + .vertical-section h4 { + border-left: 3px solid var(--paper-grey-300); + padding-left: 10px; + } + + .vertical-section h4:hover { + border-left-color: var(--google-blue-700); + } + </style> +</head> +<body> + <div class="vertical-section-container centered"> + <h4>This demo is for a single <iron-icon>. If you're looking for the + whole set of available icons, check out the <a href="/elements/iron-icons?view=demo:demo/index.html"><iron-icons> demo.</a></h5> + + <div class="vertical-section"> + <!-- iron-icon using a iron-iconset as its icon source --> + <iron-iconset name="example" icons="location" src="location.png" size="24" width="24"></iron-iconset> + + <h4><iron-icon icon="example:location"></h4> + <iron-icon icon="example:location"></iron-icon> + + <!-- iron-icon using an image url as its icon source --> + <h4><iron-icon src="location.png"></h4> + <iron-icon src="location.png"></iron-icon> + </div> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/iron-icon/demo/location.png b/catapult/third_party/polymer/components/iron-icon/demo/location.png Binary files differnew file mode 100644 index 00000000..9bb74236 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/demo/location.png diff --git a/catapult/third_party/polymer/components/iron-icon/hero.svg b/catapult/third_party/polymer/components/iron-icon/hero.svg new file mode 100755 index 00000000..19f01c2f --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/hero.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+ <rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+ <circle cx="112" cy="61" r="8"/>
+ <path d="M129,78H95V44h34V78z M97,76h30V46H97V76z"/>
+ <g id="ic_x5F_add_x0D_">
+ </g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/catapult/third_party/polymer/components/iron-icon/index.html b/catapult/third_party/polymer/components/iron-icon/index.html new file mode 100644 index 00000000..487bb5c3 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/index.html @@ -0,0 +1,26 @@ +<!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> + + <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="../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-icon/iron-icon.html b/catapult/third_party/polymer/components/iron-icon/iron-icon.html new file mode 100644 index 00000000..f2b0d9ad --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/iron-icon.html @@ -0,0 +1,204 @@ +<!-- +@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"> +<link rel="import" href="../iron-meta/iron-meta.html"> +<link rel="import" href="../iron-flex-layout/iron-flex-layout.html"> + +<!-- + +The `iron-icon` element displays an icon. By default an icon renders as a 24px square. + +Example using src: + + <iron-icon src="star.png"></iron-icon> + +Example setting size to 32px x 32px: + + <iron-icon class="big" src="big_star.png"></iron-icon> + + <style is="custom-style"> + .big { + --iron-icon-height: 32px; + --iron-icon-width: 32px; + } + </style> + +The iron elements include several sets of icons. +To use the default set of icons, import `iron-icons.html` and use the `icon` attribute to specify an icon: + + <link rel="import" href="/components/iron-icons/iron-icons.html"> + + <iron-icon icon="menu"></iron-icon> + +To use a different built-in set of icons, import the specific `iron-icons/<iconset>-icons.html`, and +specify the icon as `<iconset>:<icon>`. For example, to use a communication icon, you would +use: + + <link rel="import" href="/components/iron-icons/communication-icons.html"> + + <iron-icon icon="communication:email"></iron-icon> + +You can also create custom icon sets of bitmap or SVG icons. + +Example of using an icon named `cherry` from a custom iconset with the ID `fruit`: + + <iron-icon icon="fruit:cherry"></iron-icon> + +See [iron-iconset](iron-iconset) and [iron-iconset-svg](iron-iconset-svg) for more information about +how to create a custom iconset. + +See the [iron-icons demo](iron-icons?view=demo:demo/index.html) to see the icons available +in the various iconsets. + +To load a subset of icons from one of the default `iron-icons` sets, you can +use the [poly-icon](https://poly-icon.appspot.com/) tool. It allows you +to select individual icons, and creates an iconset from them that you can +use directly in your elements. + +### Styling + +The following custom properties are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--iron-icon` | Mixin applied to the icon | {} +`--iron-icon-width` | Width of the icon | `24px` +`--iron-icon-height` | Height of the icon | `24px` +`--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor` +`--iron-icon-stroke-color` | Stroke color of the svg icon | none + +@group Iron Elements +@element iron-icon +@demo demo/index.html +@hero hero.svg +@homepage polymer.github.io +--> + +<dom-module id="iron-icon"> + <template> + <style> + :host { + @apply(--layout-inline); + @apply(--layout-center-center); + position: relative; + + vertical-align: middle; + + fill: var(--iron-icon-fill-color, currentcolor); + stroke: var(--iron-icon-stroke-color, none); + + width: var(--iron-icon-width, 24px); + height: var(--iron-icon-height, 24px); + @apply(--iron-icon); + } + </style> + </template> +</dom-module> +<script> +Polymer({ + is: 'iron-icon', + + properties: { + + /** + * The name of the icon to use. The name should be of the form: + * `iconset_name:icon_name`. + */ + icon: { + type: String + }, + + /** + * The name of the theme to used, if one is specified by the + * iconset. + */ + theme: { + type: String + }, + + /** + * If using iron-icon without an iconset, you can set the src to be + * the URL of an individual icon image file. Note that this will take + * precedence over a given icon attribute. + */ + src: { + type: String + }, + + /** + * @type {!Polymer.IronMeta} + */ + _meta: { + value: Polymer.Base.create('iron-meta', {type: 'iconset'}) + } + + }, + + observers: [ + '_updateIcon(_meta, isAttached)', + '_updateIcon(theme, isAttached)', + '_srcChanged(src, isAttached)', + '_iconChanged(icon, isAttached)' + ], + + _DEFAULT_ICONSET: 'icons', + + _iconChanged: function(icon) { + var parts = (icon || '').split(':'); + this._iconName = parts.pop(); + this._iconsetName = parts.pop() || this._DEFAULT_ICONSET; + this._updateIcon(); + }, + + _srcChanged: function(src) { + this._updateIcon(); + }, + + _usesIconset: function() { + return this.icon || !this.src; + }, + + /** @suppress {visibility} */ + _updateIcon: function() { + if (this._usesIconset()) { + if (this._img && this._img.parentNode) { + Polymer.dom(this.root).removeChild(this._img); + } + if (this._iconName === "") { + if (this._iconset) { + this._iconset.removeIcon(this); + } + } else if (this._iconsetName && this._meta) { + this._iconset = /** @type {?Polymer.Iconset} */ ( + this._meta.byKey(this._iconsetName)); + if (this._iconset) { + this._iconset.applyIcon(this, this._iconName, this.theme); + this.unlisten(window, 'iron-iconset-added', '_updateIcon'); + } else { + this.listen(window, 'iron-iconset-added', '_updateIcon'); + } + } + } else { + if (this._iconset) { + this._iconset.removeIcon(this); + } + if (!this._img) { + this._img = document.createElement('img'); + this._img.style.width = '100%'; + this._img.style.height = '100%'; + this._img.draggable = false; + } + this._img.src = this.src; + Polymer.dom(this.root).appendChild(this._img); + } + } +}); +</script> diff --git a/catapult/third_party/polymer/components/iron-icon/test/index.html b/catapult/third_party/polymer/components/iron-icon/test/index.html new file mode 100644 index 00000000..4414532e --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/test/index.html @@ -0,0 +1,27 @@ +<!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> + + <meta charset="utf-8"> + <title>Tests</title> + <script src="../../web-component-tester/browser.js"></script> + +</head> +<body> + + <script> + WCT.loadSuites([ + 'iron-icon.html', + 'iron-icon.html?dom=shadow' + ]); + </script> + + + +</body></html> diff --git a/catapult/third_party/polymer/components/iron-icon/test/iron-icon.html b/catapult/third_party/polymer/components/iron-icon/test/iron-icon.html new file mode 100644 index 00000000..4dd9a8d2 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-icon/test/iron-icon.html @@ -0,0 +1,246 @@ +<!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-icon</title> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + <script src="../../test-fixture/test-fixture-mocha.js"></script> + + <link rel="import" href="../iron-icon.html"> + <link rel="import" href="../../iron-iconset/iron-iconset.html"> + <link rel="import" href="../../promise-polyfill/promise-polyfill.html"> + <link rel="import" href="../../test-fixture/test-fixture.html"> + <link rel="import" href="icon-holder.html"> + +</head> +<body> + + <test-fixture id="TrivialIcon"> + <template> + <iron-icon src="../demo/location.png"></iron-icon> + </template> + </test-fixture> + + <test-fixture id="IconFromIconset"> + <template> + <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset> + <iron-icon icon="example:location"></iron-icon> + </template> + </test-fixture> + + <test-fixture id="WithoutAnIconSource"> + <template> + <iron-icon icon=""></iron-icon> + <iron-icon></iron-icon> + <iron-icon src=""></iron-icon> + </template> + </test-fixture> + + <test-fixture id="UsingAsyncIconset"> + <template> + <iron-icon icon="async:location"></iron-icon> + </template> + </test-fixture> + + <test-fixture id="AsyncIconset"> + <template> + <iron-iconset name="async" icons="location blank" src="location.png" size="24" width="48"></iron-iconset> + </template> + </test-fixture> + + <test-fixture id="SrcIconSwitch"> + <template> + <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset> + <iron-icon></iron-icon> + </template> + </test-fixture> + + <test-fixture id="ParentForceUpdate"> + <template> + <icon-holder> + <iron-icon></iron-icon> + </icon-holder> + </template> + </test-fixture> + + <script> +function iconElementFor (node) { + var nodes = Polymer.dom(node.root).childNodes; + + for (var i = 0; i < nodes.length; ++i) { + if (nodes[i].nodeName.match(/DIV|IMG/)) { + return nodes[i]; + } + } +} + +function hasIcon (node) { + return /png/.test(node.style.backgroundImage); +} + +suite('<iron-icon>', function() { + suite('basic behavior', function() { + var icon; + + setup(function() { + icon = fixture('TrivialIcon'); + }); + + test('can be assigned an icon with the src attribute', function() { + expect(iconElementFor(icon)).to.be.ok; + expect(iconElementFor(icon).src).to.match(/demo\/location\.png/); + }); + + test('can change its src dynamically', function() { + icon.src = 'foo.png'; + + expect(iconElementFor(icon).src).to.match(/foo\.png/); + }); + }); + + suite('lifecycle', function() { + var icon; + + setup(function() { + icon = document.createElement('iron-icon'); + }); + + teardown(function() { + if (icon.parentNode != null) { + Polymer.dom(icon.parentNode).removeChild(icon); + } + }); + + test('does not create icon until attached', function() { + icon.src = 'location.png'; + + var children = Polymer.dom(icon.root).querySelectorAll('img,svg'); + + expect(children.length).to.be.eql(0); + Polymer.dom(document.body).appendChild(icon); + Polymer.dom.flush(); + children = Polymer.dom(icon.root).querySelectorAll('img,svg'); + expect(children.length).to.be.eql(1); + }); + }); + + suite('when paired with an iconset', function() { + var icon; + + setup(function() { + var elements = fixture('IconFromIconset'); + + icon = elements[1]; + }); + + test('can be assigned an icon from the iconset', function() { + expect(hasIcon(icon)).to.be.ok; + }); + + test('can change its icon dynamically', function() { + var style = icon.style; + + expect(style.backgroundPosition).to.match(/0(%|px) 0(%|px)/); + + icon.icon = "example:blank"; + + expect(style.backgroundPosition).to.match(/-24px 0(%|px)/); + }); + }); + + suite('when no icon source is provided', function() { + test('will politely wait for an icon source without throwing', function() { + document.createElement('iron-icon'); + fixture('WithoutAnIconSource'); + }); + }) + + suite('when loading async', function() { + test('will get icon after iconset is added', function() { + var icon = fixture('UsingAsyncIconset'); + expect(hasIcon(icon)).to.be.false; + return new Promise(function(resolve, reject) { + window.addEventListener('iron-iconset-added', function() { + if (hasIcon(icon)) { + resolve(); + } else { + reject(new Error('icon didn\'t load after iconset loaded')); + } + }); + fixture('AsyncIconset'); + }); + }); + }); + + suite('when switching between src and icon properties', function() { + var icon; + + setup(function() { + var elements = fixture('IconFromIconset'); + icon = elements[1]; + }); + + test('will display the icon if both icon and src are set', function() { + icon.src = '../demo/location.png'; + icon.icon = 'example:location'; + expect(hasIcon(icon)).to.be.true; + expect(iconElementFor(icon)).to.not.exist; + + // Check if it works too it we change the affectation order + icon.icon = 'example:location'; + icon.src = '../demo/location.png'; + expect(hasIcon(icon)).to.be.true; + expect(iconElementFor(icon)).to.not.exist; + }); + + test('will display the icon when src is defined first and then reset', function() { + icon.src = '../demo/location.png'; + icon.icon = null; + icon.src = null; + icon.icon = 'example:location'; + expect(hasIcon(icon)).to.be.true; + expect(iconElementFor(icon)).to.not.exist; + }); + + test('will display the src when icon is defined first and then reset', function() { + icon.src = null; + icon.icon = 'example:location'; + icon.src = '../demo/location.png'; + icon.icon = null; + expect(hasIcon(icon)).to.be.false; + expect(iconElementFor(icon)).to.exist; + }); + + test('will display nothing if both properties are unset', function() { + icon.src = '../demo/location.png'; + icon.icon = 'example:location'; + icon.src = null; + icon.icon = null; + expect(hasIcon(icon)).to.be.false; + expect(iconElementFor(icon)).to.not.exist; + }); + }); + suite('ancestor direct updates', function() { + test('handle properties set before ready', function() { + var holder = fixture('ParentForceUpdate'); + }); + }); +}); + </script> + +</body> +</html> |
