jekyll-polymer-magazine 0.1.0

data/assets/bower_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>

data/assets/bower_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>

data/assets/bower_components/iron-image/iron-image.html

@@ -0,0 +1,404 @@
+<!--
+@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) {
+        var baseURI = /** @type {string} */(this.ownerDocument.baseURI);
+        return (new URL(Polymer.ResolveUrl.resolveUrl(testSrc, baseURI), baseURI)).href;
+      }
+    });
+  </script>
+</dom-module>