bower_components/paper-ripple/test/paper-ripple.html

<!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>
  <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);
            }
          });
        });
      });
    });
  </script>
</body>
</html>