• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3@license
4Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
6The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
8Code distributed by Google as part of the polymer project is also
9subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10-->
11
12<html>
13<head>
14
15  <title>iron-iconset-svg</title>
16  <meta charset="utf-8">
17  <meta name="viewport" content="width=device-width, initial-scale=1.0">
18
19  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
20  <script src="../../web-component-tester/browser.js"></script>
21  <script src="../../test-fixture/test-fixture-mocha.js"></script>
22
23  <link rel="import" href="../iron-iconset-svg.html">
24  <link rel="import" href="../../iron-meta/iron-meta.html">
25  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
26  <link rel="import" href="../../test-fixture/test-fixture.html">
27
28</head>
29<body>
30
31  <test-fixture id="TrivialIconsetSvg">
32    <template>
33      <iron-iconset-svg name="foo"></iron-iconset-svg>
34      <iron-meta type="iconset"></iron-meta>
35    </template>
36  </test-fixture>
37
38  <test-fixture id="StandardIconsetSvg">
39    <template>
40      <iron-iconset-svg name="my-icons" size="20">
41        <svg>
42          <defs>
43            <circle id="circle" cx="20" cy="20" r="10"></circle>
44            <rect id="square" x="0" y="0" width="20" height="20"></rect>
45            <symbol id="rect" viewBox="0 0 50 25">
46              <rect x="0" y="0" width="50" height="25"></rect>
47            </symbol>
48          </defs>
49        </svg>
50      </iron-iconset-svg>
51      <div></div>
52    </template>
53  </test-fixture>
54
55  <script>
56
57    suite('<iron-iconset>', function () {
58
59      suite('basic behavior', function () {
60        var iconset;
61        var meta;
62        var loadedPromise;
63
64        setup(function () {
65          loadedPromise = new Promise(function(resolve) {
66            window.addEventListener('iron-iconset-added', function(ev) {
67              if (ev && ev.detail === iconset) {
68                resolve();
69              }
70            });
71          });
72          var elements = fixture('TrivialIconsetSvg');
73          iconset = elements[0];
74          meta = elements[1];
75        });
76
77        test('it can be accessed via iron-meta', function () {
78          expect(meta.byKey('foo')).to.be.equal(iconset);
79        });
80
81        test('it does not have a size', function () {
82          var rect = iconset.getBoundingClientRect();
83          expect(rect.width).to.be.equal(0);
84          expect(rect.height).to.be.equal(0);
85        });
86
87        test('it fires an iron-iconset-added event on the window', function() {
88          return loadedPromise;
89        });
90      });
91
92      suite('when paired with a size and SVG definition', function () {
93        var iconset;
94        var div;
95
96        setup(function () {
97          var elements = fixture('StandardIconsetSvg');
98          iconset = elements[0];
99          div = elements[1];
100        });
101
102        test('it does not have a size', function () {
103          var rect = iconset.getBoundingClientRect();
104          expect(rect.width).to.be.equal(0);
105          expect(rect.height).to.be.equal(0);
106        });
107
108        test('appends a child to the target element', function () {
109          expect(div.firstElementChild).to.not.be.ok;
110          iconset.applyIcon(div, 'circle');
111          expect(div.firstElementChild).to.be.ok;
112        });
113
114        test('can be queried for all available icons', function () {
115          expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square', 'my-icons:rect']);
116        });
117
118        test('supports any icon defined in the svg', function () {
119          var lastSvgIcon;
120
121          iconset.getIconNames().forEach(function (iconName) {
122            iconset.applyIcon(div, iconName.split(':').pop());
123            expect(div.firstElementChild).to.not.be.equal(lastSvgIcon);
124            lastSvgIcon = div.firstElementChild;
125          });
126        });
127
128        test('prefers a viewBox attribute over the iconset size', function () {
129          iconset.applyIcon(div, 'rect');
130          expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 50 25');
131        });
132
133        test('uses the iconset size when viewBox is not defined on the element', function () {
134          iconset.applyIcon(div, 'circle');
135          expect(div.firstElementChild.getAttribute('viewBox')).to.be.equal('0 0 20 20');
136        });
137
138      });
139
140    });
141
142  </script>
143
144</body>
145</html>
146