Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(138)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: third_party/polymer/components/paper-tooltip/test/basic.html

Issue 3010683002: Update Polymer components. (Closed)
Patch Set: Rebase Created 3 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « third_party/polymer/components/paper-tooltip/paper-tooltip.html ('k') | third_party/polymer/components/paper-tooltip/test/test-icon.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <!-- 2 <!--
3 @license 3 @license
4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 5 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 7 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
8 Code distributed by Google as part of the polymer project is also 8 Code distributed by Google as part of the polymer project is also
9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 9 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
10 --> 10 -->
11 <html> 11 <html>
12 <head> 12 <head>
13 <meta charset="UTF-8"> 13 <meta charset="UTF-8">
14 <title>paper-tooltip tests</title> 14 <title>paper-tooltip tests</title>
15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0"> 15 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0">
16 16
17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 17 <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
18 <script src="../../web-component-tester/browser.js"></script> 18 <script src="../../web-component-tester/browser.js"></script>
19 <script src="../../test-fixture/test-fixture-mocha.js"></script> 19 <script src="../../test-fixture/test-fixture-mocha.js"></script>
20 <script src="../../iron-test-helpers/mock-interactions.js"></script> 20 <script src="../../iron-test-helpers/mock-interactions.js"></script>
21 21
22 <link rel="import" href="../../test-fixture/test-fixture.html"> 22 <link rel="import" href="../../test-fixture/test-fixture.html">
23 <link rel="import" href="../paper-tooltip.html"> 23 <link rel="import" href="../paper-tooltip.html">
24 <link rel="import" href="test-button.html"> 24 <link rel="import" href="test-button.html">
25 <link rel="import" href="test-icon.html">
25 26
26 </head> 27 </head>
27 <style> 28 <style>
28 body { 29 body {
29 margin: 0; 30 margin: 0;
30 padding: 0; 31 padding: 0;
31 } 32 }
32 #target { 33 #target {
33 width: 100px; 34 width: 100px;
34 height: 20px; 35 height: 20px;
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
85 </div> 86 </div>
86 </template> 87 </template>
87 </test-fixture> 88 </test-fixture>
88 89
89 <test-fixture id="custom"> 90 <test-fixture id="custom">
90 <template> 91 <template>
91 <test-button></test-button> 92 <test-button></test-button>
92 </template> 93 </template>
93 </test-fixture> 94 </test-fixture>
94 95
96 <test-fixture id="custom-with-content">
97 <template>
98 <test-icon>Tooltip text</test-icon>
99 </template>
100 </test-fixture>
101
95 <test-fixture id="no-offset-parent"> 102 <test-fixture id="no-offset-parent">
96 <template> 103 <template>
97 <div> 104 <div>
98 <div id="target"></div> 105 <div id="target"></div>
99 <paper-tooltip for="target" animation-delay="0" hidden></paper-tooltip> 106 <paper-tooltip for="target" animation-delay="0" hidden></paper-tooltip>
100 </div> 107 </div>
101 </template> 108 </template>
102 </test-fixture> 109 </test-fixture>
103 110
104 <test-fixture id="manual-mode"> 111 <test-fixture id="manual-mode">
105 <template> 112 <template>
106 <div> 113 <div>
107 <div id="target"></div> 114 <div id="target"></div>
108 <paper-tooltip for="target" manual-mode>Text</paper-tooltip> 115 <paper-tooltip for="target" manual-mode>Text</paper-tooltip>
109 </div> 116 </div>
110 </template> 117 </template>
111 </test-fixture> 118 </test-fixture>
112 119
113 <script> 120 <script>
(...skipping 254 matching lines...) Expand 10 before | Expand all | Expand 10 after
368 375
369 f.removeChild(tooltip); 376 f.removeChild(tooltip);
370 377
371 setTimeout(function() { 378 setTimeout(function() {
372 // No more listener means no more calling show. 379 // No more listener means no more calling show.
373 MockInteractions.focus(target); 380 MockInteractions.focus(target);
374 expect(tooltip.show.callCount).to.be.equal(2); 381 expect(tooltip.show.callCount).to.be.equal(2);
375 done(); 382 done();
376 }, 200); 383 }, 200);
377 }); 384 });
378 385
379 test('tooltip ignores events in manual-mode', function() { 386 test('tooltip ignores events in manual-mode', function() {
380 var f = fixture('manual-mode'); 387 var f = fixture('manual-mode');
381 388
382 var tooltip = f.querySelector('paper-tooltip'); 389 var tooltip = f.querySelector('paper-tooltip');
383 assert.isTrue(tooltip.manualMode); 390 assert.isTrue(tooltip.manualMode);
384 391
385 tooltip.show(); 392 tooltip.show();
386 assert.isTrue(tooltip._showing); 393 assert.isTrue(tooltip._showing);
387 394
388 sinon.spy(tooltip, 'hide'); 395 sinon.spy(tooltip, 'hide');
389 396
390 tooltip.fire('mouseenter'); 397 tooltip.fire('mouseenter');
391 398
392 var target = f.querySelector('#target'); 399 var target = f.querySelector('#target');
393 target.dispatchEvent(new CustomEvent('mouseenter')); 400 target.dispatchEvent(new CustomEvent('mouseenter'));
394 target.dispatchEvent(new CustomEvent('focus')); 401 target.dispatchEvent(new CustomEvent('focus'));
395 target.dispatchEvent(new CustomEvent('mouseleave')); 402 target.dispatchEvent(new CustomEvent('mouseleave'));
396 target.dispatchEvent(new CustomEvent('blur')); 403 target.dispatchEvent(new CustomEvent('blur'));
397 target.dispatchEvent(new CustomEvent('tap')); 404 target.dispatchEvent(new CustomEvent('tap'));
398 405
399 expect(tooltip.hide.callCount).to.be.equal(0); 406 expect(tooltip.hide.callCount).to.be.equal(0);
400 }); 407 });
401 408
402 test('changing manual-mode toggles event listeners', function() { 409 test('changing manual-mode toggles event listeners', function() {
403 var f = fixture('manual-mode'); 410 var f = fixture('manual-mode');
404 411
405 var tooltip = f.querySelector('paper-tooltip'); 412 var tooltip = f.querySelector('paper-tooltip');
406 assert.isTrue(tooltip.manualMode); 413 assert.isTrue(tooltip.manualMode);
407 414
408 sinon.spy(tooltip, '_addListeners'); 415 sinon.spy(tooltip, '_addListeners');
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after
473 // tooltip is 14px below. 480 // tooltip is 14px below.
474 expect(contentRect.left).to.be.equal((100 - 70)/2); 481 expect(contentRect.left).to.be.equal((100 - 70)/2);
475 expect(contentRect.top).to.be.equal(20 + 14); 482 expect(contentRect.top).to.be.equal(20 + 14);
476 483
477 // Also check the math, just in case. 484 // Also check the math, just in case.
478 expect(contentRect.left).to.be.equal((divRect.width - contentRect.width) /2); 485 expect(contentRect.left).to.be.equal((divRect.width - contentRect.width) /2);
479 expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset); 486 expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset);
480 }); 487 });
481 }); 488 });
482 489
490 suite('tooltip is inside a custom element with content', function() {
491 var f, tooltip, target;
492
493 setup(function() {
494 f = fixture('custom-with-content');
495 target = f.$.icon;
496 tooltip = f.$.iconTooltip;
497 });
498
499 test('tooltip is shown when target is focused', function() {
500 var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
501 assert.isTrue(isHidden(actualTooltip));
502
503 MockInteractions.focus(target);
504 assert.isFalse(isHidden(actualTooltip));
505 });
506
507 test('tooltip is positioned correctly', function() {
508 var actualTooltip = Polymer.dom(tooltip.root).querySelector('#tooltip');
509 assert.isTrue(isHidden(actualTooltip));
510
511 MockInteractions.focus(target);
512 assert.isFalse(isHidden(actualTooltip));
513
514 var divRect = target.getBoundingClientRect();
515 expect(divRect.width).to.be.equal(100);
516 expect(divRect.height).to.be.equal(20);
517
518 var contentRect = tooltip.getBoundingClientRect();
519 expect(contentRect.width).to.be.equal(70);
520 expect(contentRect.height).to.be.equal(30);
521
522 // The target div width is 100, and the tooltip width is 70, and
523 // it's centered. The height of the target div is 20, and the
524 // tooltip is 14px below.
525 expect(contentRect.left).to.be.equal((100 - 70)/2);
526 expect(contentRect.top).to.be.equal(20 + 14);
527
528 // Also check the math, just in case.
529 expect(contentRect.left).to.be.equal((divRect.width - contentRect.width) /2);
530 expect(contentRect.top).to.be.equal(divRect.height + tooltip.offset);
531 });
532 });
533
483 suite('a11y', function() { 534 suite('a11y', function() {
484 test('has aria role "tooltip"', function() { 535 test('has aria role "tooltip"', function() {
485 var f = fixture('basic'); 536 var f = fixture('basic');
486 var tooltip = f.querySelector('paper-tooltip'); 537 var tooltip = f.querySelector('paper-tooltip');
487 538
488 assert.isTrue(tooltip.getAttribute('role') == 'tooltip'); 539 assert.isTrue(tooltip.getAttribute('role') == 'tooltip');
489 }); 540 });
490 541
491 var ignoredRules = ['roleTooltipRequiresDescribedby']; 542 var ignoredRules = ['roleTooltipRequiresDescribedby'];
492 543
493 a11ySuite('basic', ignoredRules); 544 a11ySuite('basic', ignoredRules);
494 a11ySuite('fitted', ignoredRules); 545 a11ySuite('fitted', ignoredRules);
495 a11ySuite('no-text', ignoredRules); 546 a11ySuite('no-text', ignoredRules);
496 a11ySuite('dynamic', ignoredRules); 547 a11ySuite('dynamic', ignoredRules);
497 a11ySuite('custom', ignoredRules); 548 a11ySuite('custom', ignoredRules);
498 }); 549 });
499 </script> 550 </script>
500 </body> 551 </body>
501 </html> 552 </html>
OLDNEW
« no previous file with comments | « third_party/polymer/components/paper-tooltip/paper-tooltip.html ('k') | third_party/polymer/components/paper-tooltip/test/test-icon.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698