<!doctype html> <!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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>