From 858cdbc220011e4794314df657772b58a2a0bb3c Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Tue, 27 Jul 2021 20:34:26 -0700
Subject: [PATCH 1/2] Polyfill legacy offsetParent behavior

The spec for offsetParent was changed here:
https://github.com/w3c/csswg-drafts/issues/159

This change was implemented in Safari and Firefox, but hasn't been
implemented in Chrome, until now:
https://chromium-review.googlesource.com/c/chromium/src/+/2775208

When I made this change in chrome, it broke some chrome:// internal
pages which use paper-tooltip:
https://bugs.chromium.org/p/chromium/issues/detail?id=1200750
https://bugs.chromium.org/p/chromium/issues/detail?id=1202105

This patch fixes paper-tooltip to use the new offsetParent behavior by
adding a polyfill for the old offsetParent behavior. The issues reported
in the above bugs would also occur in Firefox and Safari, but nobody
ever found out because those chrome:// pages were obviously never tested
in Firefox or Safari.
---
 paper-tooltip.js | 46 +++++++++++++++++++++++++++++++++++++++--
 test/basic.html  | 53 ++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/paper-tooltip.js b/paper-tooltip.js
index 220ae34..af1f958 100644
--- a/paper-tooltip.js
+++ b/paper-tooltip.js
@@ -435,13 +435,16 @@ Polymer({
    * @return {void}
    */
   updatePosition: function() {
-    if (!this._target || !this.offsetParent)
+    if (!this._target)
+      return;
+    var offsetParent = this._composedOffsetParent();
+    if (!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 parentRect = offsetParent.getBoundingClientRect();
     var targetRect = this._target.getBoundingClientRect();
     var thisRect = this.getBoundingClientRect();
     var horizontalCenterOffset = (targetRect.width - thisRect.width) / 2;
@@ -587,5 +590,44 @@ Polymer({
     }
     this.unlisten(this.$.tooltip, 'animationend', '_onAnimationEnd');
     this.unlisten(this, 'mouseenter', 'hide');
+  },
+
+  /**
+   * Polyfills the old offsetParent behavior from before the spec was changed:
+   * https://github.com/w3c/csswg-drafts/issues/159
+   */
+  _composedOffsetParent: function() {
+    let offsetParent = this.offsetParent;
+    let ancestor = this;
+    let foundInsideSlot = false;
+    while (ancestor && ancestor !== offsetParent) {
+      const assignedSlot = ancestor.assignedSlot;
+      if (assignedSlot) {
+        let newOffsetParent = assignedSlot.offsetParent;
+
+        if (getComputedStyle(assignedSlot)['display'] === 'contents') {
+          const hadStyleAttribute = assignedSlot.hasAttribute('style');
+          const oldDisplay = assignedSlot.style.display;
+          assignedSlot.style.display = getComputedStyle(ancestor).display;
+
+          newOffsetParent = assignedSlot.offsetParent;
+
+          assignedSlot.style.display = oldDisplay;
+          if (!hadStyleAttribute) {
+            assignedSlot.removeAttribute('style');
+          }
+        }
+
+        ancestor = assignedSlot;
+        if (offsetParent !== newOffsetParent) {
+          offsetParent = newOffsetParent;
+          foundInsideSlot = true;
+        }
+      } else if (ancestor.host && foundInsideSlot) {
+        break;
+      }
+      ancestor = ancestor.host || ancestor.parentNode;
+    }
+    return offsetParent;
   }
 });
diff --git a/test/basic.html b/test/basic.html
index fe86f40..2b22680 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -118,6 +118,17 @@
     </template>
   </test-fixture>
 
+  <test-fixture id="offset-parent-new-behavior">
+    <template>
+      <div id=container>
+        <div>
+          <div id=target style="height: 100px; width: 100px; background-color: red"></div>
+          <paper-tooltip for="target">tooltip text</paper-tooltip>
+        </div>
+      </div>
+    </template>
+  </test-fixture>
+
   <script type="module">
     import '@polymer/iron-test-helpers/mock-interactions.js';
     import '../paper-tooltip.js';
@@ -492,6 +503,48 @@
         expect(tooltip._removeListeners.callCount).to.be.equal(1);
         expect(tooltip._addListeners.callCount).to.be.equal(1);
       });
