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.github.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/CONTRIBUTORS.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/PATENTS.txt 10 --> 11 <html> 12 <head> 13 <title>iron-image</title> 14 15 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 16 <script src="../../web-component-tester/browser.js"></script> 17 <script src="../../test-fixture/test-fixture-mocha.js"></script> 18 19 <link rel="import" href="../../polymer/polymer.html"> 20 <link rel="import" href="../../test-fixture/test-fixture.html"> 21 <link rel="import" href="../iron-image.html"> 22 23 <style is="custom-style"> 24 .fixed-width-container { 25 width: 500px; 26 } 27 28 .fixed-width-container iron-image { 29 width: 100%; 30 --iron-image-width: 100%; 31 } 32 33 .fixed-height-container { 34 height: 500px; 35 } 36 37 .fixed-height-container iron-image { 38 height: 100%; 39 --iron-image-height: 100%; 40 } 41 </style> 42 </head> 43 <body> 44 <test-fixture id="TrivialImage"> 45 <template> 46 <iron-image></iron-image> 47 </template> 48 </test-fixture> 49 50 <test-fixture id="FixedWidthContainer"> 51 <template> 52 <div class="fixed-width-container"> 53 <iron-image></iron-image> 54 </div> 55 </template> 56 </test-fixture> 57 58 <test-fixture id="FixedHeightContainer"> 59 <template> 60 <div class="fixed-height-container"> 61 <iron-image></iron-image> 62 </div> 63 </template> 64 </test-fixture> 65 66 <script> 67 suite('<iron-image>', function() { 68 function randomImageUrl () { 69 return '../demo/polymer.svg?' + Math.random(); 70 } 71 72 var image; 73 74 suite('basic behavior', function() { 75 setup(function() { 76 image = fixture('TrivialImage'); 77 }); 78 79 test('loading, loaded, error are false before any src is set', function() { 80 expect(image.loading).to.be.eql(false); 81 expect(image.loaded).to.be.eql(false); 82 expect(image.error).to.be.eql(false); 83 }); 84 85 test('loading, loaded, error are false when src is set to empty string', function(done) { 86 image.addEventListener('loaded-changed', function onLoadedChanged() { 87 if (image.loaded) { 88 image.removeEventListener('loaded-changed', onLoadedChanged); 89 image.addEventListener('loaded-changed', function onLoadedChanged2() { 90 image.removeEventListener('loaded-changed', onLoadedChanged2); 91 92 expect(image.loading).to.be.eql(false); 93 expect(image.loaded).to.be.eql(false); 94 expect(image.error).to.be.eql(false); 95 done(); 96 }); 97 98 expect(image.loading).to.be.eql(false); 99 expect(image.loaded).to.be.eql(true); 100 expect(image.error).to.be.eql(false); 101 image.src = ''; 102 } 103 }); 104 image.src = randomImageUrl(); 105 }); 106 107 test('can load images given a src', function(done) { 108 image.addEventListener('loaded-changed', function onLoadedChanged() { 109 image.removeEventListener('loaded-changed', onLoadedChanged); 110 111 try { 112 expect(image.loaded).to.be.eql(true); 113 done(); 114 } catch (e) { 115 done(e); 116 } 117 }); 118 image.src = randomImageUrl(); 119 }); 120 121 test('will reload images when src changes', function(done) { 122 var loadCount = 0; 123 124 image.addEventListener('loaded-changed', function onLoadedChanged() { 125 if (image.loaded === true) { 126 loadCount++; 127 128 if (loadCount === 2) { 129 image.removeEventListener('loaded-changed', onLoadedChanged); 130 done(); 131 } else { 132 image.src = randomImageUrl(); 133 } 134 } 135 }); 136 137 image.src = randomImageUrl(); 138 }); 139 140 test('error property is set when the image fails to load', function(done) { 141 image.addEventListener('error-changed', function onErrorChanged() { 142 assert(image.error, 'image has error property set'); 143 image.removeEventListener('error-changed', onErrorChanged); 144 done(); 145 }); 146 147 image.src = '/this_image_should_not_exist.jpg'; 148 }); 149 150 // Test for PolymerElements/iron-image#16. 151 test('placeholder is hidden after loading when src is changed from invalid to valid', function(done) { 152 image.preload = true; 153 154 image.addEventListener('error-changed', function onErrorChanged() { 155 image.removeEventListener('error-changed', onErrorChanged); 156 157 assert.equal(image.loading, false, 'errored image loading = false'); 158 assert.equal(image.loaded, false, 'errored image loaded = false'); 159 assert.equal(image.error, true, 'errored image error = true'); 160 161 image.addEventListener('loaded-changed', function onLoadedChanged() { 162 if (!image.loaded) return; 163 164 image.removeEventListener('loaded-changed', onLoadedChanged); 165 166 assert.equal(image.loading, false, 'ok image loading = false'); 167 assert.equal(image.loaded, true, 'ok image loaded = true'); 168 assert.equal(image.error, false, 'ok image error = false'); 169 assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder has style.display = none'); 170 171 done(); 172 }); 173 174 image.src = randomImageUrl(); 175 }); 176 177 image.src = '/this_image_should_not_exist.jpg'; 178 }); 179 180 // Test for PolymerElements/iron-image#23. 181 test('image is not shown below placeholder if previous image was loaded with' + 182 ' sizing on and current image fails to load', function(done) { 183 image.preload = true; 184 image.sizing = 'cover'; 185 186 image.addEventListener('loaded-changed', function onLoadedChanged() { 187 if (!image.loaded) return; 188 image.removeEventListener('loaded-changed', onLoadedChanged); 189 190 assert.notEqual(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image visible after successful load'); 191 assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder hidden after successful load'); 192 193 image.addEventListener('error-changed', function onErrorChanged() { 194 if (!image.error) return; 195 image.removeEventListener('error-changed', onErrorChanged); 196 197 assert.equal(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image hidden after failed load'); 198 assert.notEqual(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder visible after failed load'); 199 200 done(); 201 }); 202 203 image.src = '/this_image_should_not_exist.jpg'; 204 }); 205 206 image.src = randomImageUrl(); 207 }); 208 }); 209 210 suite('--iron-image-width, --iron-image-height', function() { 211 var fixedWidthContainer; 212 var fixedWidthIronImage; 213 var fixedHeightContainer; 214 var fixedHeightIronImage; 215 216 setup(function() { 217 fixedWidthContainer = fixture('FixedWidthContainer'); 218 fixedWidthIronImage = fixedWidthContainer.querySelector('iron-image'); 219 fixedHeightContainer = fixture('FixedHeightContainer'); 220 fixedHeightIronImage = fixedHeightContainer.querySelector('iron-image'); 221 }); 222 223 test('100% width image fills container', function(done) { 224 fixedWidthIronImage.$.img.addEventListener('load', function onLoadedChanged(e) { 225 fixedWidthIronImage.$.img.removeEventListener('load', onLoadedChanged); 226 Polymer.updateStyles(); 227 228 var containerRect = fixedWidthContainer.getBoundingClientRect(); 229 var ironImageRect = fixedWidthIronImage.getBoundingClientRect(); 230 var wrappedImageRect = fixedWidthIronImage.$.img.getBoundingClientRect(); 231 232 expect(containerRect.width).to.be.closeTo(500, 0.5); 233 expect(ironImageRect.width).to.be.closeTo(500, 0.5); 234 expect(wrappedImageRect.width).to.be.closeTo(500, 0.5); 235 236 done(); 237 }); 238 239 fixedWidthIronImage.src = randomImageUrl(); 240 }); 241 242 test('100% height image fills container', function(done) { 243 fixedHeightIronImage.$.img.addEventListener('load', function onLoadedChanged(e) { 244 fixedHeightIronImage.$.img.removeEventListener('load', onLoadedChanged); 245 Polymer.updateStyles(); 246 247 var containerRect = fixedHeightContainer.getBoundingClientRect(); 248 var ironImageRect = fixedHeightIronImage.getBoundingClientRect(); 249 var wrappedImageRect = fixedHeightIronImage.$.img.getBoundingClientRect(); 250 251 expect(containerRect.height).to.be.closeTo(500, 0.5); 252 expect(ironImageRect.height).to.be.closeTo(500, 0.5); 253 expect(wrappedImageRect.height).to.be.closeTo(500, 0.5); 254 255 done(); 256 }); 257 258 fixedHeightIronImage.src = randomImageUrl(); 259 }); 260 }); 261 262 suite('accessibility', function() { 263 suite('sizing inactive', function() { 264 var image; 265 266 setup(function() { 267 image = fixture('TrivialImage'); 268 }); 269 270 test('#sizedImgDiv is hidden', function() { 271 var sizedImgDivStyle = window.getComputedStyle(image.$.sizedImgDiv); 272 assert.strictEqual(sizedImgDivStyle.display, 'none'); 273 }); 274 275 test('img has no alt text by default', function() { 276 assert.isFalse(image.$.img.hasAttribute('alt')); 277 }); 278 279 test('img alt text is empty string when iron-image alt text is empty string', function() { 280 image.alt = ''; 281 282 assert.isTrue(image.$.img.hasAttribute('alt')); 283 assert.strictEqual(image.$.img.getAttribute('alt'), ''); 284 }); 285 286 test('img alt text matches iron-image alt text when defined', function() { 287 image.alt = 'alt text value'; 288 289 assert.isTrue(image.$.img.hasAttribute('alt')); 290 assert.strictEqual(image.$.img.getAttribute('alt'), 'alt text value'); 291 }); 292 }); 293 294 suite('sizing active', function() { 295 var image; 296 297 setup(function() { 298 image = fixture('TrivialImage'); 299 image.sizing = 'cover'; 300 }); 301 302 test('inner img is hidden', function() { 303 var imgStyle = window.getComputedStyle(image.$.img); 304 assert.strictEqual(imgStyle.display, 'none'); 305 }); 306 307 test('#sizedImgDiv has empty aria-label text by default', function() { 308 assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); 309 assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), ''); 310 }); 311 312 test('#sizedImgDiv has aria-hidden when iron-image alt text is empty string', function() { 313 image.alt = ''; 314 315 assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-hidden')); 316 var hiddenValue = image.$.sizedImgDiv.getAttribute('aria-hidden'); 317 assert.isTrue(hiddenValue === '' || hiddenValue === 'true'); 318 }); 319 320 test('#sizedImgDiv aria-label matches iron-image alt text when defined', function() { 321 image.alt = 'alt text value'; 322 323 assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); 324 assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'alt text value'); 325 }); 326 327 test('#sizedImgDiv aria-label text is last path component of src when iron-image alt text is undefined', function() { 328 image.src = '/some/path.components/file.jpg?a=b&c=d#anchor'; 329 330 assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label')); 331 assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'file.jpg'); 332 }); 333 }); 334 }); 335 }); 336 </script> 337 </body> 338 </html> 339
