third_party/polymer/components/paper-input/test/decorator.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-input-decorator 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   <script src="../../polymer-gestures/test/js/fake.js"></script>
  19
  20   <link href="../../core-input/core-input.html" rel="import">
  21
  22   <link href="../paper-input-decorator.html" rel="import">
  23   <link href="../paper-autogrow-textarea.html" rel="import">
  24
  25   <style>
  26     paper-input-decorator {
  27       width: 400px;
  28     }
  29   </style>
  30
  31 </head>
  32 <body>
  33
  34   <paper-input-decorator id="decorator1" label="input">
  35     <input id="input1" is="core-input">
  36   </paper-input-decorator>
  37
  38   <br>
  39
  40   <paper-input-decorator id="decorator2" label="input">
  41   </paper-input-decorator>
  42
  43   <br>
  44
  45   <paper-input-decorator id="decorator3" label="input" floatingLabel>
  46     <input id="input3" is="core-input">
  47   </paper-input-decorator>
  48
  49   <paper-input-decorator id="decorator4" label="input" floatingLabel isInvalid error="error message">
  50     <input id="input4" is="core-input" value="something">
  51   </paper-input-decorator>
  52
  53   <br>
  54
  55   <paper-input-decorator id="decorator5" label="input" labelVisible="false">
  56     <input>
  57   </paper-input-decorator>
  58
  59   <br>
  60
  61   <script>
  62
  63     var fake = new Fake();
  64
  65     var d1 = document.getElementById('decorator1');
  66     var i1 = document.getElementById('input1');
  67     var d2 = document.getElementById('decorator2');
  68     var d3 = document.getElementById('decorator3');
  69     var i3 = document.getElementById('input3');
  70     var d4 = document.getElementById('decorator4');
  71     var i4 = document.getElementById('input4');
  72     var d5 = document.getElementById('decorator5');
  73
  74     function reset(d, i) {
  75       d.labelVisible = null;
  76       i.value = null;
  77       d.updateLabelVisibility(i.value);
  78     }
  79
  80     suite('basic', function() {
  81
  82       teardown(function() {
  83         reset(d1, i1);
  84         reset(d3, i3);
  85       });
  86
  87       test('label is invisible if value is not null', function() {
  88         assert.ok(d1._labelVisible);
  89         i1.value = 'foobar';
  90         d1.updateLabelVisibility(i1.value);
  91         assert.ok(!d1._labelVisible);
  92       });
  93
  94       test('label is invisible if floating label and focused', function(done) {
  95         assert.ok(d3._labelVisible);
  96         d3.focusAction();
  97         flush(function() {
  98           assert.ok(!d3._labelVisible);
  99           done();
 100         });
 101       });
 102
 103       test('label is invisible if value = 0', function() {
 104         assert.ok(d1._labelVisible);
 105         i1.value = 0;
 106         d1.updateLabelVisibility(i1.value);
 107         assert.ok(!d1._labelVisible);
 108       });
 109
 110       test('labelVisible overrides label visibility', function() {
 111         d1.labelVisible = false;
 112         assert.ok(!i1.value);
 113         assert.ok(!d1._labelVisible);
 114       });
 115
 116       test('labelVisible works in an attribute', function() {
 117         assert.ok(!d5._labelVisible);
 118       });
 119
 120       test('can create inputs lazily', function() {
 121         var input = document.createElement('input');
 122         input.value = 'foobar';
 123         d2.appendChild(input);
 124         assert.ok(!d2._labelVisible);
 125       });
 126
 127       test('tapping on floating label focuses input', function(done) {
 128         i3.value = 'foobar';
 129         flush(function() {
 130           assert.ok(!d3._labelVisible);
 131           fake.downOnNode(d1.shadowRoot.querySelector('.floated-label'));
 132           flush(function() {
 133             assert.strictEqual(window.ShadowDOMPolyfill ? wrap(document.activeElement) : document.activeElement, i1);
 134             done();
 135           })
 136         });
 137       });
 138
 139       test('floating label and the error message are the same color', function() {
 140         var s1 = getComputedStyle(d4.$.floatedLabelText);
 141         var s2 = getComputedStyle(d4.shadowRoot.querySelector('.error-text'));
 142         assert.strictEqual(s1.color, s2.color);
 143       });
 144
 145     });
 146
 147   </script>
 148
 149 </body>
 150 </html>