@fat_crienturu/iron-iconset-svg
Version:
Manages a set of svg icons
234 lines (193 loc) • 7.87 kB
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>