Remove Polymer 0.5.

third_party/polymer/components/core-image/core-image.html

-<!--
-Copyright (c) 2014 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
--->
-
-<!--
-`core-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:
-
-    <core-image src="http://lorempixel.com/400/400"></core-image>
-
-  Will letterbox the image to fit:
-
-    <core-image style="width:400px; height:400px;" sizing="contain"
-      src="http://lorempixel.com/600/400"></core-image>
-
-  Will crop the image to fit:
-
-    <core-image style="width:400px; height:400px;" sizing="cover"
-      src="http://lorempixel.com/600/400"></core-image>
-
-  Will show light-gray background until the image loads:
-
-    <core-image style="width:400px; height:400px; background-color: lightgray;" 
-      sizing="cover" preload src="http://lorempixel.com/600/400"></core-image>
-
-  Will show a base-64 encoded placeholder image until the image loads:
-
-    <core-image style="width:400px; height:400px;" placeholder="data:image/gif;base64,..." 
-      sizing="cover" preload src="http://lorempixel.com/600/400"></core-image>
-
-  Will fade the light-gray background out once the image is loaded:
-
-    <core-image style="width:400px; height:400px; background-color: lightgray;" 
-      sizing="cover" preload fade src="http://lorempixel.com/600/400"></core-image>
-
-    
-@group Polymer Core Elements
-@element core-image
-@homepage github.io
--->
-
-<link rel="import" href="../polymer/polymer.html">
-
-<polymer-element name="core-image">
-<template>
-  <link rel="stylesheet" href="core-image.css">
-  <template if="{{!sizing}}">
-    <img id="img">
-  </template>
-  <template if="{{preload && fade}}">
-    <div id="placeholder" fit></div>
-  </template>
-  <content></content>
-</template>
-<script>
-
-  Polymer({
-    
-    publish: {
-
-      /**
-       * The URL of an image.
-       *
-       * @attribute src
-       * @type string
-       * @default null
-       */
-      src: null,
-
-      /**
-       * When false, 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.
-       *
-       * @attribute src
-       * @type string
-       * @default null
-       */
-      load: true,
-
-      /**
-       * 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).
-       *
-       * @attribute sizing
-       * @type string
-       * @default null
-       */
-      sizing: null,
-
-      /**
-       * When a sizing option is uzed (`cover` or `contain`), this determines
-       * how the image is aligned within the element bounds.
-       *
-       * @attribute position
-       * @type string
-       * @default 'center'
-       */
-      position: 'center',
-
-      /**
-       * When `true`, any change to the `src` property will cause the `placeholder`
-       * image to be shown until the 
-       *
-       * @attribute preload
-       * @type boolean
-       * @default false
-       */
-      preload: 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.
-       *
-       * @attribute placeholder
-       * @type string
-       * @default null
-       */
-      placeholder: null,
-
-      /**
-       * When `preload` is true, setting `fade` to true will cause the image to
-       * fade into place.
-       *
-       * @attribute fade
-       * @type boolean
-       * @default false
-       */
-      fade: false,
-
-      /**
-       * Read-only value that tracks the loading state of the image when the `preload`
-       * option is used.
-       *
-       * @attribute loading
-       * @type boolean
-       * @default false
-       */
-      loading: false,
-
-      /**
-       * Can be used to set the width of image (e.g. via binding); size may also be
-       * set via CSS.
-       *
-       * @attribute width
-       * @type number
-       * @default null
-       */
-      width: 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: null
-
-    },
-
-    observe: {
-      'preload color sizing position src fade': 'update'
-    },
-
-    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';
-    },
-
-    update: function() {
-      this.style.backgroundSize = this.sizing;
-      this.style.backgroundPosition = this.sizing ? this.position : null;
-      this.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
-      if (this.preload) {
-        if (this.fade) {
-          if (!this._placeholderEl) {
-            this._placeholderEl = this.shadowRoot.querySelector('#placeholder');
-          }
-          this._placeholderEl.style.backgroundSize = this.sizing;
-          this._placeholderEl.style.backgroundPosition = this.sizing ? this.position : null;
-          this._placeholderEl.style.backgroundRepeat = this.sizing ? 'no-repeat' : null;
-          this._placeholderEl.classList.remove('fadein');
-          this._placeholderEl.style.backgroundImage = (this.load && this.placeholder) ? 'url(' + this.placeholder + ')': null;
-        } else {
-          this._setSrc(this.placeholder);
-        }
-        if (this.load && this.src) {
-          var img = new Image();
-          img.src = this.src;
-          this.loading = true;
-          img.onload = function() {
-            this._setSrc(this.src);
-            this.loading = false;
-            if (this.fade) {
-              this._placeholderEl.classList.add('fadein');
-            }
-          }.bind(this);
-        }
-      } else {
-        this._setSrc(this.src);
-      }
-    },
-
-    _setSrc: function(src) {
-      if (this.sizing) {
-        this.style.backgroundImage = src ? 'url(' + src + ')': '';
-      } else {
-        this.$.img.src = src || '';
-      }
-    }
-
-  });
-
-</script>
-</polymer-element>