• 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-icon</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-icon.html">
24  <link rel="import" href="../../iron-iconset/iron-iconset.html">
25  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
26  <link rel="import" href="../../test-fixture/test-fixture.html">
27  <link rel="import" href="icon-holder.html">
28
29</head>
30<body>
31
32  <test-fixture id="TrivialIcon">
33    <template>
34      <iron-icon src="../demo/location.png"></iron-icon>
35    </template>
36  </test-fixture>
37
38  <test-fixture id="IconFromIconset">
39    <template>
40      <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
41      <iron-icon icon="example:location"></iron-icon>
42    </template>
43  </test-fixture>
44
45  <test-fixture id="WithoutAnIconSource">
46    <template>
47      <iron-icon icon=""></iron-icon>
48      <iron-icon></iron-icon>
49      <iron-icon src=""></iron-icon>
50    </template>
51  </test-fixture>
52
53  <test-fixture id="UsingAsyncIconset">
54    <template>
55      <iron-icon icon="async:location"></iron-icon>
56    </template>
57  </test-fixture>
58
59  <test-fixture id="AsyncIconset">
60    <template>
61      <iron-iconset name="async" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
62    </template>
63  </test-fixture>
64
65  <test-fixture id="SrcIconSwitch">
66    <template>
67      <iron-iconset name="example" icons="location blank" src="location.png" size="24" width="48"></iron-iconset>
68      <iron-icon></iron-icon>
69    </template>
70  </test-fixture>
71
72  <test-fixture id="ParentForceUpdate">
73    <template>
74      <icon-holder>
75        <iron-icon></iron-icon>
76      </icon-holder>
77    </template>
78  </test-fixture>
79
80  <script>
81function iconElementFor (node) {
82  var nodes = Polymer.dom(node.root).childNodes;
83
84  for (var i = 0; i < nodes.length; ++i) {
85    if (nodes[i].nodeName.match(/DIV|IMG/)) {
86      return nodes[i];
87    }
88  }
89}
90
91function hasIcon (node) {
92  return /png/.test(node.style.backgroundImage);
93}
94
95suite('<iron-icon>', function() {
96  suite('basic behavior', function() {
97    var icon;
98
99    setup(function() {
100      icon = fixture('TrivialIcon');
101    });
102
103    test('can be assigned an icon with the src attribute', function() {
104      expect(iconElementFor(icon)).to.be.ok;
105      expect(iconElementFor(icon).src).to.match(/demo\/location\.png/);
106    });
107
108    test('can change its src dynamically', function() {
109      icon.src = 'foo.png';
110
111      expect(iconElementFor(icon).src).to.match(/foo\.png/);
112    });
113  });
114
115  suite('lifecycle', function() {
116    var icon;
117
118    setup(function() {
119      icon = document.createElement('iron-icon');
120    });
121
122    teardown(function() {
123      if (icon.parentNode != null) {
124        Polymer.dom(icon.parentNode).removeChild(icon);
125      }
126    });
127
128    test('does not create icon until attached', function() {
129      icon.src = 'location.png';
130
131      var children = Polymer.dom(icon.root).querySelectorAll('img,svg');
132
133      expect(children.length).to.be.eql(0);
134      Polymer.dom(document.body).appendChild(icon);
135      Polymer.dom.flush();
136      children = Polymer.dom(icon.root).querySelectorAll('img,svg');
137      expect(children.length).to.be.eql(1);
138    });
139  });
140
141  suite('when paired with an iconset', function() {
142    var icon;
143
144    setup(function() {
145      var elements = fixture('IconFromIconset');
146
147      icon = elements[1];
148    });
149
150    test('can be assigned an icon from the iconset', function() {
151      expect(hasIcon(icon)).to.be.ok;
152    });
153
154    test('can change its icon dynamically', function() {
155      var style = icon.style;
156
157      expect(style.backgroundPosition).to.match(/0(%|px) 0(%|px)/);
158
159      icon.icon = "example:blank";
160
161      expect(style.backgroundPosition).to.match(/-24px 0(%|px)/);
162    });
163  });
164
165  suite('when no icon source is provided', function() {
166    test('will politely wait for an icon source without throwing', function() {
167      document.createElement('iron-icon');
168      fixture('WithoutAnIconSource');
169    });
170  })
171
172  suite('when loading async', function() {
173    test('will get icon after iconset is added', function() {
174      var icon = fixture('UsingAsyncIconset');
175      expect(hasIcon(icon)).to.be.false;
176      return new Promise(function(resolve, reject) {
177        window.addEventListener('iron-iconset-added', function() {
178          if (hasIcon(icon)) {
179            resolve();
180          } else {
181            reject(new Error('icon didn\'t load after iconset loaded'));
182          }
183        });
184        fixture('AsyncIconset');
185      });
186    });
187  });
188
189  suite('when switching between src and icon properties', function() {
190    var icon;
191
192    setup(function() {
193      var elements = fixture('IconFromIconset');
194      icon = elements[1];
195    });
196
197    test('will display the icon if both icon and src are set', function() {
198      icon.src = '../demo/location.png';
199      icon.icon = 'example:location';
200      expect(hasIcon(icon)).to.be.true;
201      expect(iconElementFor(icon)).to.not.exist;
202
203      // Check if it works too it we change the affectation order
204      icon.icon = 'example:location';
205      icon.src = '../demo/location.png';
206      expect(hasIcon(icon)).to.be.true;
207      expect(iconElementFor(icon)).to.not.exist;
208    });
209
210    test('will display the icon when src is defined first and then reset', function() {
211      icon.src = '../demo/location.png';
212      icon.icon = null;
213      icon.src = null;
214      icon.icon = 'example:location';
215      expect(hasIcon(icon)).to.be.true;
216      expect(iconElementFor(icon)).to.not.exist;
217    });
218
219    test('will display the src when icon is defined first and then reset', function() {
220      icon.src = null;
221      icon.icon = 'example:location';
222      icon.src = '../demo/location.png';
223      icon.icon = null;
224      expect(hasIcon(icon)).to.be.false;
225      expect(iconElementFor(icon)).to.exist;
226    });
227
228    test('will display nothing if both properties are unset', function() {
229      icon.src = '../demo/location.png';
230      icon.icon = 'example:location';
231      icon.src = null;
232      icon.icon = null;
233      expect(hasIcon(icon)).to.be.false;
234      expect(iconElementFor(icon)).to.not.exist;
235    });
236  });
237  suite('ancestor direct updates', function() {
238    test('handle properties set before ready', function() {
239      var holder = fixture('ParentForceUpdate');
240    });
241  });
242});
243  </script>
244
245</body>
246</html>
247