<!doctype html> <!-- @license Copyright (c) 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as part of the polymer project is also subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt --> <html> <head> <meta charset="UTF-8"> <title>paper-ripple</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <script src="../../web-component-tester/browser.js"></script> <script src="../../test-fixture/test-fixture-mocha.js"></script> <script src="../../iron-test-helpers/mock-interactions.js"></script> <link rel="import" href="../../test-fixture/test-fixture.html"> <link rel="import" href="../paper-ripple.html"> <style> #RippleContainer { display: block; position: relative; width: 100px; height: 50px; } </style> </head> <body> <test-fixture id="TrivialRipple"> <template> <div id="RippleContainer"> <paper-ripple></paper-ripple> </div> </template> </test-fixture> <test-fixture id="CenteringRipple"> <template> <div id="RippleContainer"> <paper-ripple center></paper-ripple> </div> </template> </test-fixture> <test-fixture id="RecenteringRipple"> <template> <div id="RippleContainer"> <paper-ripple recenters></paper-ripple> </div> </template> </test-fixture> <test-fixture id="NoinkTarget"> <template> <div id="RippleContainer"> <paper-ripple noink></paper-ripple> </div> </template> </test-fixture> <script> suite('<paper-ripple>', function () { var mouseEvent; var rippleContainer; var ripple; suite('when tapped', function () { setup(function () { rippleContainer = fixture('TrivialRipple'); ripple = rippleContainer.firstElementChild; }); test('creates a ripple', function () { expect(ripple.ripples.length).to.be.eql(0); MockInteractions.down(ripple); expect(ripple.ripples.length).to.be.eql(1); }); test('may create multiple ripples that overlap', function () { expect(ripple.ripples.length).to.be.eql(0); for (var i = 0; i < 3; ++i) { MockInteractions.down(ripple); expect(ripple.ripples.length).to.be.eql(i + 1); } }); }); suite('when holdDown is togggled', function() { setup(function () { rippleContainer = fixture('TrivialRipple'); ripple = rippleContainer.firstElementChild; }); test('generates a ripple', function() { ripple.holdDown = true; expect(ripple.ripples.length).to.be.eql(1); }); test('generates a ripple when noink', function() { ripple.noink = true; ripple.holdDown = true; expect(ripple.ripples.length).to.be.eql(1); }); }); suite('when target is noink', function () { setup(function () { rippleContainer = fixture('NoinkTarget'); ripple = rippleContainer.firstElementChild; }); test('tapping does not create a ripple', function () { expect(ripple.keyEventTarget).to.be.equal(ripple); expect(ripple.ripples.length).to.be.eql(0); MockInteractions.down(ripple); expect(ripple.ripples.length).to.be.eql(0); }); test('ripples can be manually created', function () { expect(ripple.ripples.length).to.be.eql(0); ripple.simulatedRipple() expect(ripple.ripples.length).to.be.eql(1); }); }); suite('with the `center` attribute set to true', function () { setup(function () { rippleContainer = fixture('CenteringRipple'); ripple = rippleContainer.firstElementChild; }); test('ripples will center', function (done) { var waveContainerElement; // let's ask the browser what `translate3d(0px, 0px, 0)` will actually look like var div = document.createElement('div'); div.style.webkitTransform = 'translate3d(0px, 0px, 0px)'; div.style.transform = 'translate3d(0px, 0px, 0)'; MockInteractions.down(ripple); waveContainerElement = ripple.ripples[0].waveContainer; MockInteractions.up(ripple); window.requestAnimationFrame(function () { var currentTransform = waveContainerElement.style.transform; try { expect(div.style.transform).to.be.ok; expect(currentTransform).to.be.ok; expect(currentTransform).to.be.eql(div.style.transform); done(); } catch (e) { done(e); } }); }); }); suite('with the `recenters` attribute set to true', function () { setup(function () { rippleContainer = fixture('RecenteringRipple'); ripple = rippleContainer.firstElementChild; }); test('ripples will gravitate towards the center', function (done) { var waveContainerElement; var waveTranslateString; MockInteractions.down(ripple, {x: 10, y: 10}); waveContainerElement = ripple.ripples[0].waveContainer; waveTranslateString = waveContainerElement.style.transform; MockInteractions.up(ripple); window.requestAnimationFrame(function () { try { expect(waveTranslateString).to.be.ok; expect(waveContainerElement.style.transform).to.be.ok; expect(waveContainerElement.style.transform).to.not.be.eql(waveTranslateString); done(); } catch (e) { done(e); } }); }); }); }); </script> </body> </html>