WIP - Pinpoint - New Page.

third_party/polymer/components/paper-tooltip/test/basic.html

Index: third_party/polymer/components/paper-tooltip/test/basic.html
diff --git a/third_party/polymer/components/paper-tooltip/test/basic.html b/third_party/polymer/components/paper-tooltip/test/basic.html
index 2d68931a2248cebdfdbd9d6ace0c4c9bd3e793c0..45e386b0dcc16db34d629161e2f6219c4a36b20b 100644
--- a/third_party/polymer/components/paper-tooltip/test/basic.html
+++ b/third_party/polymer/components/paper-tooltip/test/basic.html
@@ -22,6 +22,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   <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>
@@ -92,6 +93,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     </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>
@@ -100,7 +107,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       </div>
     </template>
   </test-fixture>
-  
+
   <test-fixture id="manual-mode">
     <template>
       <div>
@@ -375,27 +382,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
           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);
       });
 
@@ -480,6 +487,50 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
       });
     });
 
+    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');