iron-iconset.html 4.42 KB
<!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-iconset</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <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="../iron-iconset.html">
  <link rel="import" href="../../iron-meta/iron-meta.html">
  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
  <link rel="import" href="../../test-fixture/test-fixture.html">

</head>
<body>

  <test-fixture id="TrivialIconset">
    <template>
      <iron-iconset name="foo" src="../demo/my-icons.png"></iron-iconset>
      <iron-meta type="iconset"></iron-meta>
    </template>
  </test-fixture>

  <test-fixture id="StandardIconset">
    <template>
      <iron-iconset name="my-icons"
                    src="../demo/my-icons.png"
                    width="96"
                    size="24"
                    icons="location place starta stopb bus car train walk"></iron-iconset>
      <div></div>
    </template>
  </test-fixture>

  <test-fixture id="ThemedIconset">
    <template>
      <iron-iconset name="my-icons"
                    src="../demo/my-icons.png"
                    width="96"
                    size="24"
                    icons="location place starta stopb bus car train walk">
        <property theme="large" offset-x="10" offset-y="10"></property>
      </iron-iconset>
      <div></div>
    </template>
  </test-fixture>

  <script>
suite('<iron-iconset>', function () {
  suite('basic behavior', function () {
    var iconset;
    var meta;
    var loadedPromise;

    setup(function () {
      loadedPromise = new Promise(function(resolve) {
        window.addEventListener('iron-iconset-added', function(ev) {
          if (ev && ev.detail === iconset) {
            resolve();
          }
        });
      });

      var elements = fixture('TrivialIconset');

      iconset = elements[0];
      meta = elements[1];
    });

    test('it can be accessed via iron-meta', function () {
      expect(meta.byKey('foo')).to.be.equal(iconset);
    });

    test('it fires an iron-iconset-added event on the window', function() {
      return loadedPromise;
    });
  });

  suite('when src, width, iconSize and icons are assigned', function () {
    var iconset;
    var div;

    setup(function () {
      var elements = fixture('StandardIconset');

      iconset = elements[0];
      div = elements[1];
    });

/*
    test('appends a child to the target element', function () {
      expect(div.firstElementChild).to.not.be.ok;

      iconset.applyIcon(div, 'location');

      expect(div.firstElementChild).to.be.ok;
    });
*/

    test('sets the background image of the target element', function () {
      var iconStyle;

      iconset.applyIcon(div, 'location');
      iconStyle = window.getComputedStyle(div);

      expect(iconStyle.backgroundImage).to.match(/url\(.*demo\/my-icons.png["']?\)/);
    });

    test('offsets the background image to the icon\'s position', function () {
      var iconStyle;

      iconset.applyIcon(div, 'bus');
      iconStyle = window.getComputedStyle(div);

      expect(iconStyle.backgroundPosition).to.match(/0(px|%) -24px/);
    });
  });

  suite('when an iconset is themed', function () {
    var iconset;
    var div;

    setup(function () {
      var elements = fixture('ThemedIconset');

      iconset = elements[0];
      div = elements[1];
    });

    test('can use a theme when applying icon', function () {
      iconset.applyIcon(div, 'bus', 'large');

      expect(div).to.be.ok;
    });

    test('adjusts the icon by the theme offset', function () {
      var iconStyle;

      iconset.applyIcon(div, 'bus', 'large');
      iconStyle = window.getComputedStyle(div);

      expect(iconStyle.backgroundPosition).to.match(/-10px -34px/);
    });
  });
});
  </script>

</body>
</html>