Blame view

bower_components/iron-iconset-svg/test/iron-iconset-svg.html 4.61 KB
e619a3b0   Luigi Serra   Controllet cross ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
  <!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="../../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="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>
eb240478   Luigi Serra   public room cards...
45
46
47
              <symbol id="rect" viewBox="0 0 50 25">
                <rect x="0" y="0" width="50" height="25"></rect>
              </symbol>
e619a3b0   Luigi Serra   Controllet cross ...
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
            </defs>
          </svg>
        </iron-iconset-svg>
        <div></div>
      </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);
          });
  
f748e9cf   Luigi Serra   new controllet an...
81
82
83
84
85
86
          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);
          });
  
e619a3b0   Luigi Serra   Controllet cross ...
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
          test('it fires an iron-iconset-added event on the window', function() {
            return loadedPromise;
          });
        });
  
        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];
          });
  
f748e9cf   Luigi Serra   new controllet an...
102
103
104
105
106
107
          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);
          });
          
e619a3b0   Luigi Serra   Controllet cross ...
108
109
110
111
112
113
114
          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 () {
eb240478   Luigi Serra   public room cards...
115
            expect(iconset.getIconNames()).to.deep.eql(['my-icons:circle', 'my-icons:square', 'my-icons:rect']);
e619a3b0   Luigi Serra   Controllet cross ...
116
117
118
119
120
121
122
123
124
125
126
127
          });
  
          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;
            });
          });
  
eb240478   Luigi Serra   public room cards...
128
129
130
131
132
133
134
135
136
137
          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');
          });
  
e619a3b0   Luigi Serra   Controllet cross ...
138
139
140
141
142
143
144
145
        });
  
      });
  
    </script>
  
  </body>
  </html>