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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: 1.2.3 Created 4 years, 11 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.2.3/bower_components/iron-image/bower.json ('k') | polymer_1.2.3/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
22 </head>
23 <body unresolved>
24
25 <demo-page></demo-page>
26 <dom-module is="demo-page">
27 <template>
28 <style is="custom-style">
29 .sized {
30 width: 200px;
31 height: 200px;
32 }
33 .gray {
34 background-color: lightgray;
35 }
36 .group {
37 display: inline-block;
38 vertical-align: top;
39 }
40
41 [hidden] {
42 display: none;
43 }
44
45 .controls {
46 display: block;
47 margin-bottom: 1em;
48 }
49
50 #full-width-container {
51 width: 450px;
52 height: 500px;
53 background: #eef;
54 }
55
56 #full-width-container iron-image {
57 width: 100%;
58 --iron-image-width: 100%;
59 }
60
61 #full-height-container {
62 height: 300px;
63 background: #eef;
64 }
65
66 #full-height-container iron-image {
67 height: 100%;
68 --iron-image-height: 100%;
69 }
70 </style>
71
72 <h3>Sizing: none (naturally sized)</h3>
73 <iron-image alt="The Polymer logo." src="./polymer.svg"></iron-image>
74
75 <h3>Sizing: cover</h3>
76 <iron-image alt="The Polymer logo." class="sized" sizing="cover" src="./ polymer.svg"></iron-image>
77 <iron-image alt="The Polymer logo." class="sized" sizing="cover" src="./ polymer.svg"></iron-image>
78
79 <h3>Sizing: contain</h3>
80 <iron-image alt="The Polymer logo." class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
81 <iron-image alt="The Polymer logo." class="sized gray" sizing="contain" src="./polymer.svg"></iron-image>
82
83 <h3>Full width</h3>
84 <div id="full-width-container">
85 <iron-image alt="The Polymer logo." class="gray" src="./polymer.svg">< /iron-image>
86 </div>
87
88 <h3>Full height</h3>
89 <div id="full-height-container">
90 <iron-image alt="The Polymer logo." class="gray" src="./polymer.svg">< /iron-image>
91 </div>
92
93 <h3>Preload: none</h3>
94 <div class="group">
95 <div>No sizing</div>
96 <div class="controls">
97 <button on-click="preload" target="preload1a">Load image</button>
98 </div>
99 <iron-image alt$="[[_computeLogoAltText(loading1a, loaded1a)]]" loadin g="{{loading1a}}" loaded="{{loaded1a}}" id="preload1a" class="sized gray"></iron -image>
100 </div>
101 <div class="group">
102 <div>Cover</div>
103 <div class="controls"><button on-click="preload" target="preload1b">Lo ad image</button></div>
104 <iron-image alt$="[[_computeLogoAltText(loading1b, loaded1b)]]" loadin g="{{loading1b}}" loaded="{{loaded1b}}" id="preload1b" class="sized gray" sizing ="cover"></iron-image>
105 </div>
106 <div class="group">
107 <div>Contain</div>
108 <div class="controls"><button on-click="preload" target="preload1c">Lo ad image</button></div>
109 <iron-image alt$="[[_computeLogoAltText(loading1c, loaded1c)]]" loadin g="{{loading1c}}" loaded="{{loaded1c}}" id="preload1c" class="sized gray" sizing ="contain"></iron-image>
110 </div>
111
112 <h3>Preload: color as placeholder</h3>
113 <div class="group">
114 <div>No sizing</div>
115 <div class="controls"><button on-click="preload" target="preload2a">Lo ad image</button>
116 <span hidden$="[[!loading2a]]">Loading...</span></div>
117
118 <iron-image alt$="[[_computeLogoAltText(loading2a, loaded2a)]]" loadin g="{{loading2a}}" loaded="{{loaded2a}}" id="preload2a" class="sized gray" preloa d></iron-image>
119 </div>
120 <div class="group">
121 <div>Cover</div>
122 <div class="controls"><button on-click="preload" target="preload2b">Lo ad image</button>
123 <span hidden$="[[!loading2b]]">Loading...</span></div>
124
125 <iron-image alt$="[[_computeLogoAltText(loading2b, loaded2b)]]" loadin g="{{loading2b}}" loaded="{{loaded2b}}" id="preload2b" class="sized gray" sizing ="cover" preload></iron-image>
126 </div>
127 <div class="group">
128 <div>Contain</div>
129 <div class="controls"><button on-click="preload" target="preload2c">Lo ad image</button>
130 <span hidden$="[[!loading2c]]">Loading...</span></div>
131
132 <iron-image alt$="[[_computeLogoAltText(loading2c, loaded2c)]]" loadin g="{{loading2c}}" loaded="{{loaded2c}}" id="preload2c" class="sized gray" sizing ="contain" preload></iron-image>
133 </div>
134
135 <h3>Preload: image as placeholder</h3>
136 <div class="group">
137 <div>No sizing</div>
138 <div class="controls"><button on-click="preload" target="preload3a">Lo ad image</button>
139 <span hidden$="[[!loading3a]]">Loading...</span></div>
140
141 <iron-image alt$="[[_computeLogoAltText(loading3a, loaded3a)]]" loadin g="{{loading3a}}" loaded="{{loaded3a}}" id="preload3a" class="sized gray" preloa d placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqy ssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5 s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHx Or9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7C xsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gM s2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDg nkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwv rVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9 XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+ cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/j z69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSi mqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
142 </div>
143
144 <div class="group">
145 <div>Cover</div>
146 <div class="controls"><button on-click="preload" target="preload3b">Lo ad image</button>
147 <span hidden$="[[!loading3b]]">Loading...</span></div>
148
149 <iron-image alt$="[[_computeLogoAltText(loading3b, loaded3b)]]" loadin g="{{loading3b}}" loaded="{{loaded3b}}" id="preload3b" class="sized gray" sizing ="cover" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGh o9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvN u/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6b z+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6Sl pqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLW AgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6d Axhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1 AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUa AOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP 4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr37 9/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGH IIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
150 </div>
151
152 <div class="group">
153 <div>Contain</div>
154 <div class="controls"><button on-click="preload" target="preload3c">Lo ad image</button>
155 <span hidden$="[[!loading3c]]">Loading...</span></div>
156
157 <iron-image alt$="[[_computeLogoAltText(loading3c, loaded3c)]]" loadin g="{{loading3c}}" loaded="{{loaded3c}}" id="preload3c" class="sized gray" sizing ="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlq Gho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OO vNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC 6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6 SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrg LWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd 6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHko A1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUn UaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mD jP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr 379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26O GHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw=="></iron-image>
158 </div>
159
160 <h3>Preload: color as placeholder, with Fade-in</h3>
161 <div class="group">
162 <div>No sizing</div>
163 <div class="controls"><button on-click="preload" target="preload2afade ">Load image</button>
164 <span hidden$="[[!loading2aFade]]">Loading...</span></div>
165
166 <iron-image alt$="[[_computeLogoAltText(loaded2aFade, loaded2aFade)]]" loading="{{loading2aFade}}" loaded="{{loaded2aFade}}" id="preload2afade" class= "sized gray" preload fade></iron-image>
167 </div>
168 <div class="group">
169 <div>Cover</div>
170 <div class="controls"><button on-click="preload" target="preload2bfade ">Load image</button>
171 <span hidden$="[[!loading2bFade]]">Loading...</span></div>
172
173 <iron-image alt$="[[_computeLogoAltText(loading2bFade, loaded2bFade)]] " loading="{{loading2bFade}}" loaded="{{loaded2bFade}}" id="preload2bfade" class ="sized gray" sizing="cover" preload fade></iron-image>
174 </div>
175 <div class="group">
176 <div>Contain</div>
177 <div class="controls"><button on-click="preload" target="preload2cfade ">Load image</button>
178 <span hidden$="[[!loading2cFade]]">Loading...</span></div>
179
180 <iron-image alt$="[[_computeLogoAltText(loading2cFade, loaded2cFade)]] " loading="{{loading2cFade}}" loaded="{{loaded2cFade}}" id="preload2cfade" class ="sized gray" sizing="contain" preload fade></iron-image>
181 </div>
182
183 <h3>Preload: image as placeholder, with Fade-in</h3>
184 <div class="group">
185 <div>No sizing</div>
186 <div class="controls">
187 <button on-click="preload" target="preload3afade">Load image</button >
188 <span hidden$="[[!loading3aFade]]">Loading...</span>
189 </div>
190
191 <iron-image alt$="[[_computeLogoAltText(loading3aFade, loaded3aFade)]] " loading="{{loading3aFade}}" loaded="{{loaded3aFade}}" id="preload3afade" class ="sized gray" 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==" fade></iron-image>
192 </div>
193 <div class="group">
194 <div>Cover</div>
195 <div class="controls"><button on-click="preload" target="preload3bfade ">Load image</button>
196 <span hidden$="[[!loading3bFade]]">Loading...</span></div>
197
198 <iron-image alt$="[[_computeLogoAltText(loading3bFade, loaded3bFade)]] " loading="{{loading3bFade}}" loaded="{{loaded3bFade}}" id="preload3bfade" class ="sized gray" sizing="cover" preload placeholder="data:image/gif;base64,R0lGODdh yADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAA yADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqt Wq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWW l5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS 06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQ mgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6 kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8 tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rm bxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFAB wIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGE FFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron-im age>
199 </div>
200 <div class="group">
201 <div>Contain</div>
202 <div class="controls"><button on-click="preload" target="preload3cfade ">Load image</button>
203 <span hidden$="[[!loading3cFade]]">Loading...</span></div>
204
205 <iron-image alt$="[[_computeLogoAltText(loading3cFade, loaded3cFade)]] " loading="{{loading3cFade}}" loaded="{{loaded3cFade}}" id="preload3cfade" class ="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGOD dhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAA AAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodE qtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJ WWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0N HS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuK bQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8Ehw S6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB +8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+ rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaF ABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKO GEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQEAOw==" fade></iron- image>
206 </div>
207 </template>
208 <script>
209 Polymer({
210 is: 'demo-page',
211
212 preload: function(e) {
213 var img = document.querySelector('#' + e.target.getAttribute('target '));
214 img.src = './polymer.svg?' + Math.random();
215 e.target.textContent = 'Reload image';
216 },
217
218 _computeLogoAltText: function(loading, loaded) {
219 var text = 'The Polymer logo. ';
220
221 if (loading) {
222 text += '(loading)';
223 } else if (loaded) {
224 text += '(loaded)';
225 } else {
226 text += '(not loaded)';
227 }
228
229 return text;
230 }
231 });
232 </script>
233 </dom-module>
234 </body>
235 </html>
OLDNEW
« no previous file with comments | « polymer_1.2.3/bower_components/iron-image/bower.json ('k') | polymer_1.2.3/bower_components/iron-image/demo/polymer.svg » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698