diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-radio-group')
13 files changed, 869 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-radio-group/.bower.json b/catapult/third_party/polymer/components/paper-radio-group/.bower.json new file mode 100644 index 00000000..afc443ec --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/.bower.json @@ -0,0 +1,48 @@ +{ + "name": "paper-radio-group", + "version": "1.2.2", + "description": "A group of material design radio buttons", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "radio", + "control" + ], + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-radio-group.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-radio-group", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.7", + "paper-radio-button": "PolymerElements/paper-radio-button#^1.0.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "main": "paper-radio-group.html", + "_release": "1.2.2", + "_resolution": { + "type": "version", + "tag": "v1.2.2", + "commit": "1305bd0c7158a9d4675ccd7c93b75aa47f923678" + }, + "_source": "https://github.com/PolymerElements/paper-radio-group.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/paper-radio-group", + "_direct": true +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-radio-group/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-radio-group/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..c30f8cf1 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-radio-group/CONTRIBUTING.md#filing-issues --> +### Description +<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. --> + +### Expected outcome + +<!-- Example: The page stays the same color. --> + +### Actual outcome + +<!-- Example: The page turns pink. --> + +### Live Demo +<!-- Example: https://jsbin.com/cagaye/edit?html,output --> + +### Steps to reproduce + +<!-- Example +1. Put a `paper-foo` element in the page. +2. Open the page in a web browser. +3. Click the `paper-foo` element. +--> + +### Browsers Affected +<!-- Check all that apply --> +- [ ] Chrome +- [ ] Firefox +- [ ] Safari 9 +- [ ] Safari 8 +- [ ] Safari 7 +- [ ] Edge +- [ ] IE 11 +- [ ] IE 10 diff --git a/catapult/third_party/polymer/components/paper-radio-group/.gitignore b/catapult/third_party/polymer/components/paper-radio-group/.gitignore new file mode 100644 index 00000000..8d4ae253 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/.gitignore @@ -0,0 +1 @@ +bower_components diff --git a/catapult/third_party/polymer/components/paper-radio-group/.travis.yml b/catapult/third_party/polymer/components/paper-radio-group/.travis.yml new file mode 100644 index 00000000..27e783f7 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/.travis.yml @@ -0,0 +1,24 @@ +language: node_js +sudo: required +before_script: + - npm install -g bower polylint web-component-tester + - bower install + - polylint +env: + global: + - secure: >- + MERTTM+t9rMsIccJ4em6ocmNYm1w1r2Zy9qRxhdM1ya0xT2dAlV7UZY7t1jZ4MEdvqtTro1oEzfUr0zgD/mwBJUxLAB0RLRIbYAJEAfngaUUMgbbIgj3yLUZ/bZCvPtfhDPA1W/VsyldhUGCxojzgJthWgAoqWRj6jFX6X+QeWw= + - secure: >- + FvMxnNJsGlUg31KGuGjb0PpWHYFlMf9UPFzmLcFQAbc0kiWVoOl5adCfnv3yySf9EAKnolO02zR3K8KcCBQJ0SpWBlQ1pIgEdOxTXtWQRhlKHttKkj5L2X+qYAw4q5z0sy7lvb0VIjIOceabhvTTcnYmaF+OcrrVxd90ZpIckvk= +node_js: '6' +addons: + firefox: latest + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +script: + - xvfb-run wct + - 'if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then wct -s ''default''; fi' +dist: trusty diff --git a/catapult/third_party/polymer/components/paper-radio-group/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-radio-group/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/CONTRIBUTING.md @@ -0,0 +1,77 @@ +<!-- +This file is autogenerated based on +https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md + +If you edit that file, it will get updated everywhere else. +If you edit this file, your changes will get overridden :) + +You can however override the jsbin link with one that's customized to this +specific element: + +jsbin=https://jsbin.com/cagaye/edit?html,output +--> + +# Polymer Elements +## Guide for Contributors + +Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines: + +### Filing Issues + +**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions: + + 1. **Who will use the feature?** _“As someone filling out a form…”_ + 2. **When will they use the feature?** _“When I enter an invalid value…”_ + 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_ + +**If you are filing an issue to report a bug**, please provide: + + 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug: + + ```markdown + The `paper-foo` element causes the page to turn pink when clicked. + + ## Expected outcome + + The page stays the same color. + + ## Actual outcome + + The page turns pink. + + ## Steps to reproduce + + 1. Put a `paper-foo` element in the page. + 2. Open the page in a web browser. + 3. Click the `paper-foo` element. + ``` + + 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output). + + 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers. + +### Submitting Pull Requests + +**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request. + +When submitting pull requests, please provide: + + 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax: + + ```markdown + (For a single issue) + Fixes #20 + + (For multiple issues) + Fixes #32, fixes #40 + ``` + + 2. **A succinct description of the design** used to fix any related issues. For example: + + ```markdown + This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked. + ``` + + 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered. + +If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that! diff --git a/catapult/third_party/polymer/components/paper-radio-group/README.md b/catapult/third_party/polymer/components/paper-radio-group/README.md new file mode 100644 index 00000000..2f258bb9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/README.md @@ -0,0 +1,59 @@ + +<!--- + +This README is automatically generated from the comments in these files: +paper-radio-group.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[](https://travis-ci.org/PolymerElements/paper-radio-group) + +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-radio-group)_ + + +##<paper-radio-group> + +Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) + +`paper-radio-group` allows user to select at most one radio button from a set. +Checking one radio button that belongs to a radio group unchecks any +previously checked radio button within the same group. Use +`selected` to get or set the selected radio button. + +The <paper-radio-buttons> inside the group must have the `name` attribute +set. + +Example: + +```html +<paper-radio-group selected="small"> + <paper-radio-button name="small">Small</paper-radio-button> + <paper-radio-button name="medium">Medium</paper-radio-button> + <paper-radio-button name="large">Large</paper-radio-button> +</paper-radio-group> +``` + +Radio-button-groups can be made optional, and allow zero buttons to be selected: + +```html +<paper-radio-group selected="small" allow-empty-selection> + <paper-radio-button name="small">Small</paper-radio-button> + <paper-radio-button name="medium">Medium</paper-radio-button> + <paper-radio-button name="large">Large</paper-radio-button> +</paper-radio-group> +``` + +See <a href="paper-radio-button">paper-radio-button</a> for more +information about `paper-radio-button`. + +| Custom property | Description | Default | +| --- | --- | --- | +| `--paper-radio-group-item-padding` | The padding of the item | `12px` | + + diff --git a/catapult/third_party/polymer/components/paper-radio-group/bower.json b/catapult/third_party/polymer/components/paper-radio-group/bower.json new file mode 100644 index 00000000..2b948161 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/bower.json @@ -0,0 +1,38 @@ +{ + "name": "paper-radio-group", + "version": "1.2.2", + "description": "A group of material design radio buttons", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "radio", + "control" + ], + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-radio-group.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-radio-group", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0", + "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.1.7", + "paper-radio-button": "PolymerElements/paper-radio-button#^1.0.0" + }, + "devDependencies": { + "iron-component-page": "PolymerElements/iron-component-page#^1.0.0", + "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0", + "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "web-component-tester": "^4.0.0", + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0" + }, + "main": "paper-radio-group.html" +} diff --git a/catapult/third_party/polymer/components/paper-radio-group/demo/index.html b/catapult/third_party/polymer/components/paper-radio-group/demo/index.html new file mode 100644 index 00000000..cfb613d2 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/demo/index.html @@ -0,0 +1,76 @@ +<!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-radio-group demo</title> + + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + <meta name="mobile-web-app-capable" content="yes"> + <meta name="apple-mobile-web-app-capable" content="yes"> + + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> + <link rel="import" href="../../iron-demo-helpers/demo-snippet.html"> + <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html"> + <link rel="import" href="../../paper-radio-button/paper-radio-button.html"> + <link rel="import" href="../paper-radio-group.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + .vertical-section-container { + max-width: 500px; + } + + label { + align-self: center; + } + </style> + </head> + + <body unresolved> + <div class="vertical-section-container centered"> + <h3>A paper-radio-group allows only one item to be selected</h3> + <demo-snippet class="centered-demo"> + <template> + <label id="label1">Dinosaurs:</label> + <paper-radio-group aria-labelledby="label1"> + <paper-radio-button name="a">allosaurus</paper-radio-button> + <paper-radio-button name="b">brontosaurus</paper-radio-button> + <paper-radio-button name="d" disabled>diplodocus</paper-radio-button> + </paper-radio-group> + </template> + </demo-snippet> + + <h3>It can have an initial selection</h3> + <demo-snippet class="centered-demo"> + <template> + <label id="label2">Dinosaurs:</label> + <paper-radio-group selected="b" aria-labelledby="label2"> + <paper-radio-button name="a">allosaurus</paper-radio-button> + <paper-radio-button name="b">brontosaurus</paper-radio-button> + <paper-radio-button name="d" disabled>diplodocus</paper-radio-button> + </paper-radio-group> + </template> + </demo-snippet> + + <h3>It can optionally allow items to be deselected</h3> + <demo-snippet class="centered-demo"> + <template> + <label id="label3">Dinosaurs:</label> + <paper-radio-group selected="b" allow-empty-selection aria-labelledby="label3"> + <paper-radio-button name="a">allosaurus</paper-radio-button> + <paper-radio-button name="b">brontosaurus</paper-radio-button> + <paper-radio-button name="d" disabled>diplodocus</paper-radio-button> + </paper-radio-group> + </template> + </demo-snippet> + + </div> + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-radio-group/hero.svg b/catapult/third_party/polymer/components/paper-radio-group/hero.svg new file mode 100755 index 00000000..fc78ba76 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/hero.svg @@ -0,0 +1,25 @@ +<?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"> + <g> + <circle cx="112.5" cy="41" r="8"/> + <path d="M112.5,58c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S121.9,58,112.5,58z M112.5,26c-8.3,0-15,6.7-15,15s6.7,15,15,15 + s15-6.7,15-15S120.8,26,112.5,26z"/> + <circle cx="112.5" cy="85" r="8"/> + <path d="M112.5,102c-9.4,0-17-7.6-17-17s7.6-17,17-17s17,7.6,17,17S121.9,102,112.5,102z M112.5,70c-8.3,0-15,6.7-15,15 + s6.7,15,15,15s15-6.7,15-15S120.8,70,112.5,70z"/> + </g> + <g id="ic_x5F_add_x0D_"> + </g> +</g> +<g id="Guides"> +</g> +</svg> diff --git a/catapult/third_party/polymer/components/paper-radio-group/index.html b/catapult/third_party/polymer/components/paper-radio-group/index.html new file mode 100644 index 00000000..966c7172 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/index.html @@ -0,0 +1,30 @@ +<!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, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + + <title>paper-radio-group</title> + + <script src="../webcomponentsjs/webcomponents-lite.js"></script> + + <link rel="import" href="../polymer/polymer.html"> + <link rel="import" href="../iron-component-page/iron-component-page.html"> + + </head> + <body> + + <iron-component-page></iron-component-page> + + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-radio-group/paper-radio-group.html b/catapult/third_party/polymer/components/paper-radio-group/paper-radio-group.html new file mode 100644 index 00000000..5027e11d --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/paper-radio-group.html @@ -0,0 +1,185 @@ +<!-- +@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="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"> +<link rel="import" href="../iron-menu-behavior/iron-menubar-behavior.html"> +<link rel="import" href="../paper-radio-button/paper-radio-button.html"> + +<!-- +Material design: [Radio button](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-radio-button) + +`paper-radio-group` allows user to select at most one radio button from a set. +Checking one radio button that belongs to a radio group unchecks any +previously checked radio button within the same group. Use +`selected` to get or set the selected radio button. + +The <paper-radio-buttons> inside the group must have the `name` attribute +set. + +Example: + + <paper-radio-group selected="small"> + <paper-radio-button name="small">Small</paper-radio-button> + <paper-radio-button name="medium">Medium</paper-radio-button> + <paper-radio-button name="large">Large</paper-radio-button> + </paper-radio-group> + +Radio-button-groups can be made optional, and allow zero buttons to be selected: + + <paper-radio-group selected="small" allow-empty-selection> + <paper-radio-button name="small">Small</paper-radio-button> + <paper-radio-button name="medium">Medium</paper-radio-button> + <paper-radio-button name="large">Large</paper-radio-button> + </paper-radio-group> + +See <a href="paper-radio-button">paper-radio-button</a> for more +information about `paper-radio-button`. + + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-radio-group-item-padding` | The padding of the item | `12px` + +@group Paper Elements +@element paper-radio-group +@hero hero.svg +@demo demo/index.html +--> + +<dom-module id="paper-radio-group"> + <template> + <style> + :host { + display: inline-block; + } + + :host ::content > * { + padding: var(--paper-radio-group-item-padding, 12px); + } + </style> + + <content id="items" select="*"></content> + </template> +</dom-module> + +<script> + Polymer({ + is: 'paper-radio-group', + + behaviors: [ + Polymer.IronMenubarBehavior + ], + + hostAttributes: { + role: 'radiogroup', + tabindex: 0 + }, + + properties: { + /** + * Fired when the radio group selection changes. + * + * @event paper-radio-group-changed + */ + + /** + * Overriden from Polymer.IronSelectableBehavior + */ + attrForSelected: { + type: String, + value: 'name' + }, + + /** + * Overriden from Polymer.IronSelectableBehavior + */ + selectedAttribute: { + type: String, + value: 'checked' + }, + + /** + * Overriden from Polymer.IronSelectableBehavior + */ + selectable: { + type: String, + value: 'paper-radio-button' + }, + + /** + * If true, radio-buttons can be deselected + */ + allowEmptySelection: { + type: Boolean, + value: false + } + }, + + /** + * Selects the given value. + */ + select: function(value) { + var newItem = this._valueToItem(value); + if (newItem && newItem.hasAttribute('disabled')) { + return; + } + + if (this.selected) { + var oldItem = this._valueToItem(this.selected); + + if (this.selected == value) { + // If deselecting is allowed we'll have to apply an empty selection. + // Otherwise, we should force the selection to stay and make this + // action a no-op. + if (this.allowEmptySelection) { + value = ''; + } else { + if (oldItem) + oldItem.checked = true; + return; + } + } + + if (oldItem) + oldItem.checked = false; + } + + Polymer.IronSelectableBehavior.select.apply(this, [value]); + this.fire('paper-radio-group-changed'); + }, + + _activateFocusedItem: function() { + this._itemActivate(this._valueForItem(this.focusedItem), this.focusedItem); + }, + + _onUpKey: function(event) { + this._focusPrevious(); + event.preventDefault(); + this._activateFocusedItem(); + }, + + _onDownKey: function(event) { + this._focusNext(); + event.preventDefault(); + this._activateFocusedItem(); + }, + + _onLeftKey: function(event) { + Polymer.IronMenubarBehaviorImpl._onLeftKey.apply(this, arguments); + this._activateFocusedItem(); + }, + + _onRightKey: function(event) { + Polymer.IronMenubarBehaviorImpl._onRightKey.apply(this, arguments); + this._activateFocusedItem(); + } + }); +</script> diff --git a/catapult/third_party/polymer/components/paper-radio-group/test/basic.html b/catapult/third_party/polymer/components/paper-radio-group/test/basic.html new file mode 100644 index 00000000..d123c7fd --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/test/basic.html @@ -0,0 +1,249 @@ +<!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"> + <title>paper-radio-group basic tests</title> + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> + + <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="../paper-radio-group.html"> + + </head> + <body> + + <test-fixture id="NoSelection"> + <template> + <paper-radio-group> + <paper-radio-button name="r1">r1</paper-radio-button> + <paper-radio-button name="r2">r2</paper-radio-button> + <paper-radio-button name="r3">r3</paper-radio-button> + </paper-radio-group> + </template> + </test-fixture> + + <test-fixture id="WithSelection"> + <template> + <paper-radio-group selected="r1"> + <paper-radio-button name="r1">r1</paper-radio-button> + <paper-radio-button name="r2">r2</paper-radio-button> + <paper-radio-button name="r3">r3</paper-radio-button> + </paper-radio-group> + </template> + </test-fixture> + + <test-fixture id="WithDisabled"> + <template> + <paper-radio-group selected="r1"> + <paper-radio-button name="r1">r1</paper-radio-button> + <paper-radio-button name="r2" disabled>r2</paper-radio-button> + <paper-radio-button name="r3">r3</paper-radio-button> + </paper-radio-group> + </template> + </test-fixture> + + <script> + suite('defaults', function() { + var LEFT_ARROW = 37; + var RIGHT_ARROW = 39; + + test('group can have no selection', function (done) { + var g = fixture('NoSelection'); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + expect(g.selected).to.not.be.ok; + var items = g.items; + expect(items.length).to.be.equal(3); + + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(false); + + done(); + }, 1); + + }); + + test('group can have a selection', function (done) { + var g = fixture('WithSelection'); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + expect(g.selected).to.be.ok; + var items = g.items; + expect(items.length).to.be.equal(3); + + expect(items[0].checked).to.be.equal(true); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(false); + expect(items[0].getAttribute('name')).to.be.equal(g.selected); + + done(); + }, 1); + }); + + test('right arrow advances the selection', function (done) { + var g = fixture('WithSelection'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + g.addEventListener('paper-radio-group-changed', function () { + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(true); + expect(items[2].checked).to.be.equal(false); + done(); + }); + MockInteractions.keyDownOn(g, RIGHT_ARROW); + }, 1); + }); + + test('left arrow reverses the selection', function (done) { + var g = fixture('WithSelection'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + g.addEventListener('paper-radio-group-changed', function () { + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(true); + done(); + }); + MockInteractions.keyDownOn(g, LEFT_ARROW); + }, 1); + }); + + test('selection should skip disabled items', function (done) { + var g = fixture('WithDisabled'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + g.addEventListener('paper-radio-group-changed', function () { + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(true); + done(); + }); + MockInteractions.keyDownOn(g, RIGHT_ARROW); + }, 1); + }); + + test('clicking should change the selection', function (done) { + var g = fixture('WithSelection'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + g.addEventListener('paper-radio-group-changed', function () { + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(true); + expect(items[2].checked).to.be.equal(false); + done(); + }); + MockInteractions.tap(items[1]); + }, 1); + }); + + test('clicking the selected item should not deselect', function (done) { + var g = fixture('WithSelection'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + // The selection should not change, but wait for a little bit just + // in case it would and an event would be fired. + setTimeout(function() { + expect(items[0].checked).to.be.equal(true); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(false); + done(); + }, 1); + MockInteractions.tap(items[0]); + }, 1); + }); + + test('clicking the selected item should deselect if allow-empty-selection is set', function (done) { + var g = fixture('WithSelection'); + g.allowEmptySelection = true; + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + var items = g.items; + expect(items[0].checked).to.be.equal(true); + + // The selection should not change, but wait for a little bit just + // in case it would and an event would be fired. + setTimeout(function() { + expect(items[0].checked).to.be.equal(false); + expect(items[1].checked).to.be.equal(false); + expect(items[2].checked).to.be.equal(false); + done(); + }, 1); + MockInteractions.tap(items[0]); + }, 1); + }); + + test('arrow keys cause iron-activate events', function(done) { + var g = fixture('WithSelection'); + MockInteractions.focus(g); + + // Needs to be async since the underlying iron-selector uses observeNodes. + Polymer.Base.async(function() { + g.items[0].focus(); + + var i = 0; + g.addEventListener('iron-activate', function() { + switch (i++) { + case 0: + MockInteractions.pressAndReleaseKeyOn(g, 38); + break; + + case 1: + MockInteractions.pressAndReleaseKeyOn(g, 39); + break; + + case 2: + MockInteractions.pressAndReleaseKeyOn(g, 40); + break; + + default: + done(); + } + }); + + MockInteractions.pressAndReleaseKeyOn(g, 37); + }, 1); + }); + + }); + </script> + </body> +</html> diff --git a/catapult/third_party/polymer/components/paper-radio-group/test/index.html b/catapult/third_party/polymer/components/paper-radio-group/test/index.html new file mode 100644 index 00000000..cf387c5d --- /dev/null +++ b/catapult/third_party/polymer/components/paper-radio-group/test/index.html @@ -0,0 +1,24 @@ +<!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, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> + <title>paper-radio-group tests</title> + <script src="../../web-component-tester/browser.js"></script> + </head> + <body> + <script> + WCT.loadSuites([ + 'basic.html', + 'basic.html?dom=shadow' + ]); + </script> + + +</body></html> |
