• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!doctype html>
2<!--
3Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10<html>
11<head>
12  <meta charset="UTF-8">
13  <title>paper-autogrow-textarea tests</title>
14  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
15
16  <script src="../../webcomponentsjs/webcomponents.js"></script>
17  <script src="../../web-component-tester/browser.js"></script>
18
19  <link href="../paper-autogrow-textarea.html" rel="import">
20
21  <style>
22    paper-autogrow-textarea {
23      background-color: black;
24    }
25
26    textarea {
27      background-color: yellow;
28    }
29  </style>
30
31</head>
32<body>
33
34  <paper-autogrow-textarea id="autogrow1">
35    <textarea id="textarea1"></textarea>
36  </paper-autogrow-textarea>
37
38  <paper-autogrow-textarea id="autogrow2" rows="2" maxRows="4">
39    <textarea id="textarea2"></textarea>
40  </paper-autogrow-textarea>
41
42  <script>
43
44    var a1 = document.getElementById('autogrow1');
45    var t1 = document.getElementById('textarea1');
46
47    function dispatchInputEvent(target) {
48      var e = new Event('input', {
49        bubbles: true
50      });
51      target.dispatchEvent(e);
52    };
53
54    function between(val, val1, val2) {
55      return assert.ok(val > val1 && val < val2);
56    }
57
58    suite('basic', function() {
59
60      teardown(function(done) {
61        t1.value = '';
62        dispatchInputEvent(t1);
63        a1.rows = 1;
64        a1.maxRows = 0;
65
66        flush(function() {
67          done();
68        });
69      });
70
71      test('empty input has height', function() {
72        assert.ok(a1.offsetHeight > 0);
73      });
74
75      test('accepts number input', function() {
76        t1.value = 1;
77        dispatchInputEvent(t1);
78        // make sure we didn't crash
79      });
80
81      test('grows with more rows of input', function(done) {
82        t1.value = 'foo\nbar';
83        dispatchInputEvent(t1);
84
85        var h1 = a1.offsetHeight;
86
87        t1.value = 'foo\nbar\nbaz';
88        dispatchInputEvent(t1);
89
90        flush(function() {
91          var h2 = a1.offsetHeight;
92          assert.ok(h2 > h1);
93          assert.deepEqual(a1.getBoundingClientRect(), t1.getBoundingClientRect());
94          done();
95        });
96      });
97
98      test('honors the rows attribute', function(done) {
99        var h1 = a1.offsetHeight;
100        a1.rows = 2;
101
102        flush(function() {
103          var h2 = a1.offsetHeight;
104          between(h2, h1, 3 * h1);
105          done();
106        });
107      });
108
109      test('honors the maxRows attribute', function(done) {
110        var h1 = a1.offsetHeight;
111        a1.maxRows = 2;
112
113        t1.value = 'foo\nbar\nbaz\nzot';
114        dispatchInputEvent(t1);
115
116        flush(function() {
117          var h2 = a1.offsetHeight;
118          assert.ok(h2 < 3 * h1);
119          done();
120        });
121      });
122
123      test('mirror text is visibility:hidden', function() {
124        assert.equal(getComputedStyle(a1.$.mirror).visibility, 'hidden');
125      });
126
127      test('grows with a long word', function(done) {
128        var h1 = a1.offsetHeight;
129
130        t1.value = Array(1000).join("P");
131        dispatchInputEvent(t1);
132
133        flush(function() {
134          var h2 = a1.offsetHeight;
135          assert.ok(h2 > h1);
136          assert.deepEqual(a1.getBoundingClientRect(), t1.getBoundingClientRect());
137          done();
138        });
139      });
140
141    });
142
143  </script>
144
145</body>
146</html>
147