+
+      test('offsetParent new spec behavior', function() {
+        var f = fixture('offset-parent-new-behavior');
+        var target = f.querySelector('#target');
+        var tooltip = f.querySelector('paper-tooltip');
+
+        var shadowRoot = f.attachShadow({mode: 'open'});
+        shadowRoot.innerHTML = `
+          <style>
+            .dialog {
+              display: block;
+              position: absolute;
+              left: 0px;
+              right: 0px;
+              width: 100px;
+              margin: auto;
+            }
+          </style>
+          <div class=dialog>
+            <slot></slot>
+          </div>
+        `;
+
+        var actualTooltip = dom(tooltip.root).querySelector('#tooltip');
+        assert.isTrue(isHidden(actualTooltip));
+
+        MockInteractions.focus(target);
+        assert.isFalse(isHidden(actualTooltip));
+
+        debugger;
+
+        var divRect = target.getBoundingClientRect();
+        expectToBasicallyEqual(divRect.width, 100);
+        expectToBasicallyEqual(divRect.height, 100);
+
+        var contentRect = tooltip.getBoundingClientRect();
+        expectToBasicallyEqual(contentRect.width, 70);
+        expectToBasicallyEqual(contentRect.height, 30);
+
+        expectToBasicallyEqual(contentRect.left, 415);
+        expectToBasicallyEqual(contentRect.top, 114);
+      });
     });
 
     suite('tooltip is inside a custom element', function() {

From 5ee9f6294e0075674b8088a8478ab157fd5adc77 Mon Sep 17 00:00:00 2001
From: Joey Arhar <jarhar@chromium.org>
Date: Fri, 30 Jul 2021 15:13:43 -0700
Subject: [PATCH 2/2] Add suggestions

---
 paper-tooltip.js |  4 ++++
 test/basic.html  | 11 +++++++----
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/paper-tooltip.js b/paper-tooltip.js
index af1f958..c24892f 100644
--- a/paper-tooltip.js
+++ b/paper-tooltip.js
@@ -598,6 +598,10 @@ Polymer({
    */
   _composedOffsetParent: function() {
     let offsetParent = this.offsetParent;
+    if (window.ShadyDOM && window.ShadyDOM.inUse) {
+      return offsetParent;
+    }
+
     let ancestor = this;
     let foundInsideSlot = false;
     while (ancestor && ancestor !== offsetParent) {
diff --git a/test/basic.html b/test/basic.html
index 2b22680..bef5bca 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -532,8 +532,6 @@
         MockInteractions.focus(target);
         assert.isFalse(isHidden(actualTooltip));
 
-        debugger;
-
         var divRect = target.getBoundingClientRect();
         expectToBasicallyEqual(divRect.width, 100);
         expectToBasicallyEqual(divRect.height, 100);
@@ -542,8 +540,13 @@
         expectToBasicallyEqual(contentRect.width, 70);
         expectToBasicallyEqual(contentRect.height, 30);
 
-        expectToBasicallyEqual(contentRect.left, 415);
-        expectToBasicallyEqual(contentRect.top, 114);
+        // Check for correct 'bottom' positioning: the horizontal center of the
+        // target and tooltip are aligned, and the top of the tooltip is
+        // `offset` pixels below the bottom of the target.
+        expectToBasicallyEqual(
+            contentRect.left + contentRect.width / 2,
+            divRect.left + divRect.width / 2);
+        expectToBasicallyEqual(contentRect.top - divRect.bottom, tooltip.offset);
       });
     });