diff options
Diffstat (limited to 'systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html')
| -rw-r--r-- | systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html | 338 |
1 files changed, 338 insertions, 0 deletions
diff --git a/systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html b/systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html new file mode 100644 index 0000000..162ff4e --- /dev/null +++ b/systrace/catapult/third_party/polymer/components/iron-image/test/iron-image.html @@ -0,0 +1,338 @@ +<!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> |