diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-image')
13 files changed, 1482 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-image/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/iron-image/.github/ISSUE_TEMPLATE.md new file mode 100755 index 00000000..d7459c59 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/iron-image/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-image/.gitignore b/catapult/third_party/polymer/components/iron-image/.gitignore new file mode 100755 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/iron-image/.travis.yml b/catapult/third_party/polymer/components/iron-image/.travis.yml new file mode 100755 index 00000000..74afb743 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/.travis.yml @@ -0,0 +1,23 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: citR35FLXNRA4C4o5Gl7gb6yvFhOq3rTd9+IQ8i9Zcf2TV2Ip2wCNANNXOvJV8szsu2fhZLttSclpW+MVePsW3ORYWOVm9neZeTczzNZkUExRKOztAyaujzzIgRd+f5ClJOsjUfGVLWKKWgKMJ8UT4pNRgqwKe4V73oW7LhYpto= + - secure: bWeuwHFJSBQu3v2K5I2++tCWh3K05I8NEfi6mywbrxuiOCGNvCWFLTO42+aqUp/yAnolNIKYR5NJFtty5CX2YD4oaRbryk2gzv7UtpIXRx9Jqhe7b/UBzfHIxPoT12TFS/iub+oRnZPAVPPoDrXwwoHkWltZHZwpOVTp86T6DPI= +node_js: stable +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable + sauce_connect: true +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-image/CONTRIBUTING.md b/catapult/third_party/polymer/components/iron-image/CONTRIBUTING.md new file mode 100755 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/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-image/README.md b/catapult/third_party/polymer/components/iron-image/README.md new file mode 100755 index 00000000..37979626 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/README.md @@ -0,0 +1,86 @@ + +<!--- + +This README is automatically generated from the comments in these files: +iron-image.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[](https://travis-ci.org/PolymerElements/iron-image) + +_[Demo and API docs](https://elements.polymer-project.org/elements/iron-image)_ + + +##<iron-image> + +`iron-image` is an element for displaying an image that provides useful sizing and +preloading options not found on the standard `<img>` tag. + +The `sizing` option allows the image to be either cropped (`cover`) or +letterboxed (`contain`) to fill a fixed user-size placed on the element. + +The `preload` option prevents the browser from rendering the image until the +image is fully loaded. In the interim, either the element's CSS `background-color` +can be be used as the placeholder, or the `placeholder` property can be +set to a URL (preferably a data-URI, for instant rendering) for an +placeholder image. + +The `fade` option (only valid when `preload` is set) will cause the placeholder +image/color to be faded out once the image is rendered. + +Examples: + + Basically identical to `<img src="...">` tag: + +```html +<iron-image src="http://lorempixel.com/400/400"></iron-image> +``` + + Will letterbox the image to fit: + +```html +<iron-image style="width:400px; height:400px;" sizing="contain" + src="http://lorempixel.com/600/400"></iron-image> +``` + + Will crop the image to fit: + +```html +<iron-image style="width:400px; height:400px;" sizing="cover" + src="http://lorempixel.com/600/400"></iron-image> +``` + + Will show light-gray background until the image loads: + +```html +<iron-image style="width:400px; height:400px; background-color: lightgray;" + sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> +``` + + Will show a base-64 encoded placeholder image until the image loads: + +```html +<iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..." + sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> +``` + + Will fade the light-gray background out once the image is loaded: + +```html +<iron-image style="width:400px; height:400px; background-color: lightgray;" + sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image> +``` + +| Custom property | Description | Default | +| --- | --- | --- | +| `--iron-image-placeholder` | Mixin applied to #placeholder | `{}` | +| `--iron-image-width` | Sets the width of the wrapped image | `auto` | +| `--iron-image-height` | Sets the height of the wrapped image | `auto` | + + diff --git a/catapult/third_party/polymer/components/iron-image/bower.json b/catapult/third_party/polymer/components/iron-image/bower.json new file mode 100755 index 00000000..9ac7b5d6 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/bower.json @@ -0,0 +1,33 @@ +{ + "name": "iron-image", + "version": "1.2.3", + "license": "http://polymer.github.io/LICENSE.txt", + "description": "An image-displaying element with lots of convenient features", + "private": true, + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "media" + ], + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/iron-image.git" + }, + "dependencies": { + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", + "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", + "paper-styles": "PolymerElements/paper-styles#^1.0.4", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "main": "iron-image.html", + "ignore": [] +} diff --git a/catapult/third_party/polymer/components/iron-image/demo/index.html b/catapult/third_party/polymer/components/iron-image/demo/index.html new file mode 100755 index 00000000..06c533cf --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/demo/index.html @@ -0,0 +1,266 @@ +<!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-image demo</title> + + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../polymer/polymer.html"> + <link rel="import" href="../iron-image.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + .example { + margin: 4px; + flex: 1; + } + + code { + white-space: nowrap; + } + </style> + + <script> + function load(id) { + document.getElementById(id).src = "./polymer.svg?" + Math.random(); + } + </script> + + </head> + <body unresolved> + + <div class="vertical-section-container centered"> + + <h3>A plain <code>iron-image</code>.</h3> + <demo-snippet class="centered-demo"> + <template> + <iron-image alt="The Polymer logo." src="./polymer.svg"></iron-image> + </template> + </demo-snippet> + + <h3> + <code>sizing="cover"</code> expands the image to cover all of its + specified size. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + #example-sizing-cover { + width: 150px; + height: 150px; + background: #ddd; + } + </style> + + <iron-image sizing="cover" id="example-sizing-cover" alt="The Polymer logo." src="./polymer.svg"></iron-image> + </template> + </demo-snippet> + + <h3> + <code>sizing="contain"</code> expands the image to fit within its + specified size. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + #example-sizing-contain { + width: 150px; + height: 150px; + background: #ddd; + } + </style> + + <iron-image sizing="contain" id="example-sizing-contain" alt="The Polymer logo." src="./polymer.svg"></iron-image> + </template> + </demo-snippet> + + <h3> + Use the <code>--iron-image-width</code> property to set the width of + the image wrapped by the <code>iron-image</code>. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + #example-full-width-container { + width: 200px; + border: 2px solid #444; + background: #444; + } + + #example-full-width-container iron-image { + background: #ddd; + } + + #example-full-width { + width: 100%; + --iron-image-width: 100%; + } + + #example-half-width { + width: 50%; + --iron-image-width: 100%; + } + </style> + + + <div id="example-full-width-container"> + <iron-image id="example-full-width" alt="The Polymer logo." src="./polymer.svg"></iron-image> + <iron-image id="example-half-width" alt="The Polymer logo." src="./polymer.svg"></iron-image> + </div> + </template> + </demo-snippet> + + <h3> + Use the <code>--iron-image-height</code> property to set the height of + the image wrapped by the <code>iron-image</code>. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + #example-full-height-container { + height: 150px; + border: 2px solid #444; + background: #444; + } + + #example-full-height-container iron-image{ + background: #ddd; + } + + #example-full-height { + height: 100%; + --iron-image-height: 100%; + } + + #example-half-height { + height: 50%; + --iron-image-height: 100%; + } + </style> + + + <div id="example-full-height-container"> + <iron-image id="example-full-height" alt="The Polymer logo." src="./polymer.svg"></iron-image> + <iron-image id="example-half-height" alt="The Polymer logo." src="./polymer.svg"></iron-image> + </div> + </template> + </demo-snippet> + + <h3> + No placeholder is shown by default. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + .example.without-preload iron-image { + width: 150px; + height: 150px; + background: #ddd; + } + </style> + + <div class="example without-preload"> + <button onclick="load('example-without-preload-1')"> + Load image + </button> + <br> + <iron-image sizing="contain" alt="The Polymer logo." id="example-without-preload-1"></iron-image> + </div> + </template> + </demo-snippet> + + <h3> + The <code>preload</code> attribute shows a placeholder element in front + of the image before it has loaded. Use the + <code>--iron-image-placeholder</code> CSS mixin to style it. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + .example.preload iron-image { + width: 150px; + height: 150px; + background: #ddd; + --iron-image-placeholder: { + background: #939ed5; + }; + } + </style> + + <div class="example preload"> + <button onclick="load('example-preload-1')"> + Load image + </button> + <br> + <iron-image preload id="example-preload-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image> + <br> + Without the <code>fade</code> attribute, the placeholder element is + hidden with no transition when the image loads. + </div> + <div class="example preload"> + <button onclick="load('example-preload-2')"> + Load image + </button> + <br> + <iron-image preload fade id="example-preload-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image> + <br> + With the <code>fade</code> attribute, the placeholder element is + fades away when the image loads. + </div> + </template> + </demo-snippet> + + <h3> + Use the <code>placeholder</code> attribute to specify a background image + for the placeholder element. + </h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + .example.preload-image iron-image { + width: 150px; + height: 150px; + background: #ddd; + } + </style> + + <div class="example preload-image"> + <button onclick="load('example-preload-image-1')"> + Load image + </button> + <br> + <iron-image preload placeholder="./loading.png" id="example-preload-image-1" alt="The Polymer logo." class="sized" sizing="contain"></iron-image> + <br> + (without <code>fade</code> attribute) + </div> + <div class="example preload-image"> + <button onclick="load('example-preload-image-2')"> + Load image + </button> + <br> + <iron-image preload placeholder="./loading.png" fade id="example-preload-image-2" alt="The Polymer logo." class="sized" sizing="contain"></iron-image> + <br> + (with <code>fade</code> attribute) + </div> + </template> + </demo-snippet> + + </div> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/iron-image/demo/loading.png b/catapult/third_party/polymer/components/iron-image/demo/loading.png Binary files differnew file mode 100644 index 00000000..a87e1719 --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/demo/loading.png diff --git a/catapult/third_party/polymer/components/iron-image/demo/polymer.svg b/catapult/third_party/polymer/components/iron-image/demo/polymer.svg new file mode 100755 index 00000000..f7a815dd --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/demo/polymer.svg @@ -0,0 +1,175 @@ +<?xml version="1.0" encoding="utf-8"?> +<!-- Generator: Adobe Illustrator 16.0.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" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" + width="208px" height="143px" viewBox="0 0 416 286" enable-background="new 0 0 416 286" xml:space="preserve"> +<g> + <g> + <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 125.436,214.5 "/> + <polygon fill="#3F51B5" points="331.842,0 290.561,71.5 331.842,143 373.121,71.5 "/> + <polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/> + <polygon fill="#FF4081" points="249.278,0 84.157,286 166.721,286 331.842,0 "/> + <polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.278,0 290.561,71.5 331.842,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.278,0 290.561,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.278,143 290.561,71.5 "/> + <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.278,143 "/> + <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.278,143 "/> + <polygon fill-opacity="0.3" points="125.438,214.5 166.721,143 208,214.5 "/> + <polygon fill-opacity="0.4" points="125.438,214.5 166.721,286 208,214.5 "/> + <polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/> + <polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/> + <polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/> + <polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/> + <polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/> + <g> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/> + <polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/> + <polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/> + </g> + </g> + <rect y="-65" fill="none" width="416" height="416"/> +</g> +<g display="none"> + <g display="inline"> + <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/> + <polygon fill="#3F51B5" points="331.842,0 249.278,0 331.842,143 373.121,71.5 "/> + <polygon fill="#7986CB" points="373.121,71.5 249.278,286 331.842,286 414.4,143 "/> + <polygon fill="#536DFE" points="84.157,0 1.596,143 42.878,214.5 166.721,0 "/> + <polygon fill-opacity="0.5" points="249.278,0 290.561,71.5 331.842,0 "/> + <polygon fill-opacity="0.5" points="84.157,286 125.438,214.5 166.721,286 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.438,71.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.438,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.438,71.5 "/> + <polygon fill-opacity="0.1" points="1.598,143 42.878,71.5 84.157,143 "/> + <polygon fill-opacity="0.2" points="1.598,143 42.878,214.5 84.157,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="125.438,214.5 84.157,143 42.878,214.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.842,143 290.561,71.5 "/> + <g> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.842,143 373.121,71.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.842,143 373.121,214.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="290.561,214.5 331.842,143 373.121,214.5 "/> + <polygon fill-opacity="0.1" points="290.561,214.5 331.842,286 373.121,214.5 "/> + <polygon fill-opacity="0.2" points="249.278,286 290.561,214.5 331.842,286 "/> + </g> + <polygon fill-opacity="0.2" points="125.438,214.5 84.157,286 42.878,214.5 "/> + <polygon fill-opacity="0.2" points="373.121,71.5 331.842,0 290.561,71.5 "/> + </g> + <rect y="-65" display="inline" fill="none" width="416" height="416"/> +</g> +<g display="none"> + <g display="inline"> + <polygon fill="#FF4081" points="249.279,0 84.157,286 166.721,286 331.843,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/> + <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/> + <polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/> + <polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/> + <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/> + <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/> + </g> + <g display="inline"> + <polygon fill="#FF4081" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/> + <polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/> + <polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/> + <polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/> + <polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/> + <polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/> + </g> + <g display="inline"> + <polygon fill="#FF4081" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/> + <polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/> + <polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/> + <polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/> + <polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/> + </g> + <rect y="-65" display="inline" fill="none" width="416" height="416"/> + <g display="inline"> + <polygon fill="#303F9F" points="84.157,143 42.878,214.5 84.157,286 166.721,286 "/> + <polygon fill="#3F51B5" points="331.843,0 249.279,0 331.843,143 373.121,71.5 "/> + <polygon fill="#7986CB" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/> + <polygon fill="#536DFE" points="84.157,0 1.597,143 42.878,214.5 166.721,0 "/> + <polygon fill-opacity="0.5" points="249.279,0 290.558,71.5 331.843,0 "/> + <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/> + <polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/> + <polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,214.5 84.157,143 42.878,214.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="373.121,71.5 331.843,143 290.558,71.5 "/> + <g> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="331.843,143 373.121,71.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="331.843,143 373.121,214.5 414.4,143 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,214.5 331.843,143 373.121,214.5 "/> + <polygon fill-opacity="0.1" points="290.558,214.5 331.843,286 373.121,214.5 "/> + <polygon fill-opacity="0.2" points="249.279,286 290.558,214.5 331.843,286 "/> + </g> + <polygon fill-opacity="0.2" points="125.439,214.5 84.157,286 42.878,214.5 "/> + <polygon fill-opacity="0.2" points="373.121,71.5 331.843,0 290.558,71.5 "/> + </g> +</g> +<g display="none"> + <g display="inline"> + <polygon fill="#9F499B" points="249.279,0 84.157,286 166.721,286 331.843,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="249.279,0 290.558,71.5 331.843,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="208,71.5 249.279,0 290.558,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="208,71.5 249.279,143 290.558,71.5 "/> + <polygon fill-opacity="0.2" points="166.721,143 208,214.5 249.279,143 "/> + <polygon fill-opacity="0.3" points="125.439,214.5 166.721,143 208,214.5 "/> + <polygon fill-opacity="0.4" points="125.439,214.5 166.721,286 208,214.5 "/> + <polygon fill-opacity="0.5" points="84.157,286 125.439,214.5 166.721,286 "/> + <polygon fill-opacity="0.1" points="166.721,143 208,71.5 249.279,143 "/> + </g> + <g display="inline"> + <polygon fill="#9F499B" points="331.84,0 166.718,286 249.279,286 373.121,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="290.558,71.5 331.84,0 373.121,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="290.558,71.5 331.84,143 373.121,71.5 "/> + <polygon fill-opacity="0.2" points="249.279,143 290.558,214.5 331.84,143 "/> + <polygon fill-opacity="0.3" points="208,214.5 249.279,143 290.558,214.5 "/> + <polygon fill-opacity="0.4" points="208,214.5 249.279,286 290.558,214.5 "/> + <polygon fill-opacity="0.5" points="166.718,286 208,214.5 249.279,286 "/> + <polygon fill-opacity="0.1" points="249.279,143 290.558,71.5 331.84,143 "/> + </g> + <g display="inline"> + <polygon fill="#9F499B" points="373.121,71.5 249.279,286 331.843,286 414.4,143 "/> + <polygon fill-opacity="0.2" points="331.843,143 373.121,214.5 414.4,143 "/> + <polygon fill-opacity="0.3" points="290.558,214.5 331.843,143 373.121,214.5 "/> + <polygon fill-opacity="0.4" points="290.558,214.5 331.843,286 373.121,214.5 "/> + <polygon fill-opacity="0.5" points="249.279,286 290.558,214.5 331.843,286 "/> + <polygon fill-opacity="0.1" points="331.843,143 373.121,71.5 414.4,143 "/> + </g> + <g display="inline"> + <polygon fill="#9F499B" points="166.718,0 42.878,214.5 84.16,286 249.279,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="166.718,0 208,71.5 249.279,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="125.439,71.5 166.718,0 208,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="125.439,71.5 166.718,143 208,71.5 "/> + <polygon fill-opacity="0.2" points="84.16,143 125.439,214.5 166.718,143 "/> + <polygon fill-opacity="0.3" points="42.878,214.5 84.16,143 125.439,214.5 "/> + <polygon fill-opacity="0.4" points="42.878,214.5 84.16,286 125.439,214.5 "/> + <polygon fill-opacity="0.1" points="84.16,143 125.439,71.5 166.718,143 "/> + </g> + <g display="inline"> + <polygon fill="#9F499B" points="84.157,0 1.6,143 42.878,214.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.2" points="84.157,0 125.439,71.5 166.721,0 "/> + <polygon fill="#FFFFFF" fill-opacity="0.1" points="42.878,71.5 84.157,0 125.439,71.5 "/> + <polygon fill="#FFFFFF" fill-opacity="0" points="42.878,71.5 84.157,143 125.439,71.5 "/> + <polygon fill-opacity="0.2" points="1.6,143 42.878,214.5 84.157,143 "/> + <polygon fill-opacity="0.1" points="1.6,143 42.878,71.5 84.157,143 "/> + </g> + <rect y="-65" display="inline" fill="none" width="416" height="416"/> +</g> +</svg> diff --git a/catapult/third_party/polymer/components/iron-image/index.html b/catapult/third_party/polymer/components/iron-image/index.html new file mode 100755 index 00000000..bb7da82e --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/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-image</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-image/iron-image.html b/catapult/third_party/polymer/components/iron-image/iron-image.html new file mode 100755 index 00000000..bf774d6c --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/iron-image.html @@ -0,0 +1,403 @@ +<!-- +@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-flex-layout/iron-flex-layout.html"> + +<!-- +`iron-image` is an element for displaying an image that provides useful sizing and +preloading options not found on the standard `<img>` tag. + +The `sizing` option allows the image to be either cropped (`cover`) or +letterboxed (`contain`) to fill a fixed user-size placed on the element. + +The `preload` option prevents the browser from rendering the image until the +image is fully loaded. In the interim, either the element's CSS `background-color` +can be be used as the placeholder, or the `placeholder` property can be +set to a URL (preferably a data-URI, for instant rendering) for an +placeholder image. + +The `fade` option (only valid when `preload` is set) will cause the placeholder +image/color to be faded out once the image is rendered. + +Examples: + + Basically identical to `<img src="...">` tag: + + <iron-image src="http://lorempixel.com/400/400"></iron-image> + + Will letterbox the image to fit: + + <iron-image style="width:400px; height:400px;" sizing="contain" + src="http://lorempixel.com/600/400"></iron-image> + + Will crop the image to fit: + + <iron-image style="width:400px; height:400px;" sizing="cover" + src="http://lorempixel.com/600/400"></iron-image> + + Will show light-gray background until the image loads: + + <iron-image style="width:400px; height:400px; background-color: lightgray;" + sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> + + Will show a base-64 encoded placeholder image until the image loads: + + <iron-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..." + sizing="cover" preload src="http://lorempixel.com/600/400"></iron-image> + + Will fade the light-gray background out once the image is loaded: + + <iron-image style="width:400px; height:400px; background-color: lightgray;" + sizing="cover" preload fade src="http://lorempixel.com/600/400"></iron-image> + +Custom property | Description | Default +----------------|-------------|---------- +`--iron-image-placeholder` | Mixin applied to #placeholder | `{}` +`--iron-image-width` | Sets the width of the wrapped image | `auto` +`--iron-image-height` | Sets the height of the wrapped image | `auto` + +@group Iron Elements +@element iron-image +@demo demo/index.html +--> + +<dom-module id="iron-image"> + <template> + <style> + :host { + display: inline-block; + overflow: hidden; + position: relative; + } + + #sizedImgDiv { + @apply(--layout-fit); + + display: none; + } + + #img { + display: block; + width: var(--iron-image-width, auto); + height: var(--iron-image-height, auto); + } + + :host([sizing]) #sizedImgDiv { + display: block; + } + + :host([sizing]) #img { + display: none; + } + + #placeholder { + @apply(--layout-fit); + + background-color: inherit; + opacity: 1; + + @apply(--iron-image-placeholder); + } + + #placeholder.faded-out { + transition: opacity 0.5s linear; + opacity: 0; + } + </style> + + <div id="sizedImgDiv" + role="img" + hidden$="[[_computeImgDivHidden(sizing)]]" + aria-hidden$="[[_computeImgDivARIAHidden(alt)]]" + aria-label$="[[_computeImgDivARIALabel(alt, src)]]"></div> + <img id="img" alt$="[[alt]]" hidden$="[[_computeImgHidden(sizing)]]"> + <div id="placeholder" + hidden$="[[_computePlaceholderHidden(preload, fade, loading, loaded)]]" + class$="[[_computePlaceholderClassName(preload, fade, loading, loaded)]]"></div> + </template> + + <script> + Polymer({ + is: 'iron-image', + + properties: { + /** + * The URL of an image. + */ + src: { + observer: '_srcChanged', + type: String, + value: '' + }, + + /** + * A short text alternative for the image. + */ + alt: { + type: String, + value: null + }, + + /** + * When true, the image is prevented from loading and any placeholder is + * shown. This may be useful when a binding to the src property is known to + * be invalid, to prevent 404 requests. + */ + preventLoad: { + type: Boolean, + value: false, + observer: '_preventLoadChanged' + }, + + /** + * Sets a sizing option for the image. Valid values are `contain` (full + * aspect ratio of the image is contained within the element and + * letterboxed) or `cover` (image is cropped in order to fully cover the + * bounds of the element), or `null` (default: image takes natural size). + */ + sizing: { + type: String, + value: null, + reflectToAttribute: true + }, + + /** + * When a sizing option is used (`cover` or `contain`), this determines + * how the image is aligned within the element bounds. + */ + position: { + type: String, + value: 'center' + }, + + /** + * When `true`, any change to the `src` property will cause the `placeholder` + * image to be shown until the new image has loaded. + */ + preload: { + type: Boolean, + value: false + }, + + /** + * This image will be used as a background/placeholder until the src image has + * loaded. Use of a data-URI for placeholder is encouraged for instant rendering. + */ + placeholder: { + type: String, + value: null, + observer: '_placeholderChanged' + }, + + /** + * When `preload` is true, setting `fade` to true will cause the image to + * fade into place. + */ + fade: { + type: Boolean, + value: false + }, + + /** + * Read-only value that is true when the image is loaded. + */ + loaded: { + notify: true, + readOnly: true, + type: Boolean, + value: false + }, + + /** + * Read-only value that tracks the loading state of the image when the `preload` + * option is used. + */ + loading: { + notify: true, + readOnly: true, + type: Boolean, + value: false + }, + + /** + * Read-only value that indicates that the last set `src` failed to load. + */ + error: { + notify: true, + readOnly: true, + type: Boolean, + value: false + }, + + /** + * Can be used to set the width of image (e.g. via binding); size may also be + * set via CSS. + */ + width: { + observer: '_widthChanged', + type: Number, + value: null + }, + + /** + * Can be used to set the height of image (e.g. via binding); size may also be + * set via CSS. + * + * @attribute height + * @type number + * @default null + */ + height: { + observer: '_heightChanged', + type: Number, + value: null + }, + }, + + observers: [ + '_transformChanged(sizing, position)' + ], + + ready: function() { + var img = this.$.img; + + img.onload = function() { + if (this.$.img.src !== this._resolveSrc(this.src)) return; + + this._setLoading(false); + this._setLoaded(true); + this._setError(false); + }.bind(this); + + img.onerror = function() { + if (this.$.img.src !== this._resolveSrc(this.src)) return; + + this._reset(); + + this._setLoading(false); + this._setLoaded(false); + this._setError(true); + }.bind(this); + + this._resolvedSrc = ''; + }, + + _load: function(src) { + if (src) { + this.$.img.src = src; + } else { + this.$.img.removeAttribute('src'); + } + this.$.sizedImgDiv.style.backgroundImage = src ? 'url("' + src + '")' : ''; + + this._setLoading(!!src); + this._setLoaded(false); + this._setError(false); + }, + + _reset: function() { + this.$.img.removeAttribute('src'); + this.$.sizedImgDiv.style.backgroundImage = ''; + + this._setLoading(false); + this._setLoaded(false); + this._setError(false); + }, + + _computePlaceholderHidden: function() { + return !this.preload || (!this.fade && !this.loading && this.loaded); + }, + + _computePlaceholderClassName: function() { + return (this.preload && this.fade && !this.loading && this.loaded) ? 'faded-out' : ''; + }, + + _computeImgDivHidden: function() { + return !this.sizing; + }, + + _computeImgDivARIAHidden: function() { + return this.alt === '' ? 'true' : undefined; + }, + + _computeImgDivARIALabel: function() { + if (this.alt !== null) { + return this.alt; + } + + // Polymer.ResolveUrl.resolveUrl will resolve '' relative to a URL x to + // that URL x, but '' is the default for src. + if (this.src === '') { + return ''; + } + + var pathComponents = (new URL(this._resolveSrc(this.src))).pathname.split("/"); + return pathComponents[pathComponents.length - 1]; + }, + + _computeImgHidden: function() { + return !!this.sizing; + }, + + _widthChanged: function() { + this.style.width = isNaN(this.width) ? this.width : this.width + 'px'; + }, + + _heightChanged: function() { + this.style.height = isNaN(this.height) ? this.height : this.height + 'px'; + }, + + _preventLoadChanged: function() { + if (this.preventLoad || this.loaded) return; + + this._reset(); + this._load(this.src); + }, + + _srcChanged: function(newSrc, oldSrc) { + var newResolvedSrc = this._resolveSrc(newSrc); + if (newResolvedSrc === this._resolvedSrc) return; + this._resolvedSrc = newResolvedSrc; + + this._reset(); + if (!this.preventLoad) { + this._load(newSrc); + } + }, + + _placeholderChanged: function() { + this.$.placeholder.style.backgroundImage = + this.placeholder ? 'url("' + this.placeholder + '")' : ''; + }, + + _transformChanged: function() { + var sizedImgDivStyle = this.$.sizedImgDiv.style; + var placeholderStyle = this.$.placeholder.style; + + sizedImgDivStyle.backgroundSize = + placeholderStyle.backgroundSize = + this.sizing; + + sizedImgDivStyle.backgroundPosition = + placeholderStyle.backgroundPosition = + this.sizing ? this.position : ''; + + sizedImgDivStyle.backgroundRepeat = + placeholderStyle.backgroundRepeat = + this.sizing ? 'no-repeat' : ''; + }, + + _resolveSrc: function(testSrc) { + return Polymer.ResolveUrl.resolveUrl(testSrc, this.ownerDocument.baseURI); + } + }); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/iron-image/test/index.html b/catapult/third_party/polymer/components/iron-image/test/index.html new file mode 100755 index 00000000..7145c47c --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/test/index.html @@ -0,0 +1,23 @@ +<!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"> + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <script src="../../web-component-tester/browser.js"></script> + </head> + <body> + <script> + WCT.loadSuites([ + 'iron-image.html', + 'iron-image.html?dom=shadow' + ]); + </script> + + +</body></html> diff --git a/catapult/third_party/polymer/components/iron-image/test/iron-image.html b/catapult/third_party/polymer/components/iron-image/test/iron-image.html new file mode 100755 index 00000000..162ff4ee --- /dev/null +++ b/catapult/third_party/polymer/components/iron-image/test/iron-image.html @@ -0,0 +1,338 @@ +<!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-image</title> + + <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="../../polymer/polymer.html"> + <link rel="import" href="../../test-fixture/test-fixture.html"> + <link rel="import" href="../iron-image.html"> + + <style is="custom-style"> + .fixed-width-container { + width: 500px; + } + + .fixed-width-container iron-image { + width: 100%; + --iron-image-width: 100%; + } + + .fixed-height-container { + height: 500px; + } + + .fixed-height-container iron-image { + height: 100%; + --iron-image-height: 100%; + } + </style> + </head> + <body> + <test-fixture id="TrivialImage"> + <template> + <iron-image></iron-image> + </template> + </test-fixture> + + <test-fixture id="FixedWidthContainer"> + <template> + <div class="fixed-width-container"> + <iron-image></iron-image> + </div> + </template> + </test-fixture> + + <test-fixture id="FixedHeightContainer"> + <template> + <div class="fixed-height-container"> + <iron-image></iron-image> + </div> + </template> + </test-fixture> + + <script> + suite('<iron-image>', function() { + function randomImageUrl () { + return '../demo/polymer.svg?' + Math.random(); + } + + var image; + + suite('basic behavior', function() { + setup(function() { + image = fixture('TrivialImage'); + }); + + test('loading, loaded, error are false before any src is set', function() { + expect(image.loading).to.be.eql(false); + expect(image.loaded).to.be.eql(false); + expect(image.error).to.be.eql(false); + }); + + test('loading, loaded, error are false when src is set to empty string', function(done) { + image.addEventListener('loaded-changed', function onLoadedChanged() { + if (image.loaded) { + image.removeEventListener('loaded-changed', onLoadedChanged); + image.addEventListener('loaded-changed', function onLoadedChanged2() { + image.removeEventListener('loaded-changed', onLoadedChanged2); + + expect(image.loading).to.be.eql(false); + expect(image.loaded).to.be.eql(false); + expect(image.error).to.be.eql(false); + done(); + }); + + expect(image.loading).to.be.eql(false); + expect(image.loaded).to.be.eql(true); + expect(image.error).to.be.eql(false); + image.src = ''; + } + }); + image.src = randomImageUrl(); + }); + + test('can load images given a src', function(done) { + image.addEventListener('loaded-changed', function onLoadedChanged() { + image.removeEventListener('loaded-changed', onLoadedChanged); + + try { + expect(image.loaded).to.be.eql(true); + done(); + } catch (e) { + done(e); + } + }); + image.src = randomImageUrl(); + }); + + test('will reload images when src changes', function(done) { + var loadCount = 0; + + image.addEventListener('loaded-changed', function onLoadedChanged() { + if (image.loaded === true) { + loadCount++; + + if (loadCount === 2) { + image.removeEventListener('loaded-changed', onLoadedChanged); + done(); + } else { + image.src = randomImageUrl(); + } + } + }); + + image.src = randomImageUrl(); + }); + + test('error property is set when the image fails to load', function(done) { + image.addEventListener('error-changed', function onErrorChanged() { + assert(image.error, 'image has error property set'); + image.removeEventListener('error-changed', onErrorChanged); + done(); + }); + + image.src = '/this_image_should_not_exist.jpg'; + }); + + // Test for PolymerElements/iron-image#16. + test('placeholder is hidden after loading when src is changed from invalid to valid', function(done) { + image.preload = true; + + image.addEventListener('error-changed', function onErrorChanged() { + image.removeEventListener('error-changed', onErrorChanged); + + assert.equal(image.loading, false, 'errored image loading = false'); + assert.equal(image.loaded, false, 'errored image loaded = false'); + assert.equal(image.error, true, 'errored image error = true'); + + image.addEventListener('loaded-changed', function onLoadedChanged() { + if (!image.loaded) return; + + image.removeEventListener('loaded-changed', onLoadedChanged); + + assert.equal(image.loading, false, 'ok image loading = false'); + assert.equal(image.loaded, true, 'ok image loaded = true'); + assert.equal(image.error, false, 'ok image error = false'); + assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder has style.display = none'); + + done(); + }); + + image.src = randomImageUrl(); + }); + + image.src = '/this_image_should_not_exist.jpg'; + }); + + // Test for PolymerElements/iron-image#23. + test('image is not shown below placeholder if previous image was loaded with' + + ' sizing on and current image fails to load', function(done) { + image.preload = true; + image.sizing = 'cover'; + + image.addEventListener('loaded-changed', function onLoadedChanged() { + if (!image.loaded) return; + image.removeEventListener('loaded-changed', onLoadedChanged); + + assert.notEqual(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image visible after successful load'); + assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder hidden after successful load'); + + image.addEventListener('error-changed', function onErrorChanged() { + if (!image.error) return; + image.removeEventListener('error-changed', onErrorChanged); + + assert.equal(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image hidden after failed load'); + assert.notEqual(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder visible after failed load'); + + done(); + }); + + image.src = '/this_image_should_not_exist.jpg'; + }); + + image.src = randomImageUrl(); + }); + }); + + suite('--iron-image-width, --iron-image-height', function() { + var fixedWidthContainer; + var fixedWidthIronImage; + var fixedHeightContainer; + var fixedHeightIronImage; + + setup(function() { + fixedWidthContainer = fixture('FixedWidthContainer'); + fixedWidthIronImage = fixedWidthContainer.querySelector('iron-image'); + fixedHeightContainer = fixture('FixedHeightContainer'); + fixedHeightIronImage = fixedHeightContainer.querySelector('iron-image'); + }); + + test('100% width image fills container', function(done) { + fixedWidthIronImage.$.img.addEventListener('load', function onLoadedChanged(e) { + fixedWidthIronImage.$.img.removeEventListener('load', onLoadedChanged); + Polymer.updateStyles(); + + var containerRect = fixedWidthContainer.getBoundingClientRect(); + var ironImageRect = fixedWidthIronImage.getBoundingClientRect(); + var wrappedImageRect = fixedWidthIronImage.$.img.getBoundingClientRect(); + + expect(containerRect.width).to.be.closeTo(500, 0.5); + expect(ironImageRect.width).to.be.closeTo(500, 0.5); + expect(wrappedImageRect.width).to.be.closeTo(500, 0.5); + + done(); + }); + + fixedWidthIronImage.src = randomImageUrl(); + }); + + test('100% height image fills container', function(done) { + fixedHeightIronImage.$.img.addEventListener('load', function onLoadedChanged(e) { + fixedHeightIronImage.$.img.removeEventListener('load', onLoadedChanged); + Polymer.updateStyles(); + + var containerRect = fixedHeightContainer.getBoundingClientRect(); + var ironImageRect = fixedHeightIronImage.getBoundingClientRect(); + var wrappedImageRect = fixedHeightIronImage.$.img.getBoundingClientRect(); + + expect(containerRect.height).to.be.closeTo(500, 0.5); + expect(ironImageRect.height).to.be.closeTo(500, 0.5); + expect(wrappedImageRect.height).to.be.closeTo(500, 0.5); + + done(); + }); + + fixedHeightIronImage.src = randomImageUrl(); + }); + }); + + suite('accessibility', function() { + suite('sizing inactive', function() { + var image; + + setup(function() { + image = fixture('TrivialImage'); + }); + + test('#sizedImgDiv is hidden', function() { + var sizedImgDivStyle = window.getComputedStyle(image.$.sizedImgDiv); + assert.strictEqual(sizedImgDivStyle.display, 'none'); + }); + + test('img has no alt text by default', function() { + assert.isFalse(image.$.img.hasAttribute('alt')); + }); + + test('img alt text is empty string when iron-image alt text is empty string', function() { + image.alt = ''; + + assert.isTrue(image.$.img.hasAttribute('alt')); + assert.strictEqual(image.$.img.getAttribute('alt'), ''); + }); + + test('img alt text matches iron-image alt text when defined', function() { + image.alt = 'alt text value'; + + assert.isTrue(image.$.img.hasAttribute('alt')); + assert.strictEqual(image.$.img.getAttribute('alt'), 'alt text value'); + }); + }); + + suite('sizing active', function() { + var image; + + setup(function() { + image = fixture('TrivialImage'); + image.sizing = 'cover'; + }); + + test('inner img is hidden', function() { + var imgStyle = window.getComputedStyle(image.$.img); + assert.strictEqual(imgStyle.display, 'none'); + }); + + test('#sizedImgDiv has empty aria-label text by default', function() { + assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); + assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), ''); + }); + + test('#sizedImgDiv has aria-hidden when iron-image alt text is empty string', function() { + image.alt = ''; + + assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-hidden')); + var hiddenValue = image.$.sizedImgDiv.getAttribute('aria-hidden'); + assert.isTrue(hiddenValue === '' || hiddenValue === 'true'); + }); + + test('#sizedImgDiv aria-label matches iron-image alt text when defined', function() { + image.alt = 'alt text value'; + + assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); + assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'alt text value'); + }); + + test('#sizedImgDiv aria-label text is last path component of src when iron-image alt text is undefined', function() { + image.src = '/some/path.components/file.jpg?a=b&c=d#anchor'; + + assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); + assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'file.jpg'); + }); + }); + }); + }); + </script> + </body> +</html> |
