~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-toolbar/test/paper-toolbar.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:
 
1
<!doctype html>
 
2
<!--
 
3
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 
4
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 
5
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 
6
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 
7
Code distributed by Google as part of the polymer project is also
 
8
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 
9
-->
 
10
<html>
 
11
<head>
 
12
  <meta charset="UTF-8">
 
13
  <title>paper-toolbar basic tests</title>
 
14
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
15
 
 
16
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
17
  <script src="../../web-component-tester/browser.js"></script>
 
18
  <script src="../../test-fixture/test-fixture-mocha.js"></script>
 
19
 
 
20
  <link rel="import" href="../../test-fixture/test-fixture.html">
 
21
  <link rel="import" href="../../polymer/polymer.html">
 
22
  <link rel="import" href="../paper-toolbar.html">
 
23
 
 
24
</head>
 
25
<body>
 
26
 
 
27
  <test-fixture id="basic">
 
28
    <template>
 
29
      <paper-toolbar></paper-toolbar>
 
30
    </template>
 
31
  </test-fixture>
 
32
 
 
33
  <test-fixture id="title">
 
34
    <template>
 
35
      <paper-toolbar>
 
36
        <span class="title">Title</span>
 
37
      </paper-toolbar>
 
38
    </template>
 
39
  </test-fixture>
 
40
 
 
41
  <test-fixture id="title-with-id">
 
42
    <template>
 
43
      <paper-toolbar>
 
44
        <span class="title" id="title">Title</span>
 
45
      </paper-toolbar>
 
46
    </template>
 
47
  </test-fixture>
 
48
 
 
49
  <test-fixture id="multiple-titles">
 
50
    <template>
 
51
      <paper-toolbar>
 
52
        <span class="title">Title 1</span>
 
53
        <span class="title">Title 2</span>
 
54
      </paper-toolbar>
 
55
    </template>
 
56
  </test-fixture>
 
57
 
 
58
  <script>
 
59
    'use strict';
 
60
 
 
61
    suite('basic', function() {
 
62
 
 
63
      var toolbar;
 
64
 
 
65
      setup(function() {
 
66
        toolbar = fixture('basic');
 
67
      });
 
68
 
 
69
      test('has expected medium-tall height', function() {
 
70
        var old = toolbar.offsetHeight;
 
71
        toolbar.classList.add('medium-tall');
 
72
        expect(toolbar.offsetHeight).to.be.eql(old * 2);
 
73
      });
 
74
 
 
75
      test('has expected tall height', function() {
 
76
        var old = toolbar.offsetHeight;
 
77
        toolbar.classList.add('tall');
 
78
        expect(toolbar.offsetHeight).to.be.eql(old * 3);
 
79
      });
 
80
 
 
81
      test('distributes nodes to topBar by default', function() {
 
82
        var item = document.createElement('div');
 
83
        Polymer.dom(toolbar).appendChild(item);
 
84
        Polymer.dom.flush();
 
85
 
 
86
        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
 
87
        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.topBar);
 
88
      });
 
89
 
 
90
      test('distributes nodes with "middle" class to middleBar', function() {
 
91
        var item = document.createElement('div');
 
92
        item.classList.add('middle');
 
93
        Polymer.dom(toolbar).appendChild(item);
 
94
        Polymer.dom.flush();
 
95
 
 
96
        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
 
97
        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.middleBar);
 
98
      });
 
99
 
 
100
      test('distributes nodes with "bottom" class to bottombar', function() {
 
101
        var item = document.createElement('div');
 
102
        item.classList.add('bottom');
 
103
        Polymer.dom(toolbar).appendChild(item);
 
104
        Polymer.dom.flush();
 
105
 
 
106
        var insertionPoint = Polymer.dom(item).getDestinationInsertionPoints()[0];
 
107
        expect(Polymer.dom(insertionPoint).parentNode).to.be.eql(toolbar.$.bottomBar);
 
108
      });
 
109
 
 
110
    });
 
111
 
 
112
    suite('a11y', function() {
 
113
 
 
114
      test('has role="toolbar"', function() {
 
115
        var toolbar = fixture('basic');
 
116
        assert.equal(toolbar.getAttribute('role'), 'toolbar', 'has role="toolbar"');
 
117
      });
 
118
 
 
119
      test('children with .title becomes the label', function() {
 
120
        var toolbar = fixture('title');
 
121
        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
 
122
        assert.equal(toolbar.getAttribute('aria-labelledby'), Polymer.dom(toolbar).querySelector('.title').id, 'aria-labelledby has the id of the .title element');
 
123
      });
 
124
 
 
125
      test('existing ids on titles are preserved', function() {
 
126
        var toolbar = fixture('title-with-id');
 
127
        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
 
128
        assert.equal(Polymer.dom(toolbar).querySelector('.title').id, 'title', 'id is preserved');
 
129
      });
 
130
 
 
131
      test('multiple children with .title becomes the label', function() {
 
132
        var toolbar = fixture('multiple-titles');
 
133
        assert.isTrue(toolbar.hasAttribute('aria-labelledby'), 'has aria-labelledby');
 
134
        var ids = [];
 
135
        var titles = Polymer.dom(toolbar).querySelectorAll('.title');
 
136
        for (var title, index = 0; title = titles[index]; index++) {
 
137
          ids.push(title.id);
 
138
        }
 
139
        assert.equal(toolbar.getAttribute('aria-labelledby'), ids.join(' '), 'aria-labelledby has the id of all .title elements');
 
140
      });
 
141
 
 
142
    });
 
143
 
 
144
  </script>
 
145
 
 
146
</body>
 
147
</html>