diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-input/test/paper-input-container.html')
| -rw-r--r-- | catapult/third_party/polymer/components/paper-input/test/paper-input-container.html | 333 |
1 files changed, 333 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-input/test/paper-input-container.html b/catapult/third_party/polymer/components/paper-input/test/paper-input-container.html new file mode 100644 index 00000000..6af730d2 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-input/test/paper-input-container.html @@ -0,0 +1,333 @@ +<!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> + + <title>paper-input-container tests</title> + + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes"> + + <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="../../iron-input/iron-input.html"> + <link rel="import" href="../paper-input-container.html"> + <link rel="import" href="letters-only.html"> + +</head> +<body> + + <test-fixture id="basic"> + <template> + <paper-input-container> + <label id="l">label</label> + <input id="i"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="prefix"> + <template> + <paper-input-container> + <div prefix>$</div> + <label id="l">label</label> + <input is="iron-input" id="i"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="prefix-has-value"> + <template> + <paper-input-container> + <div prefix>$</div> + <label id="l">label</label> + <input is="iron-input" id="i" value="foo"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="has-value"> + <template> + <paper-input-container> + <label id="l">label</label> + <input id="i" value="value"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="no-float-has-value"> + <template> + <paper-input-container no-label-float> + <label id="l">label</label> + <input id="i" value="value"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="always-float"> + <template> + <paper-input-container always-float-label> + <label id="l">label</label> + <input id="i" value="value"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="auto-validate-numbers"> + <template> + <paper-input-container auto-validate> + <label id="l">label</label> + <input is="iron-input" id="i" pattern="[0-9]*"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="manual-validate-numbers"> + <template> + <paper-input-container> + <label id="l">label</label> + <input is="iron-input" id="i" pattern="[0-9]*"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="required-validate"> + <template> + <paper-input-container> + <label id="l">label</label> + <input is="iron-input" id="i" required> + </paper-input-container> + </template> + </test-fixture> + + <letters-only></letters-only> + + <test-fixture id="auto-validate-validator"> + <template> + <paper-input-container auto-validate> + <label id="l">label</label> + <input is="iron-input" id="i" pattern="[0-9]*" validator="letters-only"> + </paper-input-container> + </template> + </test-fixture> + + <test-fixture id="auto-validate-validator-has-invalid-value"> + <template> + <paper-input-container auto-validate> + <label id="l">label</label> + <input is="iron-input" id="i" validator="letters-only" value="123123"> + </paper-input-container> + </template> + </test-fixture> + + <script> + + function getTransform(node) { + var style = getComputedStyle(node); + return style.transform || style.webkitTransform; + } + + suite('basic', function() { + test('can be created imperatively', function() { + var container = document.createElement('paper-input-container'); + var input = document.createElement('input', 'iron-input'); + input.className = 'paper-input-input'; + input.id = 'input'; + + var label = document.createElement('label'); + label.innerHTML = 'label'; + + Polymer.dom(container).appendChild(label); + Polymer.dom(container).appendChild(input); + + document.body.appendChild(container); + assert.isOk(container); + document.body.removeChild(container); + }); + }); + + suite('label position', function() { + + test('label is visible by default', function() { + var container = fixture('basic'); + assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'visible', 'label has visibility:visible'); + }); + + test('label is floated if value is initialized to not null', function(done) { + var container = fixture('has-value'); + requestAnimationFrame(function() { + assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform'); + done(); + }); + }); + + test('label is invisible if no-label-float and value is initialized to not null', function() { + var container = fixture('no-float-has-value'); + assert.equal(getComputedStyle(container.querySelector('#l')).visibility, 'hidden', 'label has visibility:hidden'); + }); + + test('label is floated if always-float-label is true', function() { + var container = fixture('always-float'); + assert.notEqual(getTransform(container.querySelector('#l')), 'none', 'label has transform'); + }); + + test('label is floated correctly with a prefix', function(done) { + var container = fixture('prefix'); + var label = Polymer.dom(container).querySelector('#l'); + var input = Polymer.dom(container).querySelector('#i'); + + // Label is initially visible. + assert.equal(getComputedStyle(label).visibility, 'visible', 'label has visibility:visible'); + + // After entering text, the label floats, and it is not indented. + input.bindValue = 'foobar'; + requestAnimationFrame(function() { + assert.notEqual(getTransform(label), 'none', 'label has transform'); + assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left); + done(); + }); + }); + + test('label is floated correctly with a prefix and prefilled value', function(done) { + var container = fixture('prefix-has-value'); + var label = Polymer.dom(container).querySelector('#l'); + + // The label floats, and it is not indented. + requestAnimationFrame(function() { + assert.notEqual(getTransform(label), 'none', 'label has transform'); + assert.equal(label.getBoundingClientRect().left, container.getBoundingClientRect().left); + done(); + }); + }); + + }); + + suite('focused styling', function() { + + test('label is colored when input is focused and has value', function(done) { + var container = fixture('has-value'); + var label = Polymer.dom(container).querySelector('#l'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + MockInteractions.focus(input); + requestAnimationFrame(function() { + assert.isTrue(container.focused, 'focused is true'); + assert.isTrue(inputContent.classList.contains('label-is-highlighted'), 'label is highlighted when input has focus'); + done(); + }); + }); + + test('label is not colored when input is focused and has null value', function(done) { + var container = fixture('basic'); + var label = Polymer.dom(container).querySelector('#l'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + MockInteractions.focus(input); + requestAnimationFrame(function() { + assert.isFalse(inputContent.classList.contains('label-is-highlighted'), 'label is not highlighted when input has focus and has null value'); + done(); + }); + }); + + test('underline is colored when input is focused', function(done) { + var container = fixture('basic'); + var input = Polymer.dom(container).querySelector('#i'); + var line = Polymer.dom(container.root).querySelector('.underline'); + assert.isFalse(line.classList.contains('is-highlighted'), 'line is not highlighted when input is not focused'); + MockInteractions.focus(input); + requestAnimationFrame(function() { + assert.isTrue(line.classList.contains('is-highlighted'), 'line is highlighted when input is focused'); + done(); + }); + }); + + test('focused class added to input content', function(done) { + var container = fixture('basic'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + assert.isFalse(inputContent.classList.contains('focused'), 'input content does not have class "focused" when input is not focused'); + MockInteractions.focus(input); + requestAnimationFrame(function() { + assert.isTrue(inputContent.classList.contains('focused'), 'input content has class "focused" when input is focused'); + done(); + }); + }); + + }); + + suite('validation', function() { + + test('styled when the input is set to an invalid value with auto-validate', function() { + var container = fixture('auto-validate-numbers'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + var line = Polymer.dom(container.root).querySelector('.underline'); + + input.bindValue = 'foobar'; + + assert.isTrue(container.invalid, 'invalid is true'); + assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); + assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); + }); + + test('styled when the input is set to an invalid value with auto-validate, with validator', function() { + var container = fixture('auto-validate-validator'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + var line = Polymer.dom(container.root).querySelector('.underline'); + + input.bindValue = '123123'; + + assert.isTrue(container.invalid, 'invalid is true'); + assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); + assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); + }); + + test('styled when the input is set initially to an invalid value with auto-validate, with validator', function() { + var container = fixture('auto-validate-validator-has-invalid-value'); + assert.isTrue(container.invalid, 'invalid is true'); + assert.isTrue(Polymer.dom(container.root).querySelector('.underline').classList.contains('is-invalid'), 'underline has is-invalid class'); + }); + + test('styled when the input is set to an invalid value with manual validation', function() { + var container = fixture('manual-validate-numbers'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + var line = Polymer.dom(container.root).querySelector('.underline'); + + input.bindValue = 'foobar'; + input.validate(); + + assert.isTrue(container.invalid, 'invalid is true'); + assert.isTrue(inputContent.classList.contains('is-invalid'), 'label has invalid styling when input is invalid'); + assert.isTrue(line.classList.contains('is-invalid'), 'underline has invalid styling when input is invalid'); + }); + + test('styled when the input is manually validated and required', function() { + var container = fixture('required-validate'); + var input = Polymer.dom(container).querySelector('#i'); + var inputContent = Polymer.dom(container.root).querySelector('.input-content'); + assert.isFalse(container.invalid, 'invalid is false'); + input.validate(); + assert.isTrue(container.invalid, 'invalid is true'); + assert.isTrue(inputContent.classList.contains('is-invalid'), 'input content has is-invalid class'); + }); + + }); + + </script> + +</body> +</html> |