jekyll-polymer-magazine 0.1.0

data/assets/bower_components/iron-iconset-svg/demo/svg-sample-icons.html

@@ -0,0 +1,81 @@
+
+<!--
+@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
+-->
+
+<link rel="import" href="../../iron-icon/iron-icon.html">
+<link rel="import" href="../iron-iconset-svg.html">
+
+<iron-iconset-svg name="svg-sample-icons" size="100">
+  <svg>
+    <defs>
+    <g id="codepen">
+      <path class="outer-ring"  d="M50,0C22.385,0,0,22.385,0,50c0,27.615,22.385,50,50,50c27.614,0,50-22.385,50-50C100,22.385,77.615,0,50,0z M50,91.789
+      C26.958,91.789,8.212,73.042,8.212,50C8.212,26.958,26.958,8.212,50,8.212c23.042,0,41.788,18.747,41.788,41.789
+      C91.788,73.042,73.042,91.789,50,91.789z"></path>
+      <path class="inner-logo"  d="M80.893,40.234c-0.006-0.039-0.016-0.076-0.022-0.115c-0.013-0.075-0.027-0.15-0.046-0.223
+      c-0.012-0.044-0.028-0.086-0.042-0.128c-0.021-0.065-0.042-0.13-0.068-0.193c-0.018-0.044-0.039-0.088-0.059-0.13
+      c-0.028-0.06-0.057-0.119-0.09-0.175c-0.024-0.042-0.051-0.083-0.076-0.124c-0.036-0.055-0.073-0.109-0.112-0.161
+      c-0.029-0.039-0.06-0.078-0.091-0.115c-0.042-0.049-0.086-0.098-0.132-0.143c-0.035-0.036-0.069-0.072-0.106-0.104
+      c-0.049-0.044-0.099-0.086-0.15-0.127c-0.04-0.031-0.079-0.062-0.12-0.091c-0.016-0.01-0.029-0.023-0.044-0.033L51.474,19.531
+      c-0.893-0.595-2.055-0.595-2.947,0L20.267,38.371c-0.015,0.01-0.028,0.023-0.044,0.033c-0.042,0.029-0.081,0.06-0.12,0.091
+      c-0.052,0.041-0.102,0.083-0.15,0.127c-0.037,0.032-0.071,0.068-0.106,0.104c-0.046,0.045-0.09,0.094-0.132,0.143
+      c-0.031,0.038-0.062,0.077-0.092,0.115c-0.039,0.052-0.076,0.106-0.111,0.161c-0.027,0.041-0.052,0.082-0.076,0.124
+      c-0.033,0.057-0.062,0.115-0.09,0.175c-0.021,0.042-0.042,0.086-0.06,0.13c-0.026,0.063-0.047,0.128-0.068,0.193
+      c-0.014,0.042-0.029,0.084-0.042,0.128c-0.02,0.073-0.032,0.148-0.046,0.223c-0.006,0.039-0.016,0.076-0.021,0.115
+      c-0.016,0.114-0.024,0.229-0.024,0.346V59.42c0,0.117,0.009,0.233,0.024,0.348c0.005,0.038,0.015,0.077,0.021,0.114
+      c0.014,0.075,0.027,0.149,0.046,0.223c0.012,0.043,0.028,0.086,0.042,0.128c0.021,0.065,0.042,0.13,0.068,0.195
+      c0.018,0.044,0.039,0.086,0.06,0.129c0.028,0.06,0.058,0.118,0.09,0.177c0.024,0.041,0.049,0.082,0.076,0.122
+      c0.035,0.056,0.072,0.109,0.111,0.161c0.029,0.041,0.061,0.078,0.092,0.115c0.042,0.049,0.086,0.098,0.132,0.144
+      c0.035,0.036,0.069,0.071,0.106,0.104c0.048,0.044,0.099,0.086,0.15,0.127c0.039,0.031,0.078,0.062,0.12,0.091
+      c0.016,0.01,0.029,0.023,0.044,0.032l28.259,18.84c0.446,0.297,0.96,0.447,1.474,0.447c0.513,0,1.027-0.149,1.473-0.447
+      l28.259-18.84c0.015-0.009,0.028-0.022,0.044-0.032c0.042-0.029,0.081-0.06,0.12-0.091c0.051-0.041,0.102-0.083,0.15-0.127
+      c0.037-0.033,0.071-0.068,0.106-0.104c0.046-0.046,0.09-0.095,0.132-0.144c0.031-0.037,0.062-0.075,0.091-0.115
+      c0.04-0.052,0.076-0.105,0.112-0.161c0.025-0.041,0.051-0.081,0.076-0.122c0.033-0.059,0.062-0.117,0.09-0.177
+      c0.02-0.042,0.041-0.085,0.059-0.129c0.026-0.065,0.047-0.13,0.068-0.195c0.014-0.042,0.03-0.085,0.042-0.128
+      c0.02-0.074,0.033-0.148,0.046-0.223c0.006-0.037,0.016-0.076,0.022-0.114c0.014-0.115,0.023-0.231,0.023-0.348V40.581
+      C80.916,40.464,80.907,40.348,80.893,40.234z M52.657,26.707l20.817,13.877l-9.298,6.221l-11.519-7.706V26.707z M47.343,26.707
+      v12.393l-11.518,7.706l-9.299-6.221L47.343,26.707z M24.398,45.554L31.046,50l-6.648,4.446V45.554z M47.343,73.294L26.525,59.417
+      l9.299-6.219l11.518,7.704V73.294z M50,56.286L40.603,50L50,43.715L59.397,50L50,56.286z M52.657,73.294V60.902l11.519-7.704
+      l9.298,6.219L52.657,73.294z M75.602,54.447L68.955,50l6.647-4.446V54.447z"></path>
+    </g>
+
+    <path id="twitter" d="M100.001,17.942c-3.681,1.688-7.633,2.826-11.783,3.339
+    c4.236-2.624,7.49-6.779,9.021-11.73c-3.965,2.432-8.354,4.193-13.026,5.146C80.47,10.575,75.138,8,69.234,8
+    c-11.33,0-20.518,9.494-20.518,21.205c0,1.662,0.183,3.281,0.533,4.833c-17.052-0.884-32.168-9.326-42.288-22.155
+    c-1.767,3.133-2.778,6.773-2.778,10.659c0,7.357,3.622,13.849,9.127,17.65c-3.363-0.109-6.525-1.064-9.293-2.651
+    c-0.002,0.089-0.002,0.178-0.002,0.268c0,10.272,7.072,18.845,16.458,20.793c-1.721,0.484-3.534,0.744-5.405,0.744
+    c-1.322,0-2.606-0.134-3.859-0.379c2.609,8.424,10.187,14.555,19.166,14.726c-7.021,5.688-15.867,9.077-25.48,9.077
+    c-1.656,0-3.289-0.102-4.895-0.297C9.08,88.491,19.865,92,31.449,92c37.737,0,58.374-32.312,58.374-60.336
+    c0-0.92-0.02-1.834-0.059-2.743C93.771,25.929,97.251,22.195,100.001,17.942L100.001,17.942z"></path>
+
+    <g id="youtube">
+      <path class="youtube"  d="M98.77,27.492c-1.225-5.064-5.576-8.799-10.811-9.354C75.561,16.818,63.01,15.993,50.514,16
+      c-12.495-0.007-25.045,0.816-37.446,2.139c-5.235,0.557-9.583,4.289-10.806,9.354C0.522,34.704,0.5,42.574,0.5,50.001
+      c0,7.426,0,15.296,1.741,22.509c1.224,5.061,5.572,8.799,10.807,9.352c12.399,1.32,24.949,2.145,37.446,2.14
+      c12.494,0.005,25.047-0.817,37.443-2.14c5.234-0.555,9.586-4.291,10.81-9.352c1.741-7.213,1.753-15.083,1.753-22.509
+      S100.51,34.704,98.77,27.492 M67.549,52.203L43.977,64.391c-2.344,1.213-4.262,0.119-4.262-2.428V38.036
+      c0-2.548,1.917-3.644,4.262-2.429l23.572,12.188C69.896,49.008,69.896,50.992,67.549,52.203"></path>
+    </g>
+
+    </defs>
+
+  </svg>
+</iron-iconset-svg>
+
+<iron-iconset-svg name="inline" size="24">
+  <svg>
+    <defs>
+      <g id="shape">
+        <rect x="12" y="0" width="12" height="24" />
+        <circle cx="12" cy="12" r="12" />
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>

