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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components-chromium/core-image/demo.html

Issue 1215543002: Remove Polymer 0.5. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: fix unit test 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 | « third_party/polymer/components-chromium/core-image/core-image-extracted.js ('k') | third_party/polymer/components-chromium/core-image/index.html » ('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 <!--
2 @license
3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polym er.github.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS .txt
6 The complete set of contributors may be found at http://polymer.github.io/CO NTRIBUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/P ATENTS.txt
9 -->
10 <!doctype html>
11 <html>
12 <head>
13
14 <title>core-image</title>
15
16 <script src="../webcomponentsjs/webcomponents.js"></script>
17
18 <link rel="import" href="core-image.html">
19
20 <style>
21 .sized {
22 width: 200px;
23 height: 200px;
24 }
25 .gray {
26 background-color: lightgray;
27 }
28 .group {
29 display: inline-block;
30 vertical-align: top;
31 }
32 </style>
33
34 </head>
35 <body unresolved>
36
37 <template is="auto-binding">
38 <h3>Sizing: none (naturally sized)</h3>
39 <core-image src="http://lorempixel.com/400/200/sports/1"></core-image>
40
41 <h3>Sizing: cover</h3>
42 <core-image class="sized" sizing="cover" src="http://lorempixel.com/400/200/sp orts/2"></core-image>
43 <core-image class="sized" sizing="cover" src="http://lorempixel.com/200/400/sp orts/3"></core-image>
44
45 <h3>Sizing: contain</h3>
46 <core-image class="sized gray" sizing="contain" src="http://lorempixel.com/40 0/200/sports/2"></core-image>
47 <core-image class="sized gray" sizing="contain" src="http://lorempixel.com/20 0/400/sports/3"></core-image>
48
49 <h3>Preload: none</h3>
50 <div class="group">
51 <div>No sizing</div>
52 <button on-tap="{{preload}}" target="preload1a">Load image</button><br><br>
53 <core-image id="preload1a" class="sized gray" ></core-image>
54 </div>
55 <div class="group">
56 <div>Cover</div>
57 <button on-tap="{{preload}}" target="preload1b">Load image</button><br><br>
58 <core-image id="preload1b" class="sized gray" sizing="cover" ></core-image>
59 </div>
60 <div class="group">
61 <div>Contain</div>
62 <button on-tap="{{preload}}" target="preload1c">Load image</button><br><br>
63 <core-image id="preload1c" class="sized gray" sizing="contain" ></core-image >
64 </div>
65
66 <h3>Preload: color as placeholder</h3>
67 <div class="group">
68 <div>No sizing</div>
69 <button on-tap="{{preload}}" target="preload2a">Load image</button>
70 <span hidden?="{{!$.preload2a.loading}}">Loading...</span>
71 <br><br>
72 <core-image id="preload2a" class="sized gray" preload ></core-image>
73 </div>
74 <div class="group">
75 <div>Cover</div>
76 <button on-tap="{{preload}}" target="preload2b">Load image</button>
77 <span hidden?="{{!$.preload2b.loading}}">Loading...</span>
78 <br><br>
79 <core-image id="preload2b" class="sized gray" sizing="cover" preload ></core -image>
80 </div>
81 <div class="group">
82 <div>Contain</div>
83 <button on-tap="{{preload}}" target="preload2c">Load image</button>
84 <span hidden?="{{!$.preload2c.loading}}">Loading...</span>
85 <br><br>
86 <core-image id="preload2c" class="sized gray" sizing="contain" preload ></co re-image>
87 </div>
88
89 <h3>Preload: image as placeholder</h3>
90 <div class="group">
91 <div>No sizing</div>
92 <button on-tap="{{preload}}" target="preload3a">Load image</button>
93 <span hidden?="{{!$.preload3a.loading}}">Loading...</span>
94 <br><br>
95 <core-image id="preload3a" class="sized gray" preload placeholder="data:ima ge/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAAAAAA AAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoH BILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhY aHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/Awc LDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFwMGAQ LzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQYM+o uHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTqo+r1 vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7iRK8S iFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3bDhs zqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggAQWaO CBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjDRKEQ EAOw=="></core-image>
96 </div>
97 <div class="group">
98 <div>Cover</div>
99 <button on-tap="{{preload}}" target="preload3b">Load image</button>
100 <span hidden?="{{!$.preload3b.loading}}">Loading...</span>
101 <br><br>
102 <core-image id="preload3b" class="sized gray" sizing="cover" preload placeh older="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3 N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM9 0bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx +z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba 3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/ rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM 0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1Sc mpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0 sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD /cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7/ //wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLb o4oswxijjjDRKEQEAOw=="></core-image>
103 </div>
104 <div class="group">
105 <div>Contain</div>
106 <button on-tap="{{preload}}" target="preload3c">Load image</button>
107 <span hidden?="{{!$.preload3c.loading}}">Loading...</span>
108 <br><br>
109 <core-image id="preload3c" class="sized gray" sizing="contain" preload plac eholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3v c3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wL M90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+ Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0t ba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3 d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1B BM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1 ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/w k0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1o RD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv 7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKL Lbo4oswxijjjDRKEQEAOw=="></core-image>
110 </div>
111
112 <h3>Preload: color as placeholder, with Fade-in</h3>
113 <div class="group">
114 <div>No sizing</div>
115 <button on-tap="{{preload}}" target="preload2afade">Load image</button>
116 <span hidden?="{{!$.preload2afade.loading}}">Loading...</span>
117 <br><br>
118 <core-image id="preload2afade" class="sized gray" preload fade></core-image>
119 </div>
120 <div class="group">
121 <div>Cover</div>
122 <button on-tap="{{preload}}" target="preload2bfade">Load image</button>
123 <span hidden?="{{!$.preload2bfade.loading}}">Loading...</span>
124 <br><br>
125 <core-image id="preload2bfade" class="sized gray" sizing="cover" preload fad e></core-image>
126 </div>
127 <div class="group">
128 <div>Contain</div>
129 <button on-tap="{{preload}}" target="preload2cfade">Load image</button>
130 <span hidden?="{{!$.preload2cfade.loading}}">Loading...</span>
131 <br><br>
132 <core-image id="preload2cfade" class="sized gray" sizing="contain" preload f ade></core-image>
133 </div>
134
135 <h3>Preload: image as placeholder, with Fade-in</h3>
136 <div class="group">
137 <div>No sizing</div>
138 <button on-tap="{{preload}}" target="preload3afade">Load image</button>
139 <span hidden?="{{!$.preload3afade.loading}}">Loading...</span>
140 <br><br>
141 <core-image id="preload3afade" class="sized gray" preload placeholder="data :image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe3vc3N1wAAAAAAAA AAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987/ /AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgo OEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr /AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ugT3d/rAe0r77bsFw MGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE1BBM0XrN3CSOFgQ YM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVVI1ScmpRIwYjxwTq o+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi/wk0sMEBMoRKo7i RK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS1oRD/cUM4cN5EA3 bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/Pv7///wAGQyjggA QWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOKKLLbo4oswxijjjD RKEQEAOw==" fade></core-image>
142 </div>
143 <div class="group">
144 <div>Cover</div>
145 <button on-tap="{{preload}}" target="preload3bfade">Load image</button>
146 <span hidden?="{{!$.preload3bfade.loading}}">Loading...</span>
147 <br><br>
148 <core-image id="preload3bfade" class="sized gray" sizing="cover" preload pl aceholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyssLe 3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s675 wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9v v+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO 0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2ug T3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnkqE 1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrVVV I1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9XxYi /wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cyOS 1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz69/ Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimqOK KLLbo4oswxijjjDRKEQEAOw==" fade></core-image>
149 </div>
150 <div class="group">
151 <div>Contain</div>
152 <button on-tap="{{preload}}" target="preload3cfade">Load image</button>
153 <span hidden?="{{!$.preload3cfade.loading}}">Loading...</span>
154 <br><br>
155 <core-image id="preload3cfade" class="sized gray" sizing="contain" preload placeholder="data:image/gif;base64,R0lGODdhyADIAOMAAO7u/5aWlqGho9jY5OPj8cLCyqyss Le3vc3N1wAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAyADIAAAE/hDISau9OOvNu/9gKI5kaZ5oqq5s6 75wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr 9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7Cxs rO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS06kB1tYqA9cUBQEFrgLWAgIqBOEBFNuu1gMs2 ugT3d/rAe0r77bsFwMGAQLzEggc8AcQAIJwA+EBuKbQmgF+3iocDHBAXiZ9Fd6dAxhuo4R3/gwnGDgnk qE1BBM0XrN3CSOFgQYM+ouHEsFMAP1i2lQIAN8EhwS6kZPQ74BMnpZcTgiHkoA1AhKxAWDaU+pHqwvrV VVI1ScmpRIwYjxwTqo+r1vTafV6FmtSrRXEak0ooB+8tjzR4v251m0llwSgUnUaAOrJtFMDoESrty9Xx Yi/wk0sMEBMoRKo7iRK8SiFxu285vQMoIDR0qdNN+rmbxxJlRFLi7u22OG1mDjP4bYb2uFVf+r0CZ+cy OS1oRD/cUM4cN5EA3bDhszqWOHEhBLIZh+qHdnmaFABwIwm9BxLZxAtn6fGvr379/Djy59Pv779+/jz6 9/Pv7///wAGQyjggAQWaOCBCCao4IIMNujggxBGKOGEFFZo4YUYZqjhhhx26OGHIIYo4ogklmjiiSimq OKKLLbo4oswxijjjDRKEQEAOw==" fade></core-image>
156 </div>
157
158 </template>
159
160 <script>
161
162 addEventListener('template-bound', function(e) {
163
164 var scope = e.target;
165 scope.preload = function(e) {
166 var img = document.querySelector('#' + e.target.getAttribute('target'));
167 img.src = 'http://lorempixel.com/1920/1080?' + Math.random();
168 e.target.textContent = 'Reload image';
169 };
170 });
171
172 </script>
173
174 </body>
175 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components-chromium/core-image/core-image-extracted.js ('k') | third_party/polymer/components-chromium/core-image/index.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698