systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html - platform/prebuilts/fullsdk-darwin/platform-tools - Git at Google

 <!doctype html>
 <!--
 @license
 Copyright (c) 2015 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
 -->
 <html>
   <head>
     <title>iron-image</title>

     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
     <script src="../../web-component-tester/browser.js"></script>
     <script src="../../test-fixture/test-fixture-mocha.js"></script>

     <link rel="import" href="../../polymer/polymer.html">
     <link rel="import" href="../../test-fixture/test-fixture.html">
     <link rel="import" href="../iron-image.html">

     <style is="custom-style">
       .fixed-width-container {
         width: 500px;
       }

       .fixed-width-container iron-image {
         width: 100%;
         --iron-image-width: 100%;
       }

       .fixed-height-container {
         height: 500px;
       }

       .fixed-height-container iron-image {
         height: 100%;
         --iron-image-height: 100%;
       }
     </style>
   </head>
   <body>
     <test-fixture id="TrivialImage">
       <template>
         <iron-image></iron-image>
       </template>
     </test-fixture>

     <test-fixture id="FixedWidthContainer">
       <template>
         <div class="fixed-width-container">
           <iron-image></iron-image>
         </div>
       </template>
     </test-fixture>

     <test-fixture id="FixedHeightContainer">
       <template>
         <div class="fixed-height-container">
           <iron-image></iron-image>
         </div>
       </template>
     </test-fixture>

     <script>
       suite('<iron-image>', function() {
         function randomImageUrl () {
           return '../demo/polymer.svg?' + Math.random();
         }

         var image;

         suite('basic behavior', function() {
           setup(function() {
             image = fixture('TrivialImage');
           });

           test('loading, loaded, error are false before any src is set', function() {
             expect(image.loading).to.be.eql(false);
             expect(image.loaded).to.be.eql(false);
             expect(image.error).to.be.eql(false);
           });

           test('loading, loaded, error are false when src is set to empty string', function(done) {
             image.addEventListener('loaded-changed', function onLoadedChanged() {
               if (image.loaded) {
                 image.removeEventListener('loaded-changed', onLoadedChanged);
                 image.addEventListener('loaded-changed', function onLoadedChanged2() {
                   image.removeEventListener('loaded-changed', onLoadedChanged2);

                   expect(image.loading).to.be.eql(false);
                   expect(image.loaded).to.be.eql(false);
                   expect(image.error).to.be.eql(false);
                   done();
                 });

                 expect(image.loading).to.be.eql(false);
                 expect(image.loaded).to.be.eql(true);
                 expect(image.error).to.be.eql(false);
                 image.src = '';
               }
             });
             image.src = randomImageUrl();
           });

           test('can load images given a src', function(done) {
             image.addEventListener('loaded-changed', function onLoadedChanged() {
               image.removeEventListener('loaded-changed', onLoadedChanged);

               try {
                 expect(image.loaded).to.be.eql(true);
                 done();
               } catch (e) {
                 done(e);
               }
             });
             image.src = randomImageUrl();
           });

           test('will reload images when src changes', function(done) {
             var loadCount = 0;

             image.addEventListener('loaded-changed', function onLoadedChanged() {
               if (image.loaded === true) {
                 loadCount++;

                 if (loadCount === 2) {
                   image.removeEventListener('loaded-changed', onLoadedChanged);
                   done();
                 } else {
                   image.src = randomImageUrl();
                 }
               }
             });

             image.src = randomImageUrl();
           });

           test('error property is set when the image fails to load', function(done) {
             image.addEventListener('error-changed', function onErrorChanged() {
               assert(image.error, 'image has error property set');
               image.removeEventListener('error-changed', onErrorChanged);
               done();
             });

             image.src = '/this_image_should_not_exist.jpg';
           });

           // Test for PolymerElements/iron-image#16.
           test('placeholder is hidden after loading when src is changed from invalid to valid', function(done) {
             image.preload = true;

             image.addEventListener('error-changed', function onErrorChanged() {
               image.removeEventListener('error-changed', onErrorChanged);

               assert.equal(image.loading, false, 'errored image loading = false');
               assert.equal(image.loaded, false, 'errored image loaded = false');
               assert.equal(image.error, true, 'errored image error = true');

               image.addEventListener('loaded-changed', function onLoadedChanged() {
                 if (!image.loaded) return;

                 image.removeEventListener('loaded-changed', onLoadedChanged);

                 assert.equal(image.loading, false, 'ok image loading = false');
                 assert.equal(image.loaded, true, 'ok image loaded = true');
                 assert.equal(image.error, false, 'ok image error = false');
                 assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder has style.display = none');

                 done();
               });

               image.src = randomImageUrl();
             });

             image.src = '/this_image_should_not_exist.jpg';
           });

           // Test for PolymerElements/iron-image#23.
           test('image is not shown below placeholder if previous image was loaded with' +
                ' sizing on and current image fails to load', function(done) {
             image.preload = true;
             image.sizing = 'cover';

             image.addEventListener('loaded-changed', function onLoadedChanged() {
               if (!image.loaded) return;
               image.removeEventListener('loaded-changed', onLoadedChanged);

               assert.notEqual(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image visible after successful load');
               assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder hidden after successful load');

               image.addEventListener('error-changed', function onErrorChanged() {
                 if (!image.error) return;
                 image.removeEventListener('error-changed', onErrorChanged);

                 assert.equal(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image hidden after failed load');
                 assert.notEqual(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder visible after failed load');

                 done();
               });

               image.src = '/this_image_should_not_exist.jpg';
             });

             image.src = randomImageUrl();
           });
         });

         suite('--iron-image-width, --iron-image-height', function() {
           var fixedWidthContainer;
           var fixedWidthIronImage;
           var fixedHeightContainer;
           var fixedHeightIronImage;

           setup(function() {
             fixedWidthContainer = fixture('FixedWidthContainer');
             fixedWidthIronImage = fixedWidthContainer.querySelector('iron-image');
             fixedHeightContainer = fixture('FixedHeightContainer');
             fixedHeightIronImage = fixedHeightContainer.querySelector('iron-image');
           });

           test('100% width image fills container', function(done) {
             fixedWidthIronImage.$.img.addEventListener('load', function onLoadedChanged(e) {
               fixedWidthIronImage.$.img.removeEventListener('load', onLoadedChanged);
               Polymer.updateStyles();

               var containerRect = fixedWidthContainer.getBoundingClientRect();
               var ironImageRect = fixedWidthIronImage.getBoundingClientRect();
               var wrappedImageRect = fixedWidthIronImage.$.img.getBoundingClientRect();

               expect(containerRect.width).to.be.closeTo(500, 0.5);
               expect(ironImageRect.width).to.be.closeTo(500, 0.5);
               expect(wrappedImageRect.width).to.be.closeTo(500, 0.5);

               done();
             });

             fixedWidthIronImage.src = randomImageUrl();
           });

           test('100% height image fills container', function(done) {
             fixedHeightIronImage.$.img.addEventListener('load', function onLoadedChanged(e) {
               fixedHeightIronImage.$.img.removeEventListener('load', onLoadedChanged);
               Polymer.updateStyles();

               var containerRect = fixedHeightContainer.getBoundingClientRect();
               var ironImageRect = fixedHeightIronImage.getBoundingClientRect();
               var wrappedImageRect = fixedHeightIronImage.$.img.getBoundingClientRect();

               expect(containerRect.height).to.be.closeTo(500, 0.5);
               expect(ironImageRect.height).to.be.closeTo(500, 0.5);
               expect(wrappedImageRect.height).to.be.closeTo(500, 0.5);

               done();
             });

             fixedHeightIronImage.src = randomImageUrl();
           });
         });

         suite('accessibility', function() {
           suite('sizing inactive', function() {
             var image;

             setup(function() {
               image = fixture('TrivialImage');
             });

             test('#sizedImgDiv is hidden', function() {
               var sizedImgDivStyle = window.getComputedStyle(image.$.sizedImgDiv);
               assert.strictEqual(sizedImgDivStyle.display, 'none');
             });

             test('img has no alt text by default', function() {
               assert.isFalse(image.$.img.hasAttribute('alt'));
             });

             test('img alt text is empty string when iron-image alt text is empty string', function() {
               image.alt = '';

               assert.isTrue(image.$.img.hasAttribute('alt'));
               assert.strictEqual(image.$.img.getAttribute('alt'), '');
             });

             test('img alt text matches iron-image alt text when defined', function() {
               image.alt = 'alt text value';

               assert.isTrue(image.$.img.hasAttribute('alt'));
               assert.strictEqual(image.$.img.getAttribute('alt'), 'alt text value');
             });
           });

           suite('sizing active', function() {
             var image;

             setup(function() {
               image = fixture('TrivialImage');
               image.sizing = 'cover';
             });

             test('inner img is hidden', function() {
               var imgStyle = window.getComputedStyle(image.$.img);
               assert.strictEqual(imgStyle.display, 'none');
             });

             test('#sizedImgDiv has empty aria-label text by default', function() {
               assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
               assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), '');
             });

             test('#sizedImgDiv has aria-hidden when iron-image alt text is empty string', function() {
               image.alt = '';

               assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-hidden'));
               var hiddenValue = image.$.sizedImgDiv.getAttribute('aria-hidden');
               assert.isTrue(hiddenValue === '' || hiddenValue === 'true');
             });

             test('#sizedImgDiv aria-label matches iron-image alt text when defined', function() {
               image.alt = 'alt text value';

               assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
               assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'alt text value');
             });

             test('#sizedImgDiv aria-label text is last path component of src when iron-image alt text is undefined', function() {
               image.src = '/some/path.components/file.jpg?a=b&c=d#anchor';

               assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
               assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'file.jpg');
             });
           });
         });
       });
     </script>
   </body>
 </html>
	<!doctype html>
	<!--
	@license
	Copyright (c) 2015 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
	-->
	<html>
	<head>
	<title>iron-image</title>

	<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
	<script src="../../web-component-tester/browser.js"></script>
	<script src="../../test-fixture/test-fixture-mocha.js"></script>

	<link rel="import" href="../../polymer/polymer.html">
	<link rel="import" href="../../test-fixture/test-fixture.html">
	<link rel="import" href="../iron-image.html">

	<style is="custom-style">
	.fixed-width-container {
	width: 500px;
	}

	.fixed-width-container iron-image {
	width: 100%;
	--iron-image-width: 100%;
	}

	.fixed-height-container {
	height: 500px;
	}

	.fixed-height-container iron-image {
	height: 100%;
	--iron-image-height: 100%;
	}
	</style>
	</head>
	<body>
	<test-fixture id="TrivialImage">
	<template>
	<iron-image></iron-image>
	</template>
	</test-fixture>

	<test-fixture id="FixedWidthContainer">
	<template>
	<div class="fixed-width-container">
	<iron-image></iron-image>
	</div>
	</template>
	</test-fixture>

	<test-fixture id="FixedHeightContainer">
	<template>
	<div class="fixed-height-container">
	<iron-image></iron-image>
	</div>
	</template>
	</test-fixture>

	<script>
	suite('<iron-image>', function() {
	function randomImageUrl () {
	return '../demo/polymer.svg?' + Math.random();
	}

	var image;

	suite('basic behavior', function() {
	setup(function() {
	image = fixture('TrivialImage');
	});

	test('loading, loaded, error are false before any src is set', function() {
	expect(image.loading).to.be.eql(false);
	expect(image.loaded).to.be.eql(false);
	expect(image.error).to.be.eql(false);
	});

	test('loading, loaded, error are false when src is set to empty string', function(done) {
	image.addEventListener('loaded-changed', function onLoadedChanged() {
	if (image.loaded) {
	image.removeEventListener('loaded-changed', onLoadedChanged);
	image.addEventListener('loaded-changed', function onLoadedChanged2() {
	image.removeEventListener('loaded-changed', onLoadedChanged2);

	expect(image.loading).to.be.eql(false);
	expect(image.loaded).to.be.eql(false);
	expect(image.error).to.be.eql(false);
	done();
	});

	expect(image.loading).to.be.eql(false);
	expect(image.loaded).to.be.eql(true);
	expect(image.error).to.be.eql(false);
	image.src = '';
	}
	});
	image.src = randomImageUrl();
	});

	test('can load images given a src', function(done) {
	image.addEventListener('loaded-changed', function onLoadedChanged() {
	image.removeEventListener('loaded-changed', onLoadedChanged);

	try {
	expect(image.loaded).to.be.eql(true);
	done();
	} catch (e) {
	done(e);
	}
	});
	image.src = randomImageUrl();
	});

	test('will reload images when src changes', function(done) {
	var loadCount = 0;

	image.addEventListener('loaded-changed', function onLoadedChanged() {
	if (image.loaded === true) {
	loadCount++;

	if (loadCount === 2) {
	image.removeEventListener('loaded-changed', onLoadedChanged);
	done();
	} else {
	image.src = randomImageUrl();
	}
	}
	});

	image.src = randomImageUrl();
	});

	test('error property is set when the image fails to load', function(done) {
	image.addEventListener('error-changed', function onErrorChanged() {
	assert(image.error, 'image has error property set');
	image.removeEventListener('error-changed', onErrorChanged);
	done();
	});

	image.src = '/this_image_should_not_exist.jpg';
	});

	// Test for PolymerElements/iron-image#16.
	test('placeholder is hidden after loading when src is changed from invalid to valid', function(done) {
	image.preload = true;

	image.addEventListener('error-changed', function onErrorChanged() {
	image.removeEventListener('error-changed', onErrorChanged);

	assert.equal(image.loading, false, 'errored image loading = false');
	assert.equal(image.loaded, false, 'errored image loaded = false');
	assert.equal(image.error, true, 'errored image error = true');

	image.addEventListener('loaded-changed', function onLoadedChanged() {
	if (!image.loaded) return;

	image.removeEventListener('loaded-changed', onLoadedChanged);

	assert.equal(image.loading, false, 'ok image loading = false');
	assert.equal(image.loaded, true, 'ok image loaded = true');
	assert.equal(image.error, false, 'ok image error = false');
	assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder has style.display = none');

	done();
	});

	image.src = randomImageUrl();
	});

	image.src = '/this_image_should_not_exist.jpg';
	});

	// Test for PolymerElements/iron-image#23.
	test('image is not shown below placeholder if previous image was loaded with' +
	' sizing on and current image fails to load', function(done) {
	image.preload = true;
	image.sizing = 'cover';

	image.addEventListener('loaded-changed', function onLoadedChanged() {
	if (!image.loaded) return;
	image.removeEventListener('loaded-changed', onLoadedChanged);

	assert.notEqual(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image visible after successful load');
	assert.equal(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder hidden after successful load');

	image.addEventListener('error-changed', function onErrorChanged() {
	if (!image.error) return;
	image.removeEventListener('error-changed', onErrorChanged);

	assert.equal(getComputedStyle(image.$.sizedImgDiv).backgroundImage, 'none', 'image hidden after failed load');
	assert.notEqual(getComputedStyle(image.$.placeholder).display, 'none', 'placeholder visible after failed load');

	done();
	});

	image.src = '/this_image_should_not_exist.jpg';
	});

	image.src = randomImageUrl();
	});
	});

	suite('--iron-image-width, --iron-image-height', function() {
	var fixedWidthContainer;
	var fixedWidthIronImage;
	var fixedHeightContainer;
	var fixedHeightIronImage;

	setup(function() {
	fixedWidthContainer = fixture('FixedWidthContainer');
	fixedWidthIronImage = fixedWidthContainer.querySelector('iron-image');
	fixedHeightContainer = fixture('FixedHeightContainer');
	fixedHeightIronImage = fixedHeightContainer.querySelector('iron-image');
	});

	test('100% width image fills container', function(done) {
	fixedWidthIronImage.$.img.addEventListener('load', function onLoadedChanged(e) {
	fixedWidthIronImage.$.img.removeEventListener('load', onLoadedChanged);
	Polymer.updateStyles();

	var containerRect = fixedWidthContainer.getBoundingClientRect();
	var ironImageRect = fixedWidthIronImage.getBoundingClientRect();
	var wrappedImageRect = fixedWidthIronImage.$.img.getBoundingClientRect();

	expect(containerRect.width).to.be.closeTo(500, 0.5);
	expect(ironImageRect.width).to.be.closeTo(500, 0.5);
	expect(wrappedImageRect.width).to.be.closeTo(500, 0.5);

	done();
	});

	fixedWidthIronImage.src = randomImageUrl();
	});

	test('100% height image fills container', function(done) {
	fixedHeightIronImage.$.img.addEventListener('load', function onLoadedChanged(e) {
	fixedHeightIronImage.$.img.removeEventListener('load', onLoadedChanged);
	Polymer.updateStyles();

	var containerRect = fixedHeightContainer.getBoundingClientRect();
	var ironImageRect = fixedHeightIronImage.getBoundingClientRect();
	var wrappedImageRect = fixedHeightIronImage.$.img.getBoundingClientRect();

	expect(containerRect.height).to.be.closeTo(500, 0.5);
	expect(ironImageRect.height).to.be.closeTo(500, 0.5);
	expect(wrappedImageRect.height).to.be.closeTo(500, 0.5);

	done();
	});

	fixedHeightIronImage.src = randomImageUrl();
	});
	});

	suite('accessibility', function() {
	suite('sizing inactive', function() {
	var image;

	setup(function() {
	image = fixture('TrivialImage');
	});

	test('#sizedImgDiv is hidden', function() {
	var sizedImgDivStyle = window.getComputedStyle(image.$.sizedImgDiv);
	assert.strictEqual(sizedImgDivStyle.display, 'none');
	});

	test('img has no alt text by default', function() {
	assert.isFalse(image.$.img.hasAttribute('alt'));
	});

	test('img alt text is empty string when iron-image alt text is empty string', function() {
	image.alt = '';

	assert.isTrue(image.$.img.hasAttribute('alt'));
	assert.strictEqual(image.$.img.getAttribute('alt'), '');
	});

	test('img alt text matches iron-image alt text when defined', function() {
	image.alt = 'alt text value';

	assert.isTrue(image.$.img.hasAttribute('alt'));
	assert.strictEqual(image.$.img.getAttribute('alt'), 'alt text value');
	});
	});

	suite('sizing active', function() {
	var image;

	setup(function() {
	image = fixture('TrivialImage');
	image.sizing = 'cover';
	});

	test('inner img is hidden', function() {
	var imgStyle = window.getComputedStyle(image.$.img);
	assert.strictEqual(imgStyle.display, 'none');
	});

	test('#sizedImgDiv has empty aria-label text by default', function() {
	assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
	assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), '');
	});

	test('#sizedImgDiv has aria-hidden when iron-image alt text is empty string', function() {
	image.alt = '';

	assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-hidden'));
	var hiddenValue = image.$.sizedImgDiv.getAttribute('aria-hidden');
	assert.isTrue(hiddenValue === '' \|\| hiddenValue === 'true');
	});

	test('#sizedImgDiv aria-label matches iron-image alt text when defined', function() {
	image.alt = 'alt text value';

	assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
	assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'alt text value');
	});

	test('#sizedImgDiv aria-label text is last path component of src when iron-image alt text is undefined', function() {
	image.src = '/some/path.components/file.jpg?a=b&c=d#anchor';

	assert.isTrue(image.$.sizedImgDiv.hasAttribute('aria-label'));
	assert.strictEqual(image.$.sizedImgDiv.getAttribute('aria-label'), 'file.jpg');
	});
	});
	});
	});
	</script>
	</body>
	</html>