data/assets/bower_components/iron-iconset-svg/index.html

@@ -0,0 +1,26 @@
+<!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>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>

data/assets/bower_components/iron-iconset-svg/iron-iconset-svg.html

@@ -0,0 +1,241 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-meta/iron-meta.html">
+
+<script>
+  /**
+   * The `iron-iconset-svg` element allows users to define their own icon sets
+   * that contain svg icons. The svg icon elements should be children of the
+   * `iron-iconset-svg` element. Multiple icons should be given distinct id's.
+   *
+   * Using svg elements to create icons has a few advantages over traditional
+   * bitmap graphics like jpg or png. Icons that use svg are vector based so
+   * they are resolution independent and should look good on any device. They
+   * are stylable via css. Icons can be themed, colorized, and even animated.
+   *
+   * Example:
+   *
+   *     <iron-iconset-svg name="my-svg-icons" size="24">
+   *       <svg>
+   *         <defs>
+   *           <g id="shape">
+   *             <rect x="12" y="0" width="12" height="24" />
+   *             <circle cx="12" cy="12" r="12" />
+   *           </g>
+   *         </defs>
+   *       </svg>
+   *     </iron-iconset-svg>
+   *
+   * This will automatically register the icon set "my-svg-icons" to the iconset
+   * database.  To use these icons from within another element, make a
+   * `iron-iconset` element and call the `byId` method
+   * to retrieve a given iconset. To apply a particular icon inside an
+   * element use the `applyIcon` method. For example:
+   *
+   *     iconset.applyIcon(iconNode, 'car');
+   *
+   * @element iron-iconset-svg
+   * @demo demo/index.html
+   * @implements {Polymer.Iconset}
+   */
+  Polymer({
+    is: 'iron-iconset-svg',
+
+    properties: {
+
+      /**
+       * The name of the iconset.
+       */
+      name: {
+        type: String,
+        observer: '_nameChanged'
+      },
+
+      /**
+       * The size of an individual icon. Note that icons must be square.
+       */
+      size: {
+        type: Number,
+        value: 24
+      },
+
+      /**
+       * Set to true to enable mirroring of icons where specified when they are
+       * stamped. Icons that should be mirrored should be decorated with a
+       * `mirror-in-rtl` attribute.
+       *
+       * NOTE: For performance reasons, direction will be resolved once per
+       * document per iconset, so moving icons in and out of RTL subtrees will
+       * not cause their mirrored state to change.
+       */
+      rtlMirroring: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    attached: function() {
+      this.style.display = 'none';
+    },
+
+    /**
+     * Construct an array of all icon names in this iconset.
+     *
+     * @return {!Array} Array of icon names.
+     */
+    getIconNames: function() {
+      this._icons = this._createIconMap();
+      return Object.keys(this._icons).map(function(n) {
+        return this.name + ':' + n;
+      }, this);
+    },
+
+    /**
+     * Applies an icon to the given element.
+     *
+     * An svg icon is prepended to the element's shadowRoot if it exists,
+     * otherwise to the element itself.
+     *
+     * If RTL mirroring is enabled, and the icon is marked to be mirrored in
+     * RTL, the element will be tested (once and only once ever for each
+     * iconset) to determine the direction of the subtree the element is in.
+     * This direction will apply to all future icon applications, although only
+     * icons marked to be mirrored will be affected.
+     *
+     * @method applyIcon
+     * @param {Element} element Element to which the icon is applied.
+     * @param {string} iconName Name of the icon to apply.
+     * @return {?Element} The svg element which renders the icon.
+     */
+    applyIcon: function(element, iconName) {
+      // insert svg element into shadow root, if it exists
+      element = element.root || element;
+      // Remove old svg element
+      this.removeIcon(element);
+      // install new svg element
+      var svg = this._cloneIcon(iconName,
+          this.rtlMirroring && this._targetIsRTL(element));
+      if (svg) {
+        var pde = Polymer.dom(element);
+        pde.insertBefore(svg, pde.childNodes[0]);
+        return element._svgIcon = svg;
+      }
+      return null;
+    },
+
+    /**
+     * Remove an icon from the given element by undoing the changes effected
+     * by `applyIcon`.
+     *
+     * @param {Element} element The element from which the icon is removed.
+     */
+    removeIcon: function(element) {
+      // Remove old svg element
+      element = element.root || element;
+      if (element._svgIcon) {
+        Polymer.dom(element).removeChild(element._svgIcon);
+        element._svgIcon = null;
+      }
+    },
+
+    /**
+     * Measures and memoizes the direction of the element. Note that this
+     * measurement is only done once and the result is memoized for future
+     * invocations.
+     */
+    _targetIsRTL: function(target) {
+      if (this.__targetIsRTL == null) {
+        if (target && target.nodeType !== Node.ELEMENT_NODE) {
+          target = target.host;
+        }
+
+        this.__targetIsRTL = target &&
+            window.getComputedStyle(target)['direction'] === 'rtl';
+      }
+
+      return this.__targetIsRTL;
+    },
+
+    /**
+     *
+     * When name is changed, register iconset metadata
+     *
+     */
+    _nameChanged: function() {
+      new Polymer.IronMeta({type: 'iconset', key: this.name, value: this});
+      this.async(function() {
+        this.fire('iron-iconset-added', this, {node: window});
+      });
+    },
+
+    /**
+     * Create a map of child SVG elements by id.
+     *
+     * @return {!Object} Map of id's to SVG elements.
+     */
+    _createIconMap: function() {
+      // Objects chained to Object.prototype (`{}`) have members. Specifically,
+      // on FF there is a `watch` method that confuses the icon map, so we
+      // need to use a null-based object here.
+      var icons = Object.create(null);
+      Polymer.dom(this).querySelectorAll('[id]')
+        .forEach(function(icon) {
+          icons[icon.id] = icon;
+        });
+      return icons;
+    },
+
+    /**
+     * Produce installable clone of the SVG element matching `id` in this
+     * iconset, or `undefined` if there is no matching element.
+     *
+     * @return {Element} Returns an installable clone of the SVG element
+     * matching `id`.
+     */
+    _cloneIcon: function(id, mirrorAllowed) {
+      // create the icon map on-demand, since the iconset itself has no discrete
+      // signal to know when it's children are fully parsed
+      this._icons = this._icons || this._createIconMap();
+      return this._prepareSvgClone(this._icons[id], this.size, mirrorAllowed);
+    },
+
+    /**
+     * @param {Element} sourceSvg
+     * @param {number} size
+     * @param {Boolean} mirrorAllowed
+     * @return {Element}
+     */
+    _prepareSvgClone: function(sourceSvg, size, mirrorAllowed) {
+      if (sourceSvg) {
+        var content = sourceSvg.cloneNode(true),
+            svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+            viewBox = content.getAttribute('viewBox') || '0 0 ' + size + ' ' + size,
+            cssText = 'pointer-events: none; display: block; width: 100%; height: 100%;';
+
+        if (mirrorAllowed && content.hasAttribute('mirror-in-rtl')) {
+          cssText += '-webkit-transform:scale(-1,1);transform:scale(-1,1);';
+        }
+
+        svg.setAttribute('viewBox', viewBox);
+        svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+        // TODO(dfreedm): `pointer-events: none` works around https://crbug.com/370136
+        // TODO(sjmiles): inline style may not be ideal, but avoids requiring a shadow-root
+        svg.style.cssText = cssText;
+        svg.appendChild(content).removeAttribute('id');
+        return svg;
+      }
+      return null;
+    }
+
+  });
+
+</script>

data/assets/bower_components/iron-iconset-svg/test/index.html

@@ -0,0 +1,27 @@
+<!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>
+
+  <meta charset="utf-8">
+  <title>Tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+
+</head>
+<body>
+
+  <script>
+    WCT.loadSuites([
+      'iron-iconset-svg.html',
+      'iron-iconset-svg.html?dom=shadow'
+    ]);
+  </script>
+
+
+
+</body></html>

data/assets/bower_components/iron-iconset-svg/test/iron-iconset-svg.html

@@ -0,0 +1,233 @@
+<!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-svg</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-svg.html">
+  <link rel="import" href="../../iron-meta/iron-meta.html">
+  <link rel="import" href="../../iron-icon/iron-icon.html">
+  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+
+</head>
+<body>
+
+  <test-fixture id="TrivialIconsetSvg">
+    <template>
+      <iron-iconset-svg name="foo"></iron-iconset-svg>
+      <iron-meta type="iconset"></iron-meta>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="MirroredIconsetSvg">
+    <template>
+      <iron-iconset-svg name="mirrored-icons" rtl-mirroring>
+        <circle id="circle" cx="20" cy="20" r="10"></circle>
+        <symbol id="rect" viewBox="0 0 50 25" mirror-in-rtl>
+          <rect x="0" y="0" width="50" height="25"></rect>
+        </symbol>
+      </iron-iconset-svg>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="RtlContainer">
+    <template>
+      <div dir="rtl"></div>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="StandardIconsetSvg">
+    <template>
+      <iron-iconset-svg name="my-icons" size="20">
+        <svg>
+          <defs>
+            <circle id="circle" cx="20" cy="20" r="10"></circle>
+            <rect id="square" x="0" y="0" width="20" height="20"></rect>
+            <symbol id="rect" viewBox="0 0 50 25">
+              <rect x="0" y="0" width="50" height="25"></rect>
+            </symbol>
+          </defs>
+        </svg>
+      </iron-iconset-svg>
+      <div></div>
+      <iron-icon></iron-icon>
+    </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('TrivialIconsetSvg');
+          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 does not have a size', function () {
+          var rect = iconset.getBoundingClientRect();
+          expect(rect.width).to.be.equal(0);
+          expect(rect.height).to.be.equal(0);
+        });
+
+        test('it fires an iron-iconset-added event on the window', function() {
+          return loadedPromise;
+        });
+      });
+
+      suite('when stamping in an RTL context', function() {
+        var iconset;
+        var rtlContainer;
+
+        setup(function() {
+          iconset = fixture('MirroredIconsetSvg');
+          rtlContainer = fixture('RtlContainer');
+        });
+
+        test('icons marked as mirror-in-rtl are mirrored', function() {
+          iconset.applyIcon(rtlContainer, 'rect');
+          var svg = rtlContainer.firstElementChild;
+          var computedStyle = window.getComputedStyle(svg);
+          var transform = computedStyle.transform || computedStyle.webkitTransform;
+          expect(transform).to.be.eql('matrix(-1, 0, 0, 1, 0, 0)');
+        });
+
+        test('icons not marked as mirror-in-rtl are not mirrored', function() {
+          iconset.applyIcon(rtlContainer, 'circle');
+          var svg = rtlContainer.firstElementChild;
+          var computedStyle = window.getComputedStyle(svg);
+          var transform = computedStyle.transform || computedStyle.webkitTransform;
+          expect(transform).to.be.eql('none');
+        });
+
+        test('many mirrored icons only call getComputedStyle once', function() {
+          sinon.spy(window, 'getComputedStyle');
+
+          for (var i = 0; i < 3; ++i) {
+            iconset.applyIcon(rtlContainer, 'rect');
+          }
+
+          expect(window.getComputedStyle.callCount).to.be.eql(1);
+          window.getComputedStyle.restore();
+        });
+      });
+
+      suite('when paired with a size and SVG definition', function () {
+        var iconset;
+        var div;
+
+        setup(function () {
+          var elements = fixture('StandardIconsetSvg');
+          iconset = elements[0];
+          div = elements[1];
+        });
+
+        test('it does not have a size', function () {
+          var rect = iconset.getBoundingClientRect();
+          expect(rect.width).to.be.equal(0);
+          expect(rect.height).to.be.equal(0);
+        });
+
+        test('appends a child to the target element', function () {
+          expect(div.firstElementChild).to.not.be.ok;
+          iconset.applyIcon(div, 'circle');
+          expect(div.firstElementChild).to.be.ok;
+        });
+
+        test('can be queried for all available icons', function () {
+          expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square', 'my-icons:rect']);
+        });
+
+        test('supports any icon defined in the svg', function () {
+          var lastSvgIcon;
+
+          iconset.getIconNames().forEach(function (iconName) {
+            iconset.applyIcon(div, iconName.split(':').pop());
+            expect(div.firstElementChild).to.not.be.equal(lastSvgIcon);
+            lastSvgIcon = div.firstElementChild;
+          });
+        });
+
+        test('prefers a viewBox attribute over the iconset size', function () {
+          iconset.applyIcon(div, 'rect');
+          expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 50 25');
+        });
+
+        test('uses the iconset size when viewBox is not defined on the element', function () {
+          iconset.applyIcon(div, 'circle');
+          expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 20 20');
+        });
+      });
+
+      suite('Adding / removal from iron-icon', function () {
+        var iconset;
+        var div;
+        var ironIcon;
+
+        setup(function () {
+          var elements = fixture('StandardIconsetSvg');
+          iconset = elements[0];
+          div = elements[1];
+          ironIcon = elements[2];
+        });
+
+        test('be able to remove an iconset from a standard DOM element', function () {
+          iconset.applyIcon(div, 'circle');
+          Polymer.dom.flush();
+          expect(div.children.length).to.be.equal(1);
+          iconset.removeIcon(div);
+          Polymer.dom.flush();
+          expect(div.children.length).to.be.equal(0);
+        });
+
+        test('be able to remove an iconset from a Polymer element', function () {
+          var baseLength = Polymer.dom(ironIcon.root).children.length;
+          iconset.applyIcon(ironIcon, 'circle');
+          Polymer.dom.flush();
+          expect(Polymer.dom(ironIcon.root).children.length - baseLength).to.be.equal(1);
+          iconset.removeIcon(ironIcon);
+          Polymer.dom.flush();
+          expect(Polymer.dom(ironIcon.root).children.length - baseLength).to.be.equal(0);
+        });
+
+      });
+
+    });
+
+  </script>
+
+</body>
+</html>