diff options
Diffstat (limited to 'catapult/third_party/polymer/components/iron-iconset-svg/test/iron-iconset-svg.html')
| -rw-r--r-- | catapult/third_party/polymer/components/iron-iconset-svg/test/iron-iconset-svg.html | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-iconset-svg/test/iron-iconset-svg.html b/catapult/third_party/polymer/components/iron-iconset-svg/test/iron-iconset-svg.html new file mode 100644 index 00000000..c982abcf --- /dev/null +++ b/catapult/third_party/polymer/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> |