diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-tooltip')
15 files changed, 1545 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-tooltip/.bower.json b/catapult/third_party/polymer/components/paper-tooltip/.bower.json new file mode 100644 index 00000000..8a542dd4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/.bower.json @@ -0,0 +1,45 @@ +{ + "name": "paper-tooltip", + "version": "1.1.4", + "description": "Material design tooltip popup for content", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "tooltip" + ], + "main": "paper-tooltip.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-tooltip.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-tooltip", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "neon-animation": "PolymerElements/neon-animation#^1.0.0" + }, + "devDependencies": { + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "web-component-tester": "^4.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "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-icon-button": "PolymerElements/paper-icon-button#^1.0.0" + }, + "_release": "1.1.4", + "_resolution": { + "type": "version", + "tag": "v1.1.4", + "commit": "c7c0a4d47e6ce30578f948986e9274d06fa2b94c" + }, + "_source": "https://github.com/PolymerElements/paper-tooltip.git", + "_target": "^1.0.0", + "_originalSource": "PolymerElements/paper-tooltip" +}
\ No newline at end of file diff --git a/catapult/third_party/polymer/components/paper-tooltip/.github/ISSUE_TEMPLATE.md b/catapult/third_party/polymer/components/paper-tooltip/.github/ISSUE_TEMPLATE.md new file mode 100644 index 00000000..61136cf8 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/.github/ISSUE_TEMPLATE.md @@ -0,0 +1,33 @@ +<!-- Instructions: https://github.com/PolymerElements/paper-tooltip/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-tooltip/.gitignore b/catapult/third_party/polymer/components/paper-tooltip/.gitignore new file mode 100644 index 00000000..fbe05fc9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/.gitignore @@ -0,0 +1 @@ +bower_components/ diff --git a/catapult/third_party/polymer/components/paper-tooltip/.travis.yml b/catapult/third_party/polymer/components/paper-tooltip/.travis.yml new file mode 100644 index 00000000..14b4e4b5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/.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: >- + gfWhTNPGzDs8BHzRxw6W2h/Uw8VIs0/ZWHhBkSS3XrpUx3A1ffZguK4PpiuAWMms5TaNCG/0N5f9YKnWVsKV6YAq78DdPh36wSNHZL3AKZaaHoLhcIOZUYLQ7DXlgVpJkGwvooPNUhVVy+NX33eLw4yAnn5IfQ9lAq+WOZH9xSPubzEA1iqB88EO5kPYkZblmmIwghEFP5bVXseb2Rc5VQHbOJPKJr20NXZCLvHvLxJYLO1wQRBJatQm/o5PTsN+Ey/2szsRlwWKSiTnIHMHIRqcvarxxsI5rm8nT7GOXxjzRc+nzZ8cwaWlFGwrDwKhgsjQytBQNPqctDnUwk+CQpTkJtYfxZTk0MfTpmTjtnpgErCiFBPjX+8igZC3L8xChZTAnTGbWHyyMSzs4N0eYJAEAdGksPMlhZ56q+EiP160NFAV8eJcGnpyfyqmrvSVcq5XqclgSLpeirmO49old1RzfdMvjDPbZQVoUievSwgUZDBodilynES+rOswMojQWwpu6bK2stM1qwxNs9JY22ssiWPg2ZN+98BpaLFZ/43yhuoyThOXGaaUVNrWpyGtgvUMtPBTI2J0zEDWAhMhZL4Uh2JWnZpfolLtGESLSMQptU8dz8jTLItEdBzotiCNJniGwiwPDMQrROfjekQaevVSJpqBfr38+1VEzb6ev6g= + - secure: >- + QjFHuOpEtakzECoxcIYl8TeZ6NIcrji6tN/5aWPEZaIUtsMIH7OwM6N7pEsdODEyanU4ay5PQsLjNmupsvVb515mk7sxTK3ZJBm8lk4T61WCQc74slV+WCjZ+jBs9SRwZM5SKECfqVIOfnDn0ZIMomVI4BgIexOAXi8pkc+9+zn6wVxYJGT2ORNu4fRJXHBfs5497Xp6qEtngXRvZHhtvElL796WiVVsMuePEXE/2BT0FoXL3FzhtCnY2xy/+Z8A+XzVVOftpSbMEPkkJJA7t+K6zsJnu5p4BBkf7afGaR1rEacZeoSEywQZ4iMX+BZt/fSkO1vJLXW+4YiCR6xivhpbMpHkvECFhB4g08ydRngdVqIcBOX1M94DeqvWodzHxjUo4fOd8loWEI8Y6eigLf/ex/YVN9q2kLYxySFINsA2vKFthTPjA6RdQZqiAAYZn7HvkGsMbULB2LvtgYksT+oayLQwS+YxgzqAWgfMkaD2kS8ISFbwW5YKa0lxiQf1ZafD/OZDhLBMn+UTnLH6BtRrWHzWgzFQSOoE+CS1OH3dDlah6lLc18U+dhF9WynjiT2F41jGAQuZ5Wqld18Ge5dhJ5e3nqHylS+GZ6pHQs9jFQStZlAT+Pv1PCi9PikaIv8/OPE338buZK3b3WFrWTQATWazCgck+u8230kMTaQ= +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-tooltip/CONTRIBUTING.md b/catapult/third_party/polymer/components/paper-tooltip/CONTRIBUTING.md new file mode 100644 index 00000000..093090d4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/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-tooltip/README.md b/catapult/third_party/polymer/components/paper-tooltip/README.md new file mode 100644 index 00000000..b20a34b5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/README.md @@ -0,0 +1,62 @@ + +<!--- + +This README is automatically generated from the comments in these files: +paper-tooltip.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-tooltip) + +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-tooltip)_ + + +##<paper-tooltip> + +Material design: [Tooltips](https://www.google.com/design/spec/components/tooltips.html) + +`<paper-tooltip>` is a label that appears on hover and focus when the user +hovers over an element with the cursor or with the keyboard. It will be centered +to an anchor element specified in the `for` attribute, or, if that doesn't exist, +centered to the parent node containing it. + +Example: + +```html +<div style="display:inline-block"> + <button>Click me!</button> + <paper-tooltip>Tooltip text</paper-tooltip> +</div> + +<div> + <button id="btn">Click me!</button> + <paper-tooltip for="btn">Tooltip text</paper-tooltip> +</div> +``` + +The tooltip can be positioned on the top|bottom|left|right of the anchor using +the `position` attribute. The default position is bottom. + +```html +<paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip> +<paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip> +``` + +### Styling + +The following custom properties and mixins are available for styling: + +| Custom property | Description | Default | +| --- | --- | --- | +| `--paper-tooltip-background` | The background color of the tooltip | `#616161` | +| `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` | +| `--paper-tooltip-text-color` | The text color of the tooltip | `white` | +| `--paper-tooltip` | Mixin applied to the tooltip | `{}` | + + diff --git a/catapult/third_party/polymer/components/paper-tooltip/bower.json b/catapult/third_party/polymer/components/paper-tooltip/bower.json new file mode 100644 index 00000000..f7a687d9 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/bower.json @@ -0,0 +1,36 @@ +{ + "name": "paper-tooltip", + "version": "1.1.4", + "description": "Material design tooltip popup for content", + "authors": [ + "The Polymer Authors" + ], + "keywords": [ + "web-components", + "polymer", + "tooltip" + ], + "main": "paper-tooltip.html", + "private": true, + "repository": { + "type": "git", + "url": "git://github.com/PolymerElements/paper-tooltip.git" + }, + "license": "http://polymer.github.io/LICENSE.txt", + "homepage": "https://github.com/PolymerElements/paper-tooltip", + "ignore": [], + "dependencies": { + "polymer": "Polymer/polymer#^1.1.0", + "paper-styles": "PolymerElements/paper-styles#^1.0.0", + "neon-animation": "PolymerElements/neon-animation#^1.0.0" + }, + "devDependencies": { + "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0", + "web-component-tester": "^4.0.0", + "test-fixture": "PolymerElements/test-fixture#^1.0.0", + "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-icon-button": "PolymerElements/paper-icon-button#^1.0.0" + } +} diff --git a/catapult/third_party/polymer/components/paper-tooltip/demo/index.html b/catapult/third_party/polymer/components/paper-tooltip/demo/index.html new file mode 100644 index 00000000..c0bad5e4 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/demo/index.html @@ -0,0 +1,133 @@ +<!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 lang="en"> +<head> + <title>paper-tooltip demo</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> + <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="../../iron-icons/iron-icons.html"> + <link rel="import" href="../../paper-icon-button/paper-icon-button.html"> + <link rel="import" href="../../paper-styles/color.html"> + <link rel="import" href="../paper-tooltip.html"> + <link rel="import" href="test-button.html"> + + <style is="custom-style" include="demo-pages-shared-styles"> + paper-icon-button, input, .avatar { + margin: 0 10px; + } + + .avatar { + box-sizing: border-box; + width: 40px; + height: 40px; + padding: 8px; + border-radius: 50%; + cursor: pointer; + } + + .blue { + background-color: var(--paper-light-blue-300); + } + .orange { + background-color: var(--paper-amber-500); + } + .green { + background-color: var(--paper-green-500); + } + .red { + background-color: var(--paper-pink-500); + } + </style> +</head> +<body unresolved> + <div class="vertical-section-container centered"> + <h3>Tooltips can be anchored to elements using their ID</h3> + <demo-snippet class="centered-demo"> + <template> + <paper-icon-button id="id_1" icon="favorite" alt="heart"></paper-icon-button> + <paper-icon-button id="id_2" icon="alarm-on" alt="go back"></paper-icon-button> + <div id="id_3" class="avatar blue" tabindex="0"></div> + <div id="id_4" class="avatar orange" tabindex="0"></div> + + <!-- paper-icon-buttons have an inherent padding that will push the tooltip down. offset undoes it --> + <paper-tooltip for="id_1" offset="0"><3 <3 <3 </paper-tooltip> + <paper-tooltip for="id_2" offset="0">wake up!</paper-tooltip> + <paper-tooltip for="id_3" offset="0">halp I am trapped in a tooltip</paper-tooltip> + <paper-tooltip for="id_4" offset="0">meow!</paper-tooltip> + </template> + </demo-snippet> + + <h3>Tooltips can be anchored to elements relative to their parent</h3> + <demo-snippet class="centered-demo"> + <template> + <!-- Adding a tabindex so that we can show the tooltip when the whole box is tabbed to --> + <div tabindex="0"> + <input type="checkbox">allosaurus + <paper-tooltip>the name means "different lizard"</paper-tooltip> + </div> + <div tabindex="0"> + <input type="checkbox">brontosaurus + <paper-tooltip>the name means "thunder lizard"</paper-tooltip> + </div> + <div tabindex="0"> + <input type="checkbox">megalosaurus + <paper-tooltip>the name means "roof lizard"</paper-tooltip> + </div> + </div> + </template> + </demo-snippet> + + <h3>Tooltips can open in different directions</h3> + <demo-snippet class="centered-demo"> + <template> + <div id="dir_1" class="avatar red" tabindex="0"></div> + <div id="dir_2" class="avatar blue" tabindex="0"></div> + <div id="dir_3" class="avatar green" tabindex="0"></div> + <div id="dir_4" class="avatar orange" tabindex="0"></div> + + <paper-tooltip for="dir_1" position="left" animation-delay="0">👈</paper-tooltip> + <paper-tooltip for="dir_2" position="right" animation-delay="0">👉</paper-tooltip> + <paper-tooltip for="dir_3" position="top" animation-delay="0">👍</paper-tooltip> + <paper-tooltip for="dir_4" position="bottom" animation-delay="0">👎</paper-tooltip> + </template> + </demo-snippet> + + <h3>Tooltips can contain rich text (though against the Material Design spec)</h3> + <demo-snippet class="centered-demo"> + <template> + <style is="custom-style"> + paper-tooltip.custom img { + width: 40px; + padding-right: 10px; + padding-bottom: 10px; + float: left; + } + .custom { + --paper-tooltip-background: black; + --paper-tooltip-text-color: var(--paper-pink-100); + width: 160px; + } + </style> + <paper-icon-button id="demo4_icon1" icon="favorite" alt="heart"></paper-icon-button> + <paper-tooltip for="demo4_icon1" class="custom" animation-delay="0"> + <img src="https://placekitten.com/50/50"> + Rich-text tooltips are doable but against the Material Design spec. + </paper-tooltip> + </template> + </demo-snippet> + </div> +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tooltip/demo/test-button.html b/catapult/third_party/polymer/components/paper-tooltip/demo/test-button.html new file mode 100644 index 00000000..0942f58c --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/demo/test-button.html @@ -0,0 +1,37 @@ +<!-- +@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-icon-button/paper-icon-button.html"> +<link rel="import" href="../../iron-icons/iron-icons.html"> +<link rel="import" href="../paper-tooltip.html"> + +<dom-module id="test-button"> + <template> + <style> + :host { + display: inline-block; + } + + paper-icon-button { + padding: 0; + } + </style> + + <paper-icon-button id="m" icon="menu" alt="menu"></paper-icon-button> + <paper-tooltip for="m" offset="8">hot dogs</paper-tooltip> + </template> + + <script> + Polymer({ + is: 'test-button' + }); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-tooltip/index.html b/catapult/third_party/polymer/components/paper-tooltip/index.html new file mode 100644 index 00000000..848f0426 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/index.html @@ -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>paper-tooltip</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> diff --git a/catapult/third_party/polymer/components/paper-tooltip/paper-tooltip.html b/catapult/third_party/polymer/components/paper-tooltip/paper-tooltip.html new file mode 100644 index 00000000..670280b1 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/paper-tooltip.html @@ -0,0 +1,407 @@ +<!-- +@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="../neon-animation/neon-animation-runner-behavior.html"> +<link rel="import" href="../neon-animation/animations/fade-in-animation.html"> +<link rel="import" href="../neon-animation/animations/fade-out-animation.html"> + +<!-- +Material design: [Tooltips](https://www.google.com/design/spec/components/tooltips.html) + +`<paper-tooltip>` is a label that appears on hover and focus when the user +hovers over an element with the cursor or with the keyboard. It will be centered +to an anchor element specified in the `for` attribute, or, if that doesn't exist, +centered to the parent node containing it. + +Example: + + <div style="display:inline-block"> + <button>Click me!</button> + <paper-tooltip>Tooltip text</paper-tooltip> + </div> + + <div> + <button id="btn">Click me!</button> + <paper-tooltip for="btn">Tooltip text</paper-tooltip> + </div> + +The tooltip can be positioned on the top|bottom|left|right of the anchor using +the `position` attribute. The default position is bottom. + + <paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip> + <paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip> + +### Styling + +The following custom properties and mixins are available for styling: + +Custom property | Description | Default +----------------|-------------|---------- +`--paper-tooltip-background` | The background color of the tooltip | `#616161` +`--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` +`--paper-tooltip-text-color` | The text color of the tooltip | `white` +`--paper-tooltip` | Mixin applied to the tooltip | `{}` + +@group Paper Elements +@element paper-tooltip +@demo demo/index.html +--> + +<dom-module id="paper-tooltip"> + <template> + <style> + :host { + display: block; + position: absolute; + outline: none; + z-index: 1002; + -moz-user-select: none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; + cursor: default; + } + + #tooltip { + display: block; + outline: none; + @apply(--paper-font-common-base); + font-size: 10px; + line-height: 1; + + background-color: var(--paper-tooltip-background, #616161); + opacity: var(--paper-tooltip-opacity, 0.9); + color: var(--paper-tooltip-text-color, white); + + padding: 8px; + border-radius: 2px; + + @apply(--paper-tooltip); + } + + /* Thanks IE 10. */ + .hidden { + display: none !important; + } + </style> + + <div id="tooltip" class="hidden"> + <content></content> + </div> + </template> + + <script> + Polymer({ + is: 'paper-tooltip', + + hostAttributes: { + role: 'tooltip', + tabindex: -1 + }, + + behaviors: [ + Polymer.NeonAnimationRunnerBehavior + ], + + properties: { + /** + * The id of the element that the tooltip is anchored to. This element + * must be a sibling of the tooltip. + */ + for: { + type: String, + observer: '_findTarget' + }, + + /** + * Set this to true if you want to manually control when the tooltip + * is shown or hidden. + */ + manualMode: { + type: Boolean, + value: false, + observer: '_manualModeChanged' + }, + + /** + * Positions the tooltip to the top, right, bottom, left of its content. + */ + position: { + type: String, + value: 'bottom' + }, + + /** + * If true, no parts of the tooltip will ever be shown offscreen. + */ + fitToVisibleBounds: { + type: Boolean, + value: false + }, + + /** + * The spacing between the top of the tooltip and the element it is + * anchored to. + */ + offset: { + type: Number, + value: 14 + }, + + /** + * This property is deprecated, but left over so that it doesn't + * break exiting code. Please use `offset` instead. If both `offset` and + * `marginTop` are provided, `marginTop` will be ignored. + * @deprecated since version 1.0.3 + */ + marginTop: { + type: Number, + value: 14 + }, + + /** + * The delay that will be applied before the `entry` animation is + * played when showing the tooltip. + */ + animationDelay: { + type: Number, + value: 500 + }, + + /** + * The entry and exit animations that will be played when showing and + * hiding the tooltip. If you want to override this, you must ensure + * that your animationConfig has the exact format below. + */ + animationConfig: { + type: Object, + value: function() { + return { + 'entry': [{ + name: 'fade-in-animation', + node: this, + timing: {delay: 0} + }], + 'exit': [{ + name: 'fade-out-animation', + node: this + }] + } + } + }, + + _showing: { + type: Boolean, + value: false + } + }, + + listeners: { + 'neon-animation-finish': '_onAnimationFinish', + }, + + /** + * Returns the target element that this tooltip is anchored to. It is + * either the element given by the `for` attribute, or the immediate parent + * of the tooltip. + */ + get target () { + var parentNode = Polymer.dom(this).parentNode; + // If the parentNode is a document fragment, then we need to use the host. + var ownerRoot = Polymer.dom(this).getOwnerRoot(); + + var target; + if (this.for) { + target = Polymer.dom(ownerRoot).querySelector('#' + this.for); + } else { + target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? + ownerRoot.host : parentNode; + } + + return target; + }, + + attached: function() { + this._findTarget(); + }, + + detached: function() { + if (!this.manualMode) + this._removeListeners(); + }, + + show: function() { + // If the tooltip is already showing, there's nothing to do. + if (this._showing) + return; + + if (Polymer.dom(this).textContent.trim() === ''){ + // Check if effective children are also empty + var allChildrenEmpty = true; + var effectiveChildren = Polymer.dom(this).getEffectiveChildNodes(); + for (var i = 0; i < effectiveChildren.length; i++) { + if (effectiveChildren[i].textContent.trim() !== '') { + allChildrenEmpty = false; + break; + } + } + if (allChildrenEmpty) { + return; + } + } + + + this.cancelAnimation(); + this._showing = true; + this.toggleClass('hidden', false, this.$.tooltip); + this.updatePosition(); + + this.animationConfig.entry[0].timing = this.animationConfig.entry[0].timing || {}; + this.animationConfig.entry[0].timing.delay = this.animationDelay; + this._animationPlaying = true; + this.playAnimation('entry'); + }, + + hide: function() { + // If the tooltip is already hidden, there's nothing to do. + if (!this._showing) { + return; + } + + // If the entry animation is still playing, don't try to play the exit + // animation since this will reset the opacity to 1. Just end the animation. + if (this._animationPlaying) { + this.cancelAnimation(); + this._showing = false; + this._onAnimationFinish(); + return; + } + + this._showing = false; + this._animationPlaying = true; + this.playAnimation('exit'); + }, + + updatePosition: function() { + if (!this._target || !this.offsetParent) + return; + + var offset = this.offset; + // If a marginTop has been provided by the user (pre 1.0.3), use it. + if (this.marginTop != 14 && this.offset == 14) + offset = this.marginTop; + + var parentRect = this.offsetParent.getBoundingClientRect(); + var targetRect = this._target.getBoundingClientRect(); + var thisRect = this.getBoundingClientRect(); + + var horizontalCenterOffset = (targetRect.width - thisRect.width) / 2; + var verticalCenterOffset = (targetRect.height - thisRect.height) / 2; + + var targetLeft = targetRect.left - parentRect.left; + var targetTop = targetRect.top - parentRect.top; + + var tooltipLeft, tooltipTop; + + switch (this.position) { + case 'top': + tooltipLeft = targetLeft + horizontalCenterOffset; + tooltipTop = targetTop - thisRect.height - offset; + break; + case 'bottom': + tooltipLeft = targetLeft + horizontalCenterOffset; + tooltipTop = targetTop + targetRect.height + offset; + break; + case 'left': + tooltipLeft = targetLeft - thisRect.width - offset; + tooltipTop = targetTop + verticalCenterOffset; + break; + case 'right': + tooltipLeft = targetLeft + targetRect.width + offset; + tooltipTop = targetTop + verticalCenterOffset; + break; + } + + // TODO(noms): This should use IronFitBehavior if possible. + if (this.fitToVisibleBounds) { + // Clip the left/right side + if (parentRect.left + tooltipLeft + thisRect.width > window.innerWidth) { + this.style.right = '0px'; + this.style.left = 'auto'; + } else { + this.style.left = Math.max(0, tooltipLeft) + 'px'; + this.style.right = 'auto'; + } + + // Clip the top/bottom side. + if (parentRect.top + tooltipTop + thisRect.height > window.innerHeight) { + this.style.bottom = parentRect.height + 'px'; + this.style.top = 'auto'; + } else { + this.style.top = Math.max(-parentRect.top, tooltipTop) + 'px'; + this.style.bottom = 'auto'; + } + } else { + this.style.left = tooltipLeft + 'px'; + this.style.top = tooltipTop + 'px'; + } + + }, + + _addListeners: function() { + if (this._target) { + this.listen(this._target, 'mouseenter', 'show'); + this.listen(this._target, 'focus', 'show'); + this.listen(this._target, 'mouseleave', 'hide'); + this.listen(this._target, 'blur', 'hide'); + this.listen(this._target, 'tap', 'hide'); + } + this.listen(this, 'mouseenter', 'hide'); + }, + + _findTarget: function() { + if (!this.manualMode) + this._removeListeners(); + + this._target = this.target; + + if (!this.manualMode) + this._addListeners(); + }, + + _manualModeChanged: function() { + if (this.manualMode) + this._removeListeners(); + else + this._addListeners(); + }, + + _onAnimationFinish: function() { + this._animationPlaying = false; + if (!this._showing) { + this.toggleClass('hidden', true, this.$.tooltip); + } + }, + + _removeListeners: function() { + if (this._target) { + this.unlisten(this._target, 'mouseenter', 'show'); + this.unlisten(this._target, 'focus', 'show'); + this.unlisten(this._target, 'mouseleave', 'hide'); + this.unlisten(this._target, 'blur', 'hide'); + this.unlisten(this._target, 'tap', 'hide'); + } + this.unlisten(this, 'mouseenter', 'hide'); + } + }); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-tooltip/test/basic.html b/catapult/third_party/polymer/components/paper-tooltip/test/basic.html new file mode 100644 index 00000000..45e386b0 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/test/basic.html @@ -0,0 +1,552 @@ +<!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-tooltip 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="../../test-fixture/test-fixture-mocha.js"></script> + <script src="../../iron-test-helpers/mock-interactions.js"></script> + + <link rel="import" href="../../test-fixture/test-fixture.html"> + <link rel="import" href="../paper-tooltip.html"> + <link rel="import" href="test-button.html"> + <link rel="import" href="test-icon.html"> + +</head> +<style> + body { + margin: 0; + padding: 0; + } + #target { + width: 100px; + height: 20px; + background-color: red; + } + paper-tooltip { + width: 70px; + height: 30px; + } + + .wide { + width: 200px; + } + + [hidden] { + display: none; + } +</style> + +<body> + + <test-fixture id="basic"> + <template> + <div> + <div id="target"></div> + <paper-tooltip for="target" animation-delay="0">Tooltip text</paper-tooltip> + </div> + </template> + </test-fixture> + + <test-fixture id="fitted"> + <template> + <div> + <div id="target" style="position:absolute"></div> + <paper-tooltip for="target" class="wide" fit-to-visible-bounds>Tooltip text</paper-tooltip> + </div> + </template> + </test-fixture> + + <test-fixture id="no-text"> + <template> + <div> + <div id="target"></div> + <paper-tooltip for="target"></paper-tooltip> + </div> + </template> + </test-fixture> + + <test-fixture id="dynamic"> + <template> + <div> + <div id="target"></div> + <paper-tooltip>Tooltip text</paper-tooltip> + </div> + </template> + </test-fixture> + + <test-fixture id="custom"> + <template> + <test-button></test-button> + </template> + </test-fixture> + + <test-fixture id="custom-with-content"> + <template> + <test-icon>Tooltip text</test-icon> + </template> + </test-fixture> + + <test-fixture id="no-offset-parent"> + <template> + <div> + <div id="target"></div> + <paper-tooltip for="target" animation-delay="0" hidden></paper-tooltip> + </div> + </template> + </test-fixture> + + <test-fixture id="manual-mode"> + <template> + <div> + <div id="target"></div> + <paper-tooltip for="target" manual-mode>Text</paper-tooltip> + </div> + </template> + </test-fixture> + + <script> + function isHidden(element) { + var rect = element.getBoundingClientRect(); + return (rect.width == 0 && rect.height == 0); + } + + suite('basic', function() { + test('tooltip is shown when target is focused', function() { + var f = fixture('no-text'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isTrue(isHidden(actualTooltip)); + }); + + test('tooltip is not shown if empty', function() { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + }); + + test('tooltip doesn\'t throw an exception if it has no offsetParent', function() { + var f = fixture('no-offset-parent'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + tooltip.updatePosition(); + tooltip.show(); + + // Doesn't get shown since there's no position computed. + assert.isTrue(isHidden(actualTooltip)); + }); + + test('tooltip is positioned correctly (bottom)', function() { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The target div width is 100, and the tooltip width is 70, and + // it's centered. The height of the target div is 20, and the + // tooltip is 14px below. + expect(contentRect.left).to.be.equal((100 - 70)/2); + expect(contentRect.top).to.be.equal(20 + 14); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2); + expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset); + }); + + test('tooltip is positioned correctly (top)', function() { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + tooltip.position = 'top'; + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The target div width is 100, and the tooltip width is 70, and + // it's centered. The height of the tooltip is 30, and the + // tooltip is 14px above the target. + expect(contentRect.left).to.be.equal((100 - 70)/2); + expect(contentRect.top).to.be.equal(0 - 30 - 14); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2); + expect(contentRect.top).to.be.equal(0 - contentRect.height - tooltip.offset); + }); + + test('tooltip is positioned correctly (right)', function() { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + tooltip.position = 'right'; + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The target div width is 100, and the tooltip is 14px to the right. + // The target div height is 20, the height of the tooltip is 20px, and + // the tooltip is centered. + expect(contentRect.left).to.be.equal(100 + 14); + expect(contentRect.top).to.be.equal((20 - 30)/2); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal(divRect.width + tooltip.offset); + expect(contentRect.top).to.be.equal((divRect.height - contentRect.height)/2); + }); + + test('tooltip is positioned correctly (left)', function() { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + tooltip.position = 'left'; + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The tooltip width is 70px, and the tooltip is 14px to the left of the target. + // The target div height is 20, the height of the tooltip is 20px, and + // the tooltip is centered. + expect(contentRect.left).to.be.equal(0 - 70 - 14); + expect(contentRect.top).to.be.equal((20 - 30)/2); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal(0 - contentRect.width - tooltip.offset); + expect(contentRect.top).to.be.equal((divRect.height - contentRect.height)/2); + }); + + test('tooltip is fitted correctly if out of bounds', function() { + var f = fixture('fitted'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + target.style.top = 0; + target.style.left = 0; + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var contentRect = tooltip.getBoundingClientRect(); + var divRect = target.getBoundingClientRect(); + + // Should be fitted on the left side. + expect(contentRect.left).to.be.equal(0); + expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset); + }); + + test('tooltip is positioned correctly after being dynamically set', function() { + var f = fixture('dynamic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + // Skip animations in this test, which means we'll show and hide + // the tooltip manually, instead of calling focus and blur. + + // The tooltip is shown because it's a sibling of the target, + // but it's positioned incorrectly + tooltip.toggleClass('hidden', false, actualTooltip); + assert.isFalse(isHidden(actualTooltip)); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.left).to.not.be.equal((100 - 70)/2); + + tooltip.for = 'target'; + + // The tooltip needs to hide before it gets repositioned. + tooltip.toggleClass('hidden', true, actualTooltip); + tooltip.updatePosition(); + tooltip.toggleClass('hidden', false, actualTooltip); + assert.isFalse(isHidden(actualTooltip)); + + // The target div width is 100, and the tooltip width is 70, and + // it's centered. The height of the target div is 20, and the + // tooltip is 14px below. + contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.left).to.be.equal((100 - 70)/2); + expect(contentRect.top).to.be.equal(20 + 14); + }); + + test('tooltip is hidden after target is blurred', function(done) { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + // Simulate but don't actually run the entry animation. + tooltip.toggleClass('hidden', false, actualTooltip); + tooltip._showing = true; + assert.isFalse(isHidden(actualTooltip)); + + tooltip.addEventListener('neon-animation-finish', function() { + assert.isTrue(isHidden(actualTooltip)); + done(); + }); + MockInteractions.blur(target); + }); + + test('tooltip unlistens to target on detach', function(done) { + var f = fixture('basic'); + var target = f.querySelector('#target'); + var tooltip = f.querySelector('paper-tooltip'); + + sinon.spy(tooltip, 'show'); + + MockInteractions.focus(target); + expect(tooltip.show.callCount).to.be.equal(1); + + MockInteractions.focus(target); + expect(tooltip.show.callCount).to.be.equal(2); + + f.removeChild(tooltip); + + setTimeout(function() { + // No more listener means no more calling show. + MockInteractions.focus(target); + expect(tooltip.show.callCount).to.be.equal(2); + done(); + }, 200); + }); + + test('tooltip ignores events in manual-mode', function() { + var f = fixture('manual-mode'); + + var tooltip = f.querySelector('paper-tooltip'); + assert.isTrue(tooltip.manualMode); + + tooltip.show(); + assert.isTrue(tooltip._showing); + + sinon.spy(tooltip, 'hide'); + + tooltip.fire('mouseenter'); + + var target = f.querySelector('#target'); + target.dispatchEvent(new CustomEvent('mouseenter')); + target.dispatchEvent(new CustomEvent('focus')); + target.dispatchEvent(new CustomEvent('mouseleave')); + target.dispatchEvent(new CustomEvent('blur')); + target.dispatchEvent(new CustomEvent('tap')); + + expect(tooltip.hide.callCount).to.be.equal(0); + }); + + test('changing manual-mode toggles event listeners', function() { + var f = fixture('manual-mode'); + + var tooltip = f.querySelector('paper-tooltip'); + assert.isTrue(tooltip.manualMode); + + sinon.spy(tooltip, '_addListeners'); + sinon.spy(tooltip, '_removeListeners'); + expect(tooltip._addListeners.callCount).to.be.equal(0); + expect(tooltip._removeListeners.callCount).to.be.equal(0); + + tooltip.manualMode = false; + expect(tooltip._addListeners.callCount).to.be.equal(1); + expect(tooltip._removeListeners.callCount).to.be.equal(0); + + tooltip.manualMode = true; + expect(tooltip._addListeners.callCount).to.be.equal(1); + expect(tooltip._removeListeners.callCount).to.be.equal(1); + }); + + test('changing for= re-targets event listeners', function() { + var f = fixture('dynamic'); + var tooltip = f.querySelector('paper-tooltip'); + + sinon.spy(tooltip, '_addListeners'); + sinon.spy(tooltip, '_removeListeners'); + + expect(tooltip._removeListeners.callCount).to.be.equal(0); + expect(tooltip._addListeners.callCount).to.be.equal(0); + + tooltip.for = 'target'; + + expect(tooltip._removeListeners.callCount).to.be.equal(1); + expect(tooltip._addListeners.callCount).to.be.equal(1); + }); + }); + + suite('tooltip is inside a custom element', function() { + var f, tooltip, target; + + setup(function() { + f = fixture('custom'); + target = f.$.button; + tooltip = f.$.buttonTooltip; + }); + + test('tooltip is shown when target is focused', function() { + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + }); + + test('tooltip is positioned correctly', function() { + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The target div width is 100, and the tooltip width is 70, and + // it's centered. The height of the target div is 20, and the + // tooltip is 14px below. + expect(contentRect.left).to.be.equal((100 - 70)/2); + expect(contentRect.top).to.be.equal(20 + 14); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2); + expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset); + }); + }); + + suite('tooltip is inside a custom element with content', function() { + var f, tooltip, target; + + setup(function() { + f = fixture('custom-with-content'); + target = f.$.icon; + tooltip = f.$.iconTooltip; + }); + + test('tooltip is shown when target is focused', function() { + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + }); + + test('tooltip is positioned correctly', function() { + var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip'); + assert.isTrue(isHidden(actualTooltip)); + + MockInteractions.focus(target); + assert.isFalse(isHidden(actualTooltip)); + + var divRect = target.getBoundingClientRect(); + expect(divRect.width).to.be.equal(100); + expect(divRect.height).to.be.equal(20); + + var contentRect = tooltip.getBoundingClientRect(); + expect(contentRect.width).to.be.equal(70); + expect(contentRect.height).to.be.equal(30); + + // The target div width is 100, and the tooltip width is 70, and + // it's centered. The height of the target div is 20, and the + // tooltip is 14px below. + expect(contentRect.left).to.be.equal((100 - 70)/2); + expect(contentRect.top).to.be.equal(20 + 14); + + // Also check the math, just in case. + expect(contentRect.left).to.be.equal((divRect.width - contentRect.width)/2); + expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset); + }); + }); + + suite('a11y', function() { + test('has aria role "tooltip"', function() { + var f = fixture('basic'); + var tooltip = f.querySelector('paper-tooltip'); + + assert.isTrue(tooltip.getAttribute('role') == 'tooltip'); + }); + + var ignoredRules = ['roleTooltipRequiresDescribedby']; + + a11ySuite('basic', ignoredRules); + a11ySuite('fitted', ignoredRules); + a11ySuite('no-text', ignoredRules); + a11ySuite('dynamic', ignoredRules); + a11ySuite('custom', ignoredRules); + }); + </script> +</body> +</html> diff --git a/catapult/third_party/polymer/components/paper-tooltip/test/index.html b/catapult/third_party/polymer/components/paper-tooltip/test/index.html new file mode 100644 index 00000000..fbdc662d --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/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-tooltip tests</title> + <script src="../../web-component-tester/browser.js"></script> +</head> +<body> + <script> + WCT.loadSuites([ + 'basic.html', + 'basic.html?dom=shadow' + ]); + </script> + + +</body></html> diff --git a/catapult/third_party/polymer/components/paper-tooltip/test/test-button.html b/catapult/third_party/polymer/components/paper-tooltip/test/test-button.html new file mode 100644 index 00000000..fa871050 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/test/test-button.html @@ -0,0 +1,43 @@ +<!-- +@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-tooltip.html"> + +<dom-module id="test-button"> + <template> + <style> + :host { + display: inline-block; + } + + #button { + width: 100px; + height: 20px; + background-color: red; + } + + paper-tooltip { + width: 70px; + height: 30px; + } + + </style> + + <div id="button"></div> + <paper-tooltip id="buttonTooltip" for="button">Tooltip text</paper-tooltip> + </template> + + <script> + Polymer({ + is: 'test-button' + }); + </script> +</dom-module> diff --git a/catapult/third_party/polymer/components/paper-tooltip/test/test-icon.html b/catapult/third_party/polymer/components/paper-tooltip/test/test-icon.html new file mode 100644 index 00000000..13454165 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/test/test-icon.html @@ -0,0 +1,43 @@ +<!-- +@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-tooltip.html"> + +<dom-module id="test-icon"> + <template> + <style> + :host { + display: inline-block; + } + + #icon { + width: 100px; + height: 20px; + background-color: red; + } + + paper-tooltip { + width: 70px; + height: 30px; + } + + </style> + + <div id="icon"></div> + <paper-tooltip id="iconTooltip" for="icon"><content></content></paper-tooltip> + </template> + + <script> + Polymer({ + is: 'test-icon' + }); + </script> +</dom-module> |