third_party/polymer/components/paper-input/test/autogrow.html

   1 <!doctype html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject 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</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     });
 128
 129   </script>
 130
 131 </body>
 132 </html>