← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/iron-iconset/test/iron-iconset.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/iron-iconset/test/iron-iconset.html
 
1
<!doctype html>
 
2
<!--
 
3
@license
 
4
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
5
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
6
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
7
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
8
Code distributed by Google as part of the polymer project is also
 
9
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
10
-->
 
11
 
 
12
<html>
 
13
<head>
 
14
 
 
15
  <title>iron-iconset</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-iconset.html">
 
24
  <link rel="import" href="../../iron-meta/iron-meta.html">
 
25
  <link rel="import" href="../../promise-polyfill/promise-polyfill.html">
 
26
  <link rel="import" href="../../test-fixture/test-fixture.html">
 
27
 
 
28
</head>
 
29
<body>
 
30
 
 
31
  <test-fixture id="TrivialIconset">
 
32
    <template>
 
33
      <iron-iconset name="foo" src="../demo/my-icons.png"></iron-iconset>
 
34
      <iron-meta type="iconset"></iron-meta>
 
35
    </template>
 
36
  </test-fixture>
 
37
 
 
38
  <test-fixture id="StandardIconset">
 
39
    <template>
 
40
      <iron-iconset name="my-icons"
 
41
                    src="../demo/my-icons.png"
 
42
                    width="96"
 
43
                    size="24"
 
44
                    icons="location place starta stopb bus car train walk"></iron-iconset>
 
45
      <div></div>
 
46
    </template>
 
47
  </test-fixture>
 
48
 
 
49
  <test-fixture id="ThemedIconset">
 
50
    <template>
 
51
      <iron-iconset name="my-icons"
 
52
                    src="../demo/my-icons.png"
 
53
                    width="96"
 
54
                    size="24"
 
55
                    icons="location place starta stopb bus car train walk">
 
56
        <property theme="large" offset-x="10" offset-y="10"></property>
 
57
      </iron-iconset>
 
58
      <div></div>
 
59
    </template>
 
60
  </test-fixture>
 
61
 
 
62
  <script>
 
63
suite('<iron-iconset>', function () {
 
64
  suite('basic behavior', function () {
 
65
    var iconset;
 
66
    var meta;
 
67
    var loadedPromise;
 
68
 
 
69
    setup(function () {
 
70
      loadedPromise = new Promise(function(resolve) {
 
71
        window.addEventListener('iron-iconset-added', function(ev) {
 
72
          if (ev && ev.detail === iconset) {
 
73
            resolve();
 
74
          }
 
75
        });
 
76
      });
 
77
 
 
78
      var elements = fixture('TrivialIconset');
 
79
 
 
80
      iconset = elements[0];
 
81
      meta = elements[1];
 
82
    });
 
83
 
 
84
    test('it can be accessed via iron-meta', function () {
 
85
      expect(meta.byKey('foo')).to.be.equal(iconset);
 
86
    });
 
87
 
 
88
    test('it fires an iron-iconset-added event on the window', function() {
 
89
      return loadedPromise;
 
90
    });
 
91
  });
 
92
 
 
93
  suite('when src, width, iconSize and icons are assigned', function () {
 
94
    var iconset;
 
95
    var div;
 
96
 
 
97
    setup(function () {
 
98
      var elements = fixture('StandardIconset');
 
99
 
 
100
      iconset = elements[0];
 
101
      div = elements[1];
 
102
    });
 
103
 
 
104
/*
 
105
    test('appends a child to the target element', function () {
 
106
      expect(div.firstElementChild).to.not.be.ok;
 
107
 
 
108
      iconset.applyIcon(div, 'location');
 
109
 
 
110
      expect(div.firstElementChild).to.be.ok;
 
111
    });
 
112
*/
 
113
 
 
114
    test('sets the background image of the target element', function () {
 
115
      var iconStyle;
 
116
 
 
117
      iconset.applyIcon(div, 'location');
 
118
      iconStyle = window.getComputedStyle(div);
 
119
 
 
120
      expect(iconStyle.backgroundImage).to.match(/url\(.*demo\/my-icons.png["']?\)/);
 
121
    });
 
122
 
 
123
    test('offsets the background image to the icon\'s position', function () {
 
124
      var iconStyle;
 
125
 
 
126
      iconset.applyIcon(div, 'bus');
 
127
      iconStyle = window.getComputedStyle(div);
 
128
 
 
129
      expect(iconStyle.backgroundPosition).to.match(/0(px|%) -24px/);
 
130
    });
 
131
  });
 
132
 
 
133
  suite('when an iconset is themed', function () {
 
134
    var iconset;
 
135
    var div;
 
136
 
 
137
    setup(function () {
 
138
      var elements = fixture('ThemedIconset');
 
139
 
 
140
      iconset = elements[0];
 
141
      div = elements[1];
 
142
    });
 
143
 
 
144
    test('can use a theme when applying icon', function () {
 
145
      iconset.applyIcon(div, 'bus', 'large');
 
146
 
 
147
      expect(div).to.be.ok;
 
148
    });
 
149
 
 
150
    test('adjusts the icon by the theme offset', function () {
 
151
      var iconStyle;
 
152
 
 
153
      iconset.applyIcon(div, 'bus', 'large');
 
154
      iconStyle = window.getComputedStyle(div);
 
155
 
 
156
      expect(iconStyle.backgroundPosition).to.match(/-10px -34px/);
 
157
    });
 
158
  });
 
159
});
 
160
  </script>
 
161
 
 
162
</body>
 
163
</html>