Index: third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html |
diff --git a/third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html b/third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html |
deleted file mode 100644 |
index b284ed08dbadedfb217f3d8c0b96726eb26d1f98..0000000000000000000000000000000000000000 |
--- a/third_party/polymer/v0_8/components-chromium/iron-image/iron-image.html |
+++ /dev/null |
@@ -1,101 +0,0 @@ |
-<!-- |
-@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><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 <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> |
- |
- |
-@group Iron Elements |
-@element iron-image |
-@demo demo/index.html |
---> |
- |
-</head><body><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 src="iron-image-extracted.js"></script></body></html> |