← 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-selector/test/content.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-selector/test/content.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-selector-content</title>
 
16
  <meta charset="utf-8">
 
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-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="../../test-fixture/test-fixture.html">
 
24
  <link rel="import" href="content-element.html">
 
25
 
 
26
  <style>
 
27
    .iron-selected {
 
28
      background: #ccc;
 
29
    }
 
30
  </style>
 
31
 
 
32
</head>
 
33
<body>
 
34
 
 
35
  <test-content-element id="selector1" selected="item0">
 
36
    <div id="item0">item0</div>
 
37
    <div id="item1">item1</div>
 
38
    <div id="item2">item2</div>
 
39
    <div id="item3">item3</div>
 
40
  </test-content-element>
 
41
 
 
42
  <test-content-element id="selector2" selected="item0" selectable="item">
 
43
    <item id="item0">item0</item>
 
44
    <hr>
 
45
    <item id="item1">item1</item>
 
46
    <item id="item2">item2</item>
 
47
    <hr>
 
48
    <item id="item3">item3</item>
 
49
  </test-content-element>
 
50
 
 
51
  <test-content-element id="selector3" selected="item0">
 
52
    <template is="dom-repeat" id="t">
 
53
      <div id$="[[item.name]]">[[item.name]]</div>
 
54
    </template>
 
55
  </test-content-element>
 
56
 
 
57
  <script>
 
58
 
 
59
    var s1 = document.querySelector('#selector1');
 
60
    var s2 = document.querySelector('#selector2');
 
61
    var s3 = document.querySelector('#selector3');
 
62
 
 
63
    var t = document.querySelector('#t');
 
64
 
 
65
    suite('content', function() {
 
66
 
 
67
      test('attribute selected', function() {
 
68
        // check selected class
 
69
        assert.isTrue(s1.querySelector('#item0').classList.contains('iron-selected'));
 
70
      });
 
71
 
 
72
      test('set selected', function() {
 
73
        // set selected
 
74
        s1.selected = 'item1';
 
75
        // check selected class
 
76
        assert.isTrue(s1.querySelector('#item1').classList.contains('iron-selected'));
 
77
      });
 
78
 
 
79
      test('get items', function() {
 
80
        assert.equal(s1.$.selector.items.length, 4);
 
81
      });
 
82
 
 
83
      test('activate event', function() {
 
84
        var item = s1.querySelector('#item2');
 
85
        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
 
86
        // check selected class
 
87
        assert.isTrue(item.classList.contains('iron-selected'));
 
88
      });
 
89
 
 
90
      test('add item dynamically', function() {
 
91
        var item = document.createElement('div');
 
92
        item.id = 'item4';
 
93
        item.textContent = 'item4';
 
94
        Polymer.dom(s1).appendChild(item);
 
95
        Polymer.dom.flush();
 
96
        // set selected
 
97
        s1.selected = 'item4';
 
98
        // check items length
 
99
        assert.equal(s1.$.selector.items.length, 5);
 
100
        // check selected class
 
101
        assert.isTrue(s1.querySelector('#item4').classList.contains('iron-selected'));
 
102
      });
 
103
 
 
104
    });
 
105
 
 
106
    suite('content with selectable', function() {
 
107
 
 
108
      test('attribute selected', function() {
 
109
        // check selected class
 
110
        assert.isTrue(s2.querySelector('#item0').classList.contains('iron-selected'));
 
111
      });
 
112
 
 
113
      test('set selected', function() {
 
114
        // set selected
 
115
        s2.selected = 'item1';
 
116
        // check selected class
 
117
        assert.isTrue(s2.querySelector('#item1').classList.contains('iron-selected'));
 
118
      });
 
119
 
 
120
      test('get items', function() {
 
121
        assert.equal(s2.$.selector.items.length, 4);
 
122
      });
 
123
 
 
124
      test('activate event', function() {
 
125
        var item = s2.querySelector('#item2');
 
126
        item.dispatchEvent(new CustomEvent('tap', {bubbles: true}));
 
127
        // check selected class
 
128
        assert.isTrue(item.classList.contains('iron-selected'));
 
129
      });
 
130
 
 
131
      test('add item dynamically', function() {
 
132
        var item = document.createElement('item');
 
133
        item.id = 'item4';
 
134
        item.textContent = 'item4';
 
135
        Polymer.dom(s2).appendChild(item);
 
136
        Polymer.dom.flush();
 
137
        // set selected
 
138
        s2.selected = 'item4';
 
139
        // check items length
 
140
        assert.equal(s2.$.selector.items.length, 5);
 
141
        // check selected class
 
142
        assert.isTrue(s2.querySelector('#item4').classList.contains('iron-selected'));
 
143
      });
 
144
 
 
145
    });
 
146
 
 
147
    suite('content with dom-repeat', function() {
 
148
 
 
149
      test('supports repeated children', function(done) {
 
150
        t.items = [{name:'item0'}, {name: 'item1'}, {name: 'item2'}, {name: 'item3'}];
 
151
        setTimeout(function() {
 
152
          // check selected
 
153
          assert.equal(s3.selected, 'item0');
 
154
          // check selected class
 
155
          assert.isTrue(s3.querySelector('#item0').classList.contains('iron-selected'));
 
156
          // set selected
 
157
          s3.selected = 'item2';
 
158
          // check selected class
 
159
          assert.isTrue(s3.querySelector('#item2').classList.contains('iron-selected'));
 
160
          done();
 
161
        });
 
162
      });
 
163
 
 
164
    });
 
165
 
 
166
  </script>
 
167
 
 
168
</body>
 
169
</html>