Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(683)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: polymer_1.0.4/bower_components/iron-image/demo/index.html

Issue 1205703007: Add polymer 1.0 to npm_modules (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Renamed folder to 1.0.4 Created 5 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « polymer_1.0.4/bower_components/iron-image/bower.json ('k') | polymer_1.0.4/bower_components/iron-image/demo/polymer.svg » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!doctype html>
2 <!--
3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 -->
11 <html>
12 <head>
13
14 <title>iron-image</title>
15
16 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
17
18 <link rel="stylesheet" href="../../paper-styles/demo.css">
19 <link rel="import" href="../iron-image.html">
20
21 <style>
22 .sized {
23 width: 200px;
24 height: 200px;
25 }
26 .gray {
27 background-color: lightgray;
28 }
29 .group {
30 display: inline-block;
31 vertical-align: top;
32 }
33
34 [hidden] {
35 display: none;
36 }
37
38 .controls {
39 display: block;
40 margin-bottom: 1em;
41 }
42 </style>
43
44 </head>
45 <body unresolved>
46
47 <template is="dom-bind">
48 <h3>Sizing: none (naturally sized)</h3>
49 <iron-image src="./polymer.svg"></iron-image>
50
51 <h3>Sizing: cover</h3>
52 <iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
53 <iron-image class="sized" sizing="cover" src="./polymer.svg"></iron-image>
54
55 <h3>Sizing: contain</h3>
56 <iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iro n-image>
57 <iron-image class="sized gray" sizing="contain" src="./polymer.svg"></iro n-image>
58
59 <h3>Preload: none</h3>
60 <div class="group">
61 <div>No sizing</div>
62 <div class="controls">
63 <button on-click="preload" target="preload1a">Load image</button>
64 </div>
65 <iron-image id="preload1a" class="sized gray" ></iron-image>
66 </div>
67 <div class="group">
68 <div>Cover</div>
69 <div class="controls"><button on-click="preload" target="preload1b">Load image</button></div>
70 <iron-image id="preload1b" class="sized gray" sizing="cover" ></iron-ima ge>
71 </div>
72 <div class="group">
73 <div>Contain</div>
74 <div class="controls"><button on-click="preload" target="preload1c">Load image</button></div>
75 <iron-image id="preload1c" class="sized gray" sizing="contain" ></iron-i mage>
76 </div>
77
78 <h3>Preload: color as placeholder</h3>
79 <div class="group">
80 <div>No sizing</div>
81 <div class="controls"><button on-click="preload" target="preload2a">Load image</button>
82 <span hidden$="[[!loading2a]]">Loading...</span></div>
83
84 <iron-image loading="{{loading2a}}" id="preload2a" class="sized gray" pr eload></iron-image>
85 </div>
86 <div class="group">
87 <div>Cover</div>
88 <div class="controls"><button on-click="preload" target="preload2b">Load image</button>
89 <span hidden$="[[!loading2b]]">Loading...</span></div>
90
91 <iron-image loading="{{loading2b}}" id="preload2b" class="sized gray" si zing="cover" preload ></iron-image>
92 </div>
93 <div class="group">
94 <div>Contain</div>
95 <div class="controls"><button on-click="preload" target="preload2c">Load image</button>
96 <span hidden$="[[!loading2c]]">Loading...</span></div>
97
98 <iron-image loading="{{loading2c}}" id="preload2c" class="sized gray" si zing="contain" preload ></iron-image>
99 </div>
100
101 <h3>Preload: image as placeholder</h3>
102 <div class="group">
103 <div>No sizing</div>
104 <div class="controls"><button on-click="preload" target="preload3a">Load image</button>
105 <span hidden$="[[!loading3a]]">Loading...</span></div>
106
107 <iron-image loading="{{loading3a}}" id="preload3a" class="sized gray" pr eload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8c LCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ 5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9 /wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK 2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFN uu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/g wnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+ pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoE Srty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+ r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv7 79+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklm jiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
108 </div>
109
110 <div class="group">
111 <div>Cover</div>
112 <div class="controls"><button on-click="preload" target="preload3b">Load image</button>
113 <span hidden$="[[!loading3b]]">Loading...</span></div>
114
115 <iron-image loading="{{loading3b}}" id="preload3b" class="sized gray" si zing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5a WlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau 9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB 4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKG io6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQE FrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ 9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgi HkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwS gUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG 1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6f Gvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx 26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
116 </div>
117
118 <div class="group">
119 <div>Contain</div>
120 <div class="controls"><button on-click="preload" target="preload3c">Load image</button>
121 <span hidden$="[[!loading3c]]">Loading...</span></div>
122
123 <iron-image loading="{{loading3c}}" id="preload3c" class="sized gray" si zing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/ 5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDIS au9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4 LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6fo KGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUB QEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAX iZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcT giHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0ll wSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22 OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn 6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhh hx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
124 </div>
125
126 <h3>Preload: color as placeholder, with Fade-in</h3>
127 <div class="group">
128 <div>No sizing</div>
129 <div class="controls"><button on-click="preload" target="preload2afade"> Load image</button>
130 <span hidden$="[[!loading2aFade]]">Loading...</span></div>
131
132 <iron-image loading="{{loading2aFade}}" id="preload2afade" class="sized gray" preload fade></iron-image>
133 </div>
134 <div class="group">
135 <div>Cover</div>
136 <div class="controls"><button on-click="preload" target="preload2bfade"> Load image</button>
137 <span hidden$="[[!loading2bFade]]">Loading...</span></div>
138
139 <iron-image loading="{{loading2bFade}}" id="preload2bfade" class="sized gray" sizing="cover" preload fade></iron-image>
140 </div>
141 <div class="group">
142 <div>Contain</div>
143 <div class="controls"><button on-click="preload" target="preload2cfade"> Load image</button>
144 <span hidden$="[[!loading2cFade]]">Loading...</span></div>
145
146 <iron-image loading="{{loading2cFade}}" id="preload2cfade" class="sized gray" sizing="contain" preload fade></iron-image>
147 </div>
148
149 <h3>Preload: image as placeholder, with Fade-in</h3>
150 <div class="group">
151 <div>No sizing</div>
152 <div class="controls"><button on-click="preload" target="preload3afade"> Load image</button>
153 <span hidden$="[[!loading3aFade]]">Loading...</span></div>
154
155 <iron-image loading="{{loading3aFade}}" id="preload3afade" class="sized gray" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9 jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/ 9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+ i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6Slpq eoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAg IqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAx huo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1Ah KxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAO rJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4b Yb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/ Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHII Yo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
156 </div>
157 <div class="group">
158 <div>Cover</div>
159 <div class="controls"><button on-click="preload" target="preload3bfade"> Load image</button>
160 <span hidden$="[[!loading3bFade]]">Loading...</span></div>
161
162 <iron-image loading="{{loading3bFade}}" id="preload3bfade" class="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOM AAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAA E/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHb L7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpu cnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tY qA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3io cDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74B MnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v2 51m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRF Li7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9Bx LZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YU YZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
163 </div>
164 <div class="group">
165 <div>Contain</div>
166 <div class="controls"><button on-click="preload" target="preload3cfade"> Load image</button>
167 <span hidden$="[[!loading3cFade]]">Loading...</span></div>
168
169 <iron-image loading="{{loading3cFade}}" id="preload3cfade" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIA OMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIA AAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/Yr HbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZm pucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1 tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3 iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ7 4BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4 v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJl RFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9 BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4 YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-image>
170 </div>
171 </template>
172
173 <script>
174 var scope = document.querySelector('template[is=dom-bind]');
175
176 scope.preload = function(e) {
177 var img = document.querySelector('#' + e.target.getAttribute('target'));
178 img.src = './polymer.svg?' + Math.random();
179 e.target.textContent = 'Reload image';
180 };
181 </script>
182 </body>
183 </html>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/iron-image/bower.json ('k') | polymer_1.0.4/bower_components/iron-image/demo/polymer.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698