haopengzhan/CoderSherlock.github.io
1
0
Fork 0
mirror of https://github.com/CoderSherlock/CoderSherlock.github.io.git synced 2026-06-13 08:08:10 -07:00
Code Issues Packages Projects Releases Wiki Activity

I_changed_another_theme

Browse Source
This commit is contained in:
CoderSherlock
2016-08-16 20:03:40 -04:00
parent 23434adfb0
commit 3d1bca5d8b
345 changed files with 47813 additions and 2571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bower_components/iron-image/.bower.json
Vendored
+40
View File
@@ -0,0 +1,40 @@
{
"name": "iron-image",
"version": "1.0.2",
"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.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.4",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
},
"homepage": "https://github.com/PolymerElements/iron-image",
"_release": "1.0.2",
"_resolution": {
"type": "version",
"tag": "v1.0.2",
"commit": "f3d3090dc9a59b662f67c9c7dd1fc61e716f353d"
},
"_source": "git://github.com/PolymerElements/iron-image.git",
"_target": "^1.0.0",
"_originalSource": "PolymerElements/iron-image"
}
bower_components/iron-image/.gitignore
+1
View File
@@ -0,0 +1 @@
bower_components
bower_components/iron-image/README.md
Vendored
+60
View File
@@ -0,0 +1,60 @@
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>
```
bower_components/iron-image/bower.json
Vendored
+30
View File
@@ -0,0 +1,30 @@
{
"name": "iron-image",
"version": "1.0.2",
"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.0.0"
},
"devDependencies": {
"paper-styles": "polymerelements/paper-styles#^1.0.4",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"web-component-tester": "*",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
}
}
bower_components/iron-image/demo/index.html
Vendored
+183
View File
@@ -0,0 +1,183 @@
<!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="stylesheet" href="../../paper-styles/demo.css">
<link rel="import" href="../iron-image.html">
<style>
.sized {
width: 200px;
height: 200px;
}
.gray {
background-color: lightgray;
}
.group {
display: inline-block;
vertical-align: top;
}
[hidden] {
display: none;
}
.controls {
display: block;
margin-bottom: 1em;
}
</style>
</head>
<body unresolved>
<template is="dom-bind">
<h3>Sizing: none (naturally sized)</h3>
<iron-image src="./polymer.svg"></iron-image>
<h3>Sizing: cover</h3>
<iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
<iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
<h3>Sizing: contain</h3>
<iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
<iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
<h3>Preload: none</h3>
<div class="group">
<div>No sizing</div>
<div class="controls">
<button on-click="preload" target="preload1a">Load image</button>
</div>
<iron-image id="preload1a" class="sized gray" ></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload1b">Load image</button></div>
<iron-image id="preload1b" class="sized gray" sizing="cover" ></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload1c">Load image</button></div>
<iron-image id="preload1c" class="sized gray" sizing="contain" ></iron-image>
</div>
<h3>Preload: color as placeholder</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload2a">Load image</button>
<span hidden$="[[!loading2a]]">Loading...</span></div>
<iron-image loading="{{loading2a}}" id="preload2a" class="sized gray" preload></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload2b">Load image</button>
<span hidden$="[[!loading2b]]">Loading...</span></div>
<iron-image loading="{{loading2b}}" id="preload2b" class="sized gray" sizing="cover" preload ></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload2c">Load image</button>
<span hidden$="[[!loading2c]]">Loading...</span></div>
<iron-image loading="{{loading2c}}" id="preload2c" class="sized gray" sizing="contain" preload ></iron-image>
</div>
<h3>Preload: image as placeholder</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload3a">Load image</button>
<span hidden$="[[!loading3a]]">Loading...</span></div>
<iron-image loading="{{loading3a}}" id="preload3a" class="sized gray" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload3b">Load image</button>
<span hidden$="[[!loading3b]]">Loading...</span></div>
<iron-image loading="{{loading3b}}" id="preload3b" class="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload3c">Load image</button>
<span hidden$="[[!loading3c]]">Loading...</span></div>
<iron-image loading="{{loading3c}}" id="preload3c" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
</div>
<h3>Preload: color as placeholder, with Fade-in</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload2afade">Load image</button>
<span hidden$="[[!loading2aFade]]">Loading...</span></div>
<iron-image loading="{{loading2aFade}}" id="preload2afade" class="sized gray" preload fade></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload2bfade">Load image</button>
<span hidden$="[[!loading2bFade]]">Loading...</span></div>
<iron-image loading="{{loading2bFade}}" id="preload2bfade" class="sized gray" sizing="cover" preload fade></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload2cfade">Load image</button>
<span hidden$="[[!loading2cFade]]">Loading...</span></div>
<iron-image loading="{{loading2cFade}}" id="preload2cfade" class="sized gray" sizing="contain" preload fade></iron-image>
</div>
<h3>Preload: image as placeholder, with Fade-in</h3>
<div class="group">
<div>No sizing</div>
<div class="controls"><button on-click="preload" target="preload3afade">Load image</button>
<span hidden$="[[!loading3aFade]]">Loading...</span></div>
<iron-image loading="{{loading3aFade}}" id="preload3afade" class="sized gray" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
<div class="group">
<div>Cover</div>
<div class="controls"><button on-click="preload" target="preload3bfade">Load image</button>
<span hidden$="[[!loading3bFade]]">Loading...</span></div>
<iron-image loading="{{loading3bFade}}" id="preload3bfade" class="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
<div class="group">
<div>Contain</div>
<div class="controls"><button on-click="preload" target="preload3cfade">Load image</button>
<span hidden$="[[!loading3cFade]]">Loading...</span></div>
<iron-image loading="{{loading3cFade}}" id="preload3cfade" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
</div>
</template>
<script>
var scope = document.querySelector('template[is=dom-bind]');
scope.preload = function(e) {
var img = document.querySelector('#' + e.target.getAttribute('target'));
img.src = './polymer.svg?' + Math.random();
e.target.textContent = 'Reload image';
};
</script>
</body>
</html>
bower_components/iron-image/demo/polymer.svg
Vendored
+175
View File
@@ -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="416px" height="286px" 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>
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

bower_components/iron-image/index.html
Vendored
+24
View File
@@ -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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<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>
bower_components/iron-image/iron-image.html
Vendored
+354
View File
@@ -0,0 +1,354 @@
<!--
@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/classes/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 &lt;img src="..."&gt; 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>
@group Iron Elements
@element iron-image
@demo demo/index.html
-->
<dom-module id="iron-image">
<style>
:host {
display: inline-block;
overflow: hidden;
position: relative;
}
:host([sizing]) #img {
display: none;
}
#placeholder {
background-color: inherit;
opacity: 1;
}
#placeholder.faded-out {
transition: opacity 0.5s linear;
opacity: 0;
}
</style>
<template>
<img id="img" role="none" hidden$="[[_computeImageVisibility(sizing)]]">
<div id="placeholder" hidden$="[[_computePlaceholderVisibility(fade,loaded,preload)]]" class$="[[_computePlaceholderClassName(fade,loaded,preload)]]"></div>
<content></content>
</template>
</dom-module>
<script>
Polymer({
is: 'iron-image',
properties: {
/**
* The URL of an image.
*/
src: {
observer: '_srcChanged',
type: String,
value: ''
},
/**
* 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
},
/**
* 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
},
/**
* When a sizing option is uzed (`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
*/
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
},
/**
* 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,
type: Boolean,
value: false
},
/**
* Read-only value that tracks the loading state of the image when the `preload`
* option is used.
*/
loading: {
notify: 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
},
_placeholderBackgroundUrl: {
type: String,
computed: '_computePlaceholderBackgroundUrl(preload,placeholder)',
observer: '_placeholderBackgroundUrlChanged'
},
requiresPreload: {
type: Boolean,
computed: '_computeRequiresPreload(preload,loaded)'
},
canLoad: {
type: Boolean,
computed: '_computeCanLoad(preventLoad, src)'
}
},
observers: [
'_transformChanged(sizing, position)',
'_loadBehaviorChanged(canLoad, preload, loaded)',
'_loadStateChanged(src, preload, loaded)',
],
ready: function() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'img');
}
},
_computeImageVisibility: function() {
return !!this.sizing;
},
_computePlaceholderVisibility: function() {
return !this.preload || (this.loaded && !this.fade);
},
_computePlaceholderClassName: function() {
if (!this.preload) {
return '';
}
var className = 'fit';
if (this.loaded && this.fade) {
className += ' faded-out';
}
return className;
},
_computePlaceholderBackgroundUrl: function() {
if (this.preload && this.placeholder) {
return 'url(' + this.placeholder + ')';
}
return null;
},
_computeRequiresPreload: function() {
return this.preload && !this.loaded;
},
_computeCanLoad: function() {
return Boolean(!this.preventLoad && this.src);
},
_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';
},
_srcChanged: function(newSrc, oldSrc) {
if (newSrc !== oldSrc) {
this.loaded = false;
}
},
_placeholderBackgroundUrlChanged: function() {
this.$.placeholder.style.backgroundImage =
this._placeholderBackgroundUrl;
},
_transformChanged: function() {
var placeholderStyle = this.$.placeholder.style;
this.style.backgroundSize =
placeholderStyle.backgroundSize = this.sizing;
this.style.backgroundPosition =
placeholderStyle.backgroundPosition =
this.sizing ? this.position : '';
this.style.backgroundRepeat =
placeholderStyle.backgroundRepeat =
this.sizing ? 'no-repeat' : '';
},
_loadBehaviorChanged: function() {
var img;
if (!this.canLoad) {
return;
}
if (this.requiresPreload) {
img = new Image();
img.src = this.src;
this.loading = true;
img.onload = function() {
this.loading = false;
this.loaded = true;
}.bind(this);
} else {
this.loaded = true;
}
},
_loadStateChanged: function() {
if (this.requiresPreload) {
return;
}
if (this.sizing) {
this.style.backgroundImage = this.src ? 'url(' + this.src + ')': '';
} else {
this.$.img.src = this.src || '';
}
}
});
</script>
bower_components/iron-image/test/index.html
Vendored
+25
View File
@@ -0,0 +1,25 @@
<!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'
]);
</script>
</body>
</html>
bower_components/iron-image/test/iron-image.html
Vendored
+78
View File
@@ -0,0 +1,78 @@
<!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">
</head>
<body>
<test-fixture id="TrivialImage">
<template>
<iron-image></iron-image>
</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('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) {
done();
} else {
image.src = randomImageUrl();
image.removeEventListener('loaded-changed', onLoadedChanged);
}
}
});
image.src = randomImageUrl();
});
});
});
</script>
</body>
</html>