RubyGems - polymer-gold-rails - Versions diffs - 1.0.0.pre.rc.1 - Mend

polymer-gold-rails 1.0.0.pre.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (202) hide show

data/app/assets/components/gold-phone-input/README.md ADDED Viewed

@@ -0,0 +1,13 @@
+# gold-phone-input
+`gold-phone-input` is a Material Design field for entering and formatting a
+phone number.
+Example:
+```html
+<gold-phone-input></gold-phone-input>
+<gold-phone-input country-code="33" phone-number-pattern="X-XX-XX-XX-XX">
+</gold-phone-input>
+```

data/app/assets/components/gold-phone-input/bower.json ADDED Viewed

@@ -0,0 +1,39 @@
+{
+  "name": "gold-phone-input",
+  "version": "1.0.2",
+  "description": "A validating input for a phone number",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "gold",
+    "input"
+  ],
+  "main": [
+    "gold-phone-input.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/gold-phone-input.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/gold-phone-input",
+  "ignore": [],
+  "dependencies": {
+    "iron-input": "PolymerElements/iron-input#^1.0.0",
+    "iron-form-element-behavior": "PolymerElements/iron-form-element-behavior#^1.0.0",
+    "paper-input": "PolymerElements/paper-input#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0",
+    "polymer": "Polymer/polymer#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "*",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}

data/app/assets/components/gold-phone-input/demo/index.html ADDED Viewed

@@ -0,0 +1,53 @@
+<!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">
+  <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">
+  <title>gold-phone-input demo</title>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../gold-phone-input.html">
+  <link rel="stylesheet" href="../../paper-styles/paper-styles.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+</head>
+<body>
+  <div class="vertical-section-container centered">
+    <h4>Standard</h4>
+    <div class="vertical-section">
+      <gold-phone-input></gold-phone-input>
+      <gold-phone-input auto-validate label="Auto-validating"></gold-phone-input>
+      <gold-phone-input
+          label="France phone number"
+          country-code="33"
+          phone-number-pattern="X-XX-XX-XX-XX"
+          auto-validate
+          required>
+      </gold-phone-input>
+    </div>
+    <h4>Pre-validated</h4>
+    <div class="vertical-section">
+      <gold-phone-input country-code="44" auto-validate required></gold-phone-input>
+      <gold-phone-input label="Valid US number" value="415-111-1111" auto-validate></gold-phone-input>
+      <gold-phone-input label="Invalid US number" value="415-111-111" auto-validate></gold-phone-input>
+    </div>
+    <h4>Custom error message</h4>
+    <div class="vertical-section">
+      <gold-phone-input auto-validate label="Cats only" error-message="needs more cats" required></gold-phone-input>
+    </div>
+  </div>
+</body>

data/app/assets/components/gold-phone-input/gold-phone-input.html ADDED Viewed

@@ -0,0 +1,197 @@
+<!--
+@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
+-->
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-input/paper-input-behavior.html">
+<link rel="import" href="../paper-input/paper-input-container.html">
+<link rel="import" href="../paper-input/paper-input-error.html">
+<link rel="import" href="../iron-input/iron-input.html">
+<link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
+<!--
+`<gold-phone-input>` is a single-line text field with Material Design styling
+for entering a phone number.
+    <gold-phone-input></gold-phone-input>
+It may include an optional label, which by default is "Phone number".
+    <gold-phone-input label="call this"></gold-phone-input>
+### Validation
+By default, the phone number is considered to be a US phone number, and
+will be validated according to the pattern `XXX-XXX-XXXX`, where `X` is a
+digit, and `-` is the separating dash. If you want to customize the input
+for a different area code or number pattern, use the `country-code` and
+`phone-number-pattern` attributes
+    <gold-phone-input
+        country-code="33"
+        phone-number-pattern="X-XX-XX-XX-XX">
+    </gold-phone-input>
+The input can be automatically validated as the user is typing by using
+the `auto-validate` and `required` attributes. For manual validation, the
+element also has a `validate()` method, which returns the validity of the
+input as well sets any appropriate error messages and styles.
+See `Polymer.PaperInputBehavior` for more API docs.
+### Styling
+See `Polymer.PaperInputContainer` for a list of custom properties used to
+style this element.
+@group Gold Elements
+@hero hero.svg
+@demo demo/index.html
+@class gold-phone-input
+-->
+<dom-module id="gold-phone-input">
+  <style>
+  :host {
+    display: block;
+  }
+  /* TODO: This should be a dropdown */
+  span {
+    @apply(--paper-font-subhead);
+    @apply(--paper-input-container-input);
+    width: 40px;
+  }
+  </style>
+  <template>
+    <paper-input-container id="container" auto-validate="[[autoValidate]]">
+      <label style="left:40px;" hidden$="[[!label]]">[[label]]</label>
+      <div class="horizontal layout">
+        <span>+<span>[[countryCode]]</span></span>
+        <input is="iron-input" id="input" class="flex"
+          aria-labelledby$="[[_ariaLabelledBy]]"
+          aria-describedby$="[[_ariaDescribedBy]]"
+          required$="[[required]]"
+          bind-value="{{value}}"
+          name$="[[name]]"
+          allowed-pattern="[0-9]"
+          autocomplete="tel"
+          type="tel"
+          prevent-invalid-input>
+      </div>
+      <template is="dom-if" if="[[errorMessage]]">
+        <paper-input-error id="error">[[errorMessage]]</paper-input-error>
+      </template>
+    </paper-input-container>
+  </template>
+</dom-module>
+<script>
+(function() {
+  Polymer({
+    is: 'gold-phone-input',
+    behaviors: [
+      Polymer.PaperInputBehavior,
+      Polymer.IronFormElementBehavior
+    ],
+    properties: {
+      /**
+       * The label for this input.
+       */
+      label: {
+        type: String,
+        value: 'Phone number'
+      },
+      /*
+       * The country code that should be recognized and parsed.
+       */
+      countryCode: {
+        type: String,
+        value: '1'
+      },
+      /*
+       * The format of a valid phone number, including formatting but excluding
+       * the country code. Use 'X' to denote the digits separated by dashes.
+       */
+      phoneNumberPattern: {
+        type: String,
+        value: 'XXX-XXX-XXXX',
+        observer: '_phoneNumberPatternChanged'
+      }
+    },
+    observers: [
+      '_computeValue(value)'
+    ],
+    _phoneNumberPatternChanged: function() {
+      // Transform the pattern into a regex the iron-input understands.
+      var regex = '';
+      regex = this.phoneNumberPattern.replace(/\s/g, '\\s');
+      regex = regex.replace(/X/gi, '\\d');
+      regex = regex.replace(/\+/g, '\\+');
+      this.$.input.pattern = regex;
+      if (this.autoValidate) {
+        this.$.container.invalid = !this.$.input.validate();
+      }
+    },
+    _computeValue: function(value) {
+      var start = this.$.input.selectionStart;
+      var previousCharADash = this.value.charAt(start - 1) == '-';
+      // Remove any already-applied formatting.
+      value = value.replace(/-/g, '');
+      var shouldFormat = value.length <= this.phoneNumberPattern.replace(/-/g, '').length;
+      var formattedValue = '';
+      // Fill in the dashes according to the specified pattern.
+      var currentDashIndex = 0;
+      var totalDashesAdded = 0;
+      for (var i = 0; i < value.length; i++) {
+        currentDashIndex = this.phoneNumberPattern.indexOf('-', currentDashIndex);
+        // Since we remove any formatting first, we need to account added dashes
+        // when counting the position of new dashes in the pattern.
+        if (shouldFormat && i == (currentDashIndex - totalDashesAdded)) {
+          formattedValue += '-';
+          currentDashIndex++;
+          totalDashesAdded++;
+        }
+        formattedValue += value[i];
+      }
+      this.value = formattedValue.trim();
+      // If the character right before the selection is a newly inserted
+      // dash, we need to advance the selection to maintain the caret position.
+      if (!previousCharADash && this.value.charAt(start - 1) == '-')
+        this.$.input.selectionStart++;
+    }
+  })
+})();
+</script>

data/app/assets/components/gold-phone-input/hero.svg ADDED Viewed

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<rect x="43" y="68" width="33" height="2"/>
+	<rect x="89" y="68" width="33" height="2"/>
+	<rect x="135" y="68" width="42" height="2"/>
+	<g>
+		<path d="M51.9,61h1.3v1h-1.3v2.1h-1.3V62h-4.2v-0.7l4.1-6.4h1.3V61z M47.9,61h2.8v-4.4l-0.2,0.3L47.9,61z"/>
+		<path d="M55.2,63h1.9v-6.6l-2,0.7V56l3.2-1.2h0.1V63h1.8v1.1h-5V63z"/>
+		<path d="M63.1,59.5l0.5-4.6h4.8V56h-3.7l-0.3,2.4c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.9-0.1c0.4,0,0.8,0.1,1.2,0.2
+			c0.3,0.1,0.6,0.4,0.9,0.6c0.2,0.3,0.4,0.6,0.5,1s0.2,0.8,0.2,1.3c0,0.4-0.1,0.9-0.2,1.2c-0.1,0.4-0.3,0.7-0.5,1
+			c-0.2,0.3-0.5,0.5-0.9,0.6s-0.8,0.2-1.3,0.2c-0.4,0-0.7-0.1-1.1-0.2c-0.3-0.1-0.6-0.3-0.9-0.5s-0.5-0.5-0.6-0.8s-0.3-0.7-0.3-1.1
+			H64c0.1,0.5,0.3,0.9,0.6,1.2c0.3,0.3,0.7,0.4,1.2,0.4c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.6
+			c0.1-0.3,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.2-0.5-0.3-0.6s-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.8-0.2
+			c-0.2,0-0.4,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.2-0.3,0.2L63.1,59.5z"/>
+		<path d="M83.5,60.6h-4.9v-1h4.9V60.6z"/>
+		<path d="M94.3,59.5l0.5-4.6h4.8V56h-3.7l-0.3,2.4c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.9-0.1c0.4,0,0.8,0.1,1.2,0.2
+			c0.3,0.1,0.6,0.4,0.9,0.6c0.2,0.3,0.4,0.6,0.5,1s0.2,0.8,0.2,1.3c0,0.4-0.1,0.9-0.2,1.2c-0.1,0.4-0.3,0.7-0.5,1
+			c-0.2,0.3-0.5,0.5-0.9,0.6s-0.8,0.2-1.3,0.2c-0.4,0-0.7-0.1-1.1-0.2c-0.3-0.1-0.6-0.3-0.9-0.5s-0.5-0.5-0.6-0.8S94,62.1,94,61.7
+			h1.2c0.1,0.5,0.3,0.9,0.6,1.2c0.3,0.3,0.7,0.4,1.2,0.4c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.6
+			c0.1-0.3,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.2-0.5-0.3-0.6s-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.8-0.2
+			c-0.2,0-0.4,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.2-0.3,0.2L94.3,59.5z"/>
+		<path d="M102.1,59.5l0.5-4.6h4.8V56h-3.7l-0.3,2.4c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.9-0.1c0.4,0,0.8,0.1,1.2,0.2
+			c0.3,0.1,0.6,0.4,0.9,0.6c0.2,0.3,0.4,0.6,0.5,1s0.2,0.8,0.2,1.3c0,0.4-0.1,0.9-0.2,1.2c-0.1,0.4-0.3,0.7-0.5,1
+			c-0.2,0.3-0.5,0.5-0.9,0.6s-0.8,0.2-1.3,0.2c-0.4,0-0.7-0.1-1.1-0.2c-0.3-0.1-0.6-0.3-0.9-0.5s-0.5-0.5-0.6-0.8s-0.3-0.7-0.3-1.1
+			h1.2c0.1,0.5,0.3,0.9,0.6,1.2c0.3,0.3,0.7,0.4,1.2,0.4c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.6
+			c0.1-0.3,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.2-0.5-0.3-0.6s-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.8-0.2
+			c-0.2,0-0.4,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.2-0.3,0.2L102.1,59.5z"/>
+		<path d="M109.9,59.5l0.5-4.6h4.8V56h-3.7l-0.3,2.4c0.2-0.1,0.4-0.2,0.6-0.3s0.5-0.1,0.9-0.1c0.4,0,0.8,0.1,1.2,0.2
+			c0.3,0.1,0.6,0.4,0.9,0.6c0.2,0.3,0.4,0.6,0.5,1s0.2,0.8,0.2,1.3c0,0.4-0.1,0.9-0.2,1.2c-0.1,0.4-0.3,0.7-0.5,1
+			c-0.2,0.3-0.5,0.5-0.9,0.6s-0.8,0.2-1.3,0.2c-0.4,0-0.7-0.1-1.1-0.2c-0.3-0.1-0.6-0.3-0.9-0.5s-0.5-0.5-0.6-0.8s-0.3-0.7-0.3-1.1
+			h1.2c0.1,0.5,0.3,0.9,0.6,1.2c0.3,0.3,0.7,0.4,1.2,0.4c0.3,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4s0.2-0.4,0.3-0.6
+			c0.1-0.3,0.1-0.5,0.1-0.8c0-0.3,0-0.5-0.1-0.8c-0.1-0.2-0.2-0.5-0.3-0.6s-0.3-0.3-0.6-0.4c-0.2-0.1-0.5-0.2-0.8-0.2
+			c-0.2,0-0.4,0-0.5,0c-0.1,0-0.3,0.1-0.4,0.1c-0.1,0-0.2,0.1-0.3,0.2s-0.2,0.2-0.3,0.2L109.9,59.5z"/>
+		<path d="M130.3,60.6h-4.9v-1h4.9V60.6z"/>
+		<path d="M141,63h1.9v-6.6l-2,0.7V56l3.2-1.2h0.1V63h1.8v1.1h-5V63z"/>
+		<path d="M154.2,64.1h-6.1v-0.9l3-3.4c0.3-0.3,0.5-0.6,0.7-0.8c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.2-0.4,0.2-0.5
+			c0-0.2,0.1-0.3,0.1-0.5c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.3-0.5-0.3s-0.4-0.1-0.6-0.1
+			c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.4-0.3,0.6c-0.1,0.2-0.1,0.5-0.1,0.8H148c0-0.4,0.1-0.8,0.2-1.1
+			s0.3-0.6,0.6-0.9c0.3-0.3,0.6-0.5,1-0.6s0.8-0.2,1.3-0.2c0.4,0,0.8,0.1,1.1,0.2c0.3,0.1,0.6,0.3,0.9,0.5c0.2,0.2,0.4,0.5,0.5,0.8
+			s0.2,0.7,0.2,1c0,0.3,0,0.5-0.1,0.8s-0.2,0.5-0.4,0.8c-0.2,0.3-0.3,0.5-0.5,0.8s-0.4,0.5-0.7,0.8l-2.5,2.7h4.6V64.1z"/>
+		<path d="M156.6,63h1.9v-6.6l-2,0.7V56l3.2-1.2h0.1V63h1.8v1.1h-5V63z"/>
+		<path d="M169.8,64.1h-6.1v-0.9l3-3.4c0.3-0.3,0.5-0.6,0.7-0.8c0.2-0.2,0.3-0.4,0.4-0.6c0.1-0.2,0.2-0.4,0.2-0.5
+			c0-0.2,0.1-0.3,0.1-0.5c0-0.2,0-0.4-0.1-0.6c-0.1-0.2-0.2-0.4-0.3-0.5c-0.1-0.1-0.3-0.3-0.5-0.3s-0.4-0.1-0.6-0.1
+			c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.2,0.2-0.3,0.4-0.3,0.6c-0.1,0.2-0.1,0.5-0.1,0.8h-1.3c0-0.4,0.1-0.8,0.2-1.1
+			s0.3-0.6,0.6-0.9c0.3-0.3,0.6-0.5,1-0.6s0.8-0.2,1.3-0.2c0.4,0,0.8,0.1,1.1,0.2c0.3,0.1,0.6,0.3,0.9,0.5c0.2,0.2,0.4,0.5,0.5,0.8
+			s0.2,0.7,0.2,1c0,0.3,0,0.5-0.1,0.8s-0.2,0.5-0.4,0.8c-0.2,0.3-0.3,0.5-0.5,0.8s-0.4,0.5-0.7,0.8l-2.5,2.7h4.6V64.1z"/>
+	</g>
+	<path d="M188,78H37V44h151V78z M39,76h147V46H39V76z"/>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

data/app/assets/components/gold-phone-input/index.html ADDED Viewed

@@ -0,0 +1,28 @@
+<!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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>gold-phone-input</title>
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
+</html>

data/app/assets/components/gold-phone-input/test/basic.html ADDED Viewed

@@ -0,0 +1,117 @@
+<!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>gold-phone-input 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="../../test-fixture/test-fixture-mocha.js"></script>
+  <script src="../../iron-test-helpers/test-helpers.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../gold-phone-input.html">
+</head>
+<body>
+  <test-fixture id="basic">
+    <template>
+      <gold-phone-input></gold-phone-input>
+    </template>
+  </test-fixture>
+  <test-fixture id="required">
+    <template>
+      <gold-phone-input auto-validate required error-message="error"></gold-phone-input>
+    </template>
+  </test-fixture>
+  <script>
+    suite('basic', function() {
+      test('input is spaced out correctly', function() {
+        var input = fixture('basic');
+        input.value='1231112222';
+        assert.equal(input.value, '123-111-2222');
+      });
+      test('invalid input is not ok', function() {
+        var input = fixture('required');
+        input.value='1234';
+        forceXIfStamp(input);
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        assert.ok(container, 'paper-input-container exists');
+        assert.isTrue(container.invalid);
+      });
+      test('valid input is ok', function() {
+        var input = fixture('required');
+        input.value='1231112222';
+        forceXIfStamp(input);
+        var container = Polymer.dom(input.root).querySelector('paper-input-container');
+        assert.ok(container, 'paper-input-container exists');
+        assert.isFalse(container.invalid);
+      });
+      test('empty required input shows error', function() {
+        var input = fixture('required');
+        forceXIfStamp(input);
+        var error = Polymer.dom(input.root).querySelector('paper-input-error');
+        assert.ok(error, 'paper-input-error exists');
+        assert.notEqual(getComputedStyle(error).display, 'none', 'error is not display:none');
+      });
+      // TODO: re-enable when PolymerElements/iron-input/issues/24 is fixed.
+      // test('caret position is preserved', function() {
+      //   var input = fixture('required');
+      //   var ironInput = input.querySelector('input[is="iron-input"]');
+      //   input.value='111-111-1';
+      //   ironInput.selectionStart = (2,2);
+      //   input.value='112-111-11';
+      //
+      //   assert.equal(ironInput.selectionStart, 2, 'selectionStart is preserved');
+      //   assert.equal(ironInput.selectionEnd, 2, 'selectionEnd is preserved');
+      // });
+      suite('a11y', function() {
+        test('has aria-labelledby', function() {
+          var input = fixture('basic');
+          assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+          assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+        });
+        test('required and error has aria-labelledby', function() {
+          var input = fixture('required');
+          assert.isTrue(input.inputElement.hasAttribute('aria-labelledby'))
+          assert.equal(input.inputElement.getAttribute('aria-labelledby'), Polymer.dom(input.root).querySelector('label').id, 'aria-labelledby points to the label');
+        });
+      });
+    });
+  </script>
+</body>
+</html>