| Index: third_party/polymer/components/core-image/demo.html
|
| diff --git a/third_party/polymer/components/core-image/demo.html b/third_party/polymer/components/core-image/demo.html
|
| deleted file mode 100644
|
| index 72c18e06deac4a1289fc173230c090964799fbee..0000000000000000000000000000000000000000
|
| --- a/third_party/polymer/components/core-image/demo.html
|
| +++ /dev/null
|
| @@ -1,175 +0,0 @@
|
| -<!--
|
| - @license
|
| - 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
|
| --->
|
| -<!doctype html>
|
| -<html>
|
| -<head>
|
| -
|
| - <title>core-image</title>
|
| -
|
| - <script src="../webcomponentsjs/webcomponents.js"></script>
|
| -
|
| - <link rel="import" href="core-image.html">
|
| -
|
| - <style>
|
| - .sized {
|
| - width: 200px;
|
| - height: 200px;
|
| - }
|
| - .gray {
|
| - background-color: lightgray;
|
| - }
|
| - .group {
|
| - display: inline-block;
|
| - vertical-align: top;
|
| - }
|
| - </style>
|
| -
|
| -</head>
|
| -<body unresolved>
|
| -
|
| -<template is="auto-binding">
|
| - <h3>Sizing: none (naturally sized)</h3>
|
| - <core-image src="http://lorempixel.com/400/200/sports/1"></core-image>
|
| -
|
| - <h3>Sizing: cover</h3>
|
| - <core-image class="sized" sizing="cover" src="http://lorempixel.com/400/200/sports/2"></core-image>
|
| - <core-image class="sized" sizing="cover" src="http://lorempixel.com/200/400/sports/3"></core-image>
|
| -
|
| - <h3>Sizing: contain</h3>
|
| - <core-image class="sized gray" sizing="contain" src="http://lorempixel.com/400/200/sports/2"></core-image>
|
| - <core-image class="sized gray" sizing="contain" src="http://lorempixel.com/200/400/sports/3"></core-image>
|
| -
|
| - <h3>Preload: none</h3>
|
| - <div class="group">
|
| - <div>No sizing</div>
|
| - <button on-tap="{{preload}}" target="preload1a">Load image</button><br><br>
|
| - <core-image id="preload1a" class="sized gray" ></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Cover</div>
|
| - <button on-tap="{{preload}}" target="preload1b">Load image</button><br><br>
|
| - <core-image id="preload1b" class="sized gray" sizing="cover" ></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Contain</div>
|
| - <button on-tap="{{preload}}" target="preload1c">Load image</button><br><br>
|
| - <core-image id="preload1c" class="sized gray" sizing="contain" ></core-image>
|
| - </div>
|
| -
|
| - <h3>Preload: color as placeholder</h3>
|
| - <div class="group">
|
| - <div>No sizing</div>
|
| - <button on-tap="{{preload}}" target="preload2a">Load image</button>
|
| - <span hidden?="{{!$.preload2a.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2a" class="sized gray" preload ></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Cover</div>
|
| - <button on-tap="{{preload}}" target="preload2b">Load image</button>
|
| - <span hidden?="{{!$.preload2b.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2b" class="sized gray" sizing="cover" preload ></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Contain</div>
|
| - <button on-tap="{{preload}}" target="preload2c">Load image</button>
|
| - <span hidden?="{{!$.preload2c.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2c" class="sized gray" sizing="contain" preload ></core-image>
|
| - </div>
|
| -
|
| - <h3>Preload: image as placeholder</h3>
|
| - <div class="group">
|
| - <div>No sizing</div>
|
| - <button on-tap="{{preload}}" target="preload3a">Load image</button>
|
| - <span hidden?="{{!$.preload3a.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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=="></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Cover</div>
|
| - <button on-tap="{{preload}}" target="preload3b">Load image</button>
|
| - <span hidden?="{{!$.preload3b.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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=="></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Contain</div>
|
| - <button on-tap="{{preload}}" target="preload3c">Load image</button>
|
| - <span hidden?="{{!$.preload3c.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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=="></core-image>
|
| - </div>
|
| -
|
| - <h3>Preload: color as placeholder, with Fade-in</h3>
|
| - <div class="group">
|
| - <div>No sizing</div>
|
| - <button on-tap="{{preload}}" target="preload2afade">Load image</button>
|
| - <span hidden?="{{!$.preload2afade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2afade" class="sized gray" preload fade></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Cover</div>
|
| - <button on-tap="{{preload}}" target="preload2bfade">Load image</button>
|
| - <span hidden?="{{!$.preload2bfade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2bfade" class="sized gray" sizing="cover" preload fade></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Contain</div>
|
| - <button on-tap="{{preload}}" target="preload2cfade">Load image</button>
|
| - <span hidden?="{{!$.preload2cfade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image id="preload2cfade" class="sized gray" sizing="contain" preload fade></core-image>
|
| - </div>
|
| -
|
| - <h3>Preload: image as placeholder, with Fade-in</h3>
|
| - <div class="group">
|
| - <div>No sizing</div>
|
| - <button on-tap="{{preload}}" target="preload3afade">Load image</button>
|
| - <span hidden?="{{!$.preload3afade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Cover</div>
|
| - <button on-tap="{{preload}}" target="preload3bfade">Load image</button>
|
| - <span hidden?="{{!$.preload3bfade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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></core-image>
|
| - </div>
|
| - <div class="group">
|
| - <div>Contain</div>
|
| - <button on-tap="{{preload}}" target="preload3cfade">Load image</button>
|
| - <span hidden?="{{!$.preload3cfade.loading}}">Loading...</span>
|
| - <br><br>
|
| - <core-image 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></core-image>
|
| - </div>
|
| -
|
| -</template>
|
| -
|
| -<script>
|
| -
|
| - addEventListener('template-bound', function(e) {
|
| -
|
| - var scope = e.target;
|
| - scope.preload = function(e) {
|
| - var img = document.querySelector('#' + e.target.getAttribute('target'));
|
| - img.src = 'http://lorempixel.com/1920/1080?' + Math.random();
|
| - e.target.textContent = 'Reload image';
|
| - };
|
| - });
|
| -
|
| -</script>
|
| -
|
| -</body>
|
| -</html>
|
|
|