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