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 <test-fixture id="NoRipple"> 67 <template> 68 <div id="RippleContainer"> 69 </div> 70 </template> 71 </test-fixture> 72 73 <script> 74 suite('<paper-ripple>', function () { 75 var mouseEvent; 76 var rippleContainer; 77 var ripple; 78 79 suite('when tapped', function () { 80 setup(function () { 81 rippleContainer = fixture('TrivialRipple'); 82 ripple = rippleContainer.firstElementChild; 83 }); 84 85 test('creates a ripple', function () { 86 expect(ripple.ripples.length).to.be.eql(0); 87 MockInteractions.down(ripple); 88 expect(ripple.ripples.length).to.be.eql(1); 89 }); 90 91 test('may create multiple ripples that overlap', function () { 92 expect(ripple.ripples.length).to.be.eql(0); 93 94 for (var i = 0; i < 3; ++i) { 95 MockInteractions.down(ripple); 96 expect(ripple.ripples.length).to.be.eql(i + 1); 97 } 98 }); 99 }); 100 101 suite('when holdDown is togggled', function() { 102 setup(function () { 103 rippleContainer = fixture('TrivialRipple'); 104 ripple = rippleContainer.firstElementChild; 105 }); 106 107 test('generates a ripple', function() { 108 ripple.holdDown = true; 109 expect(ripple.ripples.length).to.be.eql(1); 110 }); 111 112 test('generates a ripple when noink', function() { 113 ripple.noink = true; 114 ripple.holdDown = true; 115 expect(ripple.ripples.length).to.be.eql(1); 116 117 }); 118 119 }); 120 121 suite('when target is noink', function () { 122 setup(function () { 123 rippleContainer = fixture('NoinkTarget'); 124 ripple = rippleContainer.firstElementChild; 125 }); 126 127 test('tapping does not create a ripple', function () { 128 expect(ripple.ripples.length).to.be.eql(0); 129 MockInteractions.down(ripple); 130 expect(ripple.ripples.length).to.be.eql(0); 131 }); 132 133 test('ripples can be manually created', function () { 134 expect(ripple.ripples.length).to.be.eql(0); 135 ripple.simulatedRipple() 136 expect(ripple.ripples.length).to.be.eql(1); 137 }); 138 }); 139 140 suite('with the `center` attribute set to true', function () { 141 setup(function () { 142 rippleContainer = fixture('CenteringRipple'); 143 ripple = rippleContainer.firstElementChild; 144 }); 145 146 test('ripples will center', function (done) { 147 var waveContainerElement; 148 // let's ask the browser what `translate3d(0px, 0px, 0)` will actually look like 149 var div = document.createElement('div'); 150 div.style.webkitTransform = 'translate3d(0px, 0px, 0px)'; 151 div.style.transform = 'translate3d(0px, 0px, 0)'; 152 153 MockInteractions.down(ripple); 154 155 waveContainerElement = ripple.ripples[0].waveContainer; 156 157 MockInteractions.up(ripple); 158 159 window.requestAnimationFrame(function () { 160 var currentTransform = waveContainerElement.style.transform; 161 try { 162 expect(div.style.transform).to.be.ok; 163 expect(currentTransform).to.be.ok; 164 expect(currentTransform).to.be.eql(div.style.transform); 165 166 done(); 167 } catch (e) { 168 done(e); 169 } 170 }); 171 }); 172 }); 173 174 suite('with the `recenters` attribute set to true', function () { 175 setup(function () { 176 rippleContainer = fixture('RecenteringRipple'); 177 ripple = rippleContainer.firstElementChild; 178 }); 179 test('ripples will gravitate towards the center', function (done) { 180 var waveContainerElement; 181 var waveTranslateString; 182 MockInteractions.down(ripple, {x: 10, y: 10}); 183 waveContainerElement = ripple.ripples[0].waveContainer; 184 waveTranslateString = waveContainerElement.style.transform; 185 MockInteractions.up(ripple); 186 window.requestAnimationFrame(function () { 187 try { 188 expect(waveTranslateString).to.be.ok; 189 expect(waveContainerElement.style.transform).to.be.ok; 190 expect(waveContainerElement.style.transform).to.not.be.eql(waveTranslateString); 191 done(); 192 } catch (e) { 193 done(e); 194 } 195 }); 196 }); 197 }); 198 199 suite('remove a paper ripple', function () { 200 setup(function () { 201 rippleContainer = fixture('NoRipple'); 202 }); 203 test('add and remove a paper-ripple', function (done) { 204 var ripple = document.createElement('paper-ripple'); 205 ripple.addEventListener('transitionend', function() { 206 expect(ripple.parentNode).to.be.ok; 207 Polymer.dom(rippleContainer).removeChild(ripple); 208 done(); 209 }); 210 Polymer.dom(rippleContainer).appendChild(ripple); 211 ripple.downAction(); 212 ripple.upAction(); 213 }); 214 test('reuse a paper-ripple', function (done) { 215 var ripple = document.createElement('paper-ripple'); 216 Polymer.dom(rippleContainer).appendChild(ripple); 217 Polymer.dom(rippleContainer).removeChild(ripple); 218 219 ripple.addEventListener('transitionend', function() { 220 expect(ripple.parentNode).to.be.ok; 221 Polymer.dom(document.body).removeChild(ripple); 222 done(); 223 }); 224 Polymer.dom(document.body).appendChild(ripple); 225 ripple.downAction(); 226 ripple.upAction(); 227 }); 228 }); 229 230 suite('avoid double transitionend event', function () { 231 setup(function () { 232 rippleContainer = fixture('NoRipple'); 233 }); 234 test('the transitionend event should only fire once', function (done) { 235 var ripple = document.createElement('paper-ripple'); 236 var transitionedEventCount = 0; 237 ripple.addEventListener('transitionend', function() { 238 ++transitionedEventCount; 239 expect(transitionedEventCount).to.be.eql(1); 240 Polymer.dom(rippleContainer).removeChild(ripple); 241 setTimeout(function() { done(); }); 242 }); 243 Polymer.dom(rippleContainer).appendChild(ripple); 244 ripple.downAction(); 245 ripple.upAction(); 246 }); 247 }); 248 249 }); 250 251 252