diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-ripple/test/paper-ripple.html')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-ripple/test/paper-ripple.html | 253 |
1 files changed, 253 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-ripple/test/paper-ripple.html b/catapult/third_party/polymer/components/paper-ripple/test/paper-ripple.html new file mode 100644 index 00000000..559f9cd3 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-ripple/test/paper-ripple.html @@ -0,0 +1,253 @@ +<!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="../../iron-test-helpers/mock-interactions.js"></script> + + <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> + + <test-fixture id="NoRipple"> + <template> + <div id="RippleContainer"> + </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.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); + } + }); + }); + }); + + suite('remove a paper ripple', function () { + setup(function () { + rippleContainer = fixture('NoRipple'); + }); + test('add and remove a paper-ripple', function (done) { + var ripple = document.createElement('paper-ripple'); + ripple.addEventListener('transitionend', function() { + expect(ripple.parentNode).to.be.ok; + Polymer.dom(rippleContainer).removeChild(ripple); + done(); + }); + Polymer.dom(rippleContainer).appendChild(ripple); + ripple.downAction(); + ripple.upAction(); + }); + test('reuse a paper-ripple', function (done) { + var ripple = document.createElement('paper-ripple'); + Polymer.dom(rippleContainer).appendChild(ripple); + Polymer.dom(rippleContainer).removeChild(ripple); + + ripple.addEventListener('transitionend', function() { + expect(ripple.parentNode).to.be.ok; + Polymer.dom(document.body).removeChild(ripple); + done(); + }); + Polymer.dom(document.body).appendChild(ripple); + ripple.downAction(); + ripple.upAction(); + }); + }); + + suite('avoid double transitionend event', function () { + setup(function () { + rippleContainer = fixture('NoRipple'); + }); + test('the transitionend event should only fire once', function (done) { + var ripple = document.createElement('paper-ripple'); + var transitionedEventCount = 0; + ripple.addEventListener('transitionend', function() { + ++transitionedEventCount; + expect(transitionedEventCount).to.be.eql(1); + Polymer.dom(rippleContainer).removeChild(ripple); + setTimeout(function() { done(); }); + }); + Polymer.dom(rippleContainer).appendChild(ripple); + ripple.downAction(); + ripple.upAction(); + }); + }); + + }); + </script> + +</body> +</html> |