← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-ripple/test/paper-ripple.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/paper-ripple/test/paper-ripple.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
<html>
 
12
<head>
 
13
 
 
14
  <meta charset="UTF-8">
 
15
  <title>paper-ripple</title>
 
16
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
 
17
 
 
18
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
19
  <script src="../../web-component-tester/browser.js"></script>
 
20
  <script src="../../iron-test-helpers/mock-interactions.js"></script>
 
21
 
 
22
  <link rel="import" href="../paper-ripple.html">
 
23
 
 
24
  <style>
 
25
    #RippleContainer {
 
26
      display: block;
 
27
      position: relative;
 
28
      width: 100px;
 
29
      height: 50px;
 
30
    }
 
31
  </style>
 
32
</head>
 
33
<body>
 
34
  <test-fixture id="TrivialRipple">
 
35
    <template>
 
36
      <div id="RippleContainer">
 
37
        <paper-ripple></paper-ripple>
 
38
      </div>
 
39
    </template>
 
40
  </test-fixture>
 
41
 
 
42
  <test-fixture id="CenteringRipple">
 
43
    <template>
 
44
      <div id="RippleContainer">
 
45
        <paper-ripple center></paper-ripple>
 
46
      </div>
 
47
    </template>
 
48
  </test-fixture>
 
49
 
 
50
  <test-fixture id="RecenteringRipple">
 
51
    <template>
 
52
      <div id="RippleContainer">
 
53
        <paper-ripple recenters></paper-ripple>
 
54
      </div>
 
55
    </template>
 
56
  </test-fixture>
 
57
 
 
58
  <test-fixture id="NoinkTarget">
 
59
    <template>
 
60
      <div id="RippleContainer">
 
61
        <paper-ripple noink></paper-ripple>
 
62
      </div>
 
63
    </template>
 
64
  </test-fixture>
 
65
 
 
66
  <script>
 
67
    suite('<paper-ripple>', function () {
 
68
      var mouseEvent;
 
69
      var rippleContainer;
 
70
      var ripple;
 
71
 
 
72
      suite('when tapped', function () {
 
73
        setup(function () {
 
74
          rippleContainer = fixture('TrivialRipple');
 
75
          ripple = rippleContainer.firstElementChild;
 
76
        });
 
77
 
 
78
        test('creates a ripple', function () {
 
79
          expect(ripple.ripples.length).to.be.eql(0);
 
80
          MockInteractions.down(ripple);
 
81
          expect(ripple.ripples.length).to.be.eql(1);
 
82
        });
 
83
 
 
84
        test('may create multiple ripples that overlap', function () {
 
85
          expect(ripple.ripples.length).to.be.eql(0);
 
86
 
 
87
          for (var i = 0; i < 3; ++i) {
 
88
            MockInteractions.down(ripple);
 
89
            expect(ripple.ripples.length).to.be.eql(i + 1);
 
90
          }
 
91
        });
 
92
      });
 
93
 
 
94
      suite('when holdDown is togggled', function() {
 
95
        setup(function () {
 
96
          rippleContainer = fixture('TrivialRipple');
 
97
          ripple = rippleContainer.firstElementChild;
 
98
        });
 
99
 
 
100
        test('generates a ripple', function() {
 
101
          ripple.holdDown = true;
 
102
          expect(ripple.ripples.length).to.be.eql(1);
 
103
        });
 
104
 
 
105
        test('generates a ripple when noink', function() {
 
106
          ripple.noink = true;
 
107
          ripple.holdDown = true;
 
108
          expect(ripple.ripples.length).to.be.eql(1);
 
109
 
 
110
        });
 
111
 
 
112
      });
 
113
 
 
114
      suite('when target is noink', function () {
 
115
        setup(function () {
 
116
          rippleContainer = fixture('NoinkTarget');
 
117
          ripple = rippleContainer.firstElementChild;
 
118
        });
 
119
 
 
120
        test('tapping does not create a ripple', function () {
 
121
          expect(ripple.ripples.length).to.be.eql(0);
 
122
          MockInteractions.down(ripple);
 
123
          expect(ripple.ripples.length).to.be.eql(0);
 
124
        });
 
125
 
 
126
        test('ripples can be manually created', function () {
 
127
          expect(ripple.ripples.length).to.be.eql(0);
 
128
          ripple.simulatedRipple()
 
129
          expect(ripple.ripples.length).to.be.eql(1);
 
130
        });
 
131
      });
 
132
 
 
133
 
 
134
 
 
135
      suite('with the `center` attribute set to true', function () {
 
136
        setup(function () {
 
137
          rippleContainer = fixture('CenteringRipple');
 
138
          ripple = rippleContainer.firstElementChild;
 
139
        });
 
140
 
 
141
        test('ripples will center', function (done) {
 
142
          var waveContainerElement;
 
143
          // let's ask the browser what `translate3d(0px, 0px, 0)` will actually look like
 
144
          var div = document.createElement('div');
 
145
          div.style.webkitTransform = 'translate3d(0px, 0px, 0px)';
 
146
          div.style.transform = 'translate3d(0px, 0px, 0)';
 
147
 
 
148
          MockInteractions.down(ripple);
 
149
 
 
150
          waveContainerElement = ripple.ripples[0].waveContainer;
 
151
 
 
152
          MockInteractions.up(ripple);
 
153
 
 
154
          window.requestAnimationFrame(function () {
 
155
            var currentTransform = waveContainerElement.style.transform;
 
156
            try {
 
157
              expect(div.style.transform).to.be.ok;
 
158
              expect(currentTransform).to.be.ok;
 
159
              expect(currentTransform).to.be.eql(div.style.transform);
 
160
 
 
161
              done();
 
162
            } catch (e) {
 
163
              done(e);
 
164
            }
 
165
          });
 
166
        });
 
167
      });
 
168
 
 
169
      suite('with the `recenters` attribute set to true', function () {
 
170
        setup(function () {
 
171
          rippleContainer = fixture('RecenteringRipple');
 
172
          ripple = rippleContainer.firstElementChild;
 
173
        });
 
174
        test('ripples will gravitate towards the center', function (done) {
 
175
          var waveContainerElement;
 
176
          var waveTranslateString;
 
177
          MockInteractions.down(ripple, {x: 10, y: 10});
 
178
          waveContainerElement = ripple.ripples[0].waveContainer;
 
179
          waveTranslateString = waveContainerElement.style.transform;
 
180
          MockInteractions.up(ripple);
 
181
          window.requestAnimationFrame(function () {
 
182
            try {
 
183
              expect(waveTranslateString).to.be.ok;
 
184
              expect(waveContainerElement.style.transform).to.be.ok;
 
185
              expect(waveContainerElement.style.transform).to.not.be.eql(waveTranslateString);
 
186
              done();
 
187
            } catch (e) {
 
188
              done(e);
 
189
            }
 
190
          });
 
191
        });
 
192
      });
 
193
 
 
194
    });
 
195
  </script>
 
196
 
 
197
</body>
 
198
</html>