Merge pull request #16 from PolymerElements/fitinto-center

fix centering an element in another element
PolymerElements · Jun 25, 2015 · 17ad03d · 17ad03d
2 parents f82ad74 + 9250245
commit 17ad03d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 3 deletions.
diff --git a/iron-fit-behavior.html b/iron-fit-behavior.html
@@ -91,6 +91,26 @@
       return fitHeight;
     },
 
+    get _fitLeft() {
+      var fitLeft;
+      if (this.fitInto === window) {
+        fitLeft = 0;
+      } else {
+        fitLeft = this.fitInto.getBoundingClientRect().left;
+      }
+      return fitLeft;
+    },
+
+    get _fitTop() {
+      var fitTop;
+      if (this.fitInto === window) {
+        fitTop = 0;
+      } else {
+        fitTop = this.fitInto.getBoundingClientRect().top;
+      }
+      return fitTop;
+    },
+
     attached: function() {
       if (this.autoFitOnAttach) {
         if (window.getComputedStyle(this).display === 'none') {
@@ -220,12 +240,12 @@
         this.style.position = 'fixed';
       }
       if (!this._fitInfo.positionedBy.vertically) {
-        var top = (this._fitHeight - this.offsetHeight) / 2;
+        var top = (this._fitHeight - this.offsetHeight) / 2 + this._fitTop;
         top -= this._fitInfo.margin.top;
         this.style.top = top + 'px';
       }
       if (!this._fitInfo.positionedBy.horizontally) {
-        var left = (this._fitWidth - this.offsetWidth) / 2;
+        var left = (this._fitWidth - this.offsetWidth) / 2 + this._fitLeft;
         left -= this._fitInfo.margin.left;
         this.style.left = left + 'px';
       }

diff --git a/test/iron-fit-behavior.html b/test/iron-fit-behavior.html
@@ -139,7 +139,7 @@
 
     <test-fixture id="constrain-target">
       <template>
-        <div class="constrain" style="position: fixed; top: 0; left: 0; width: 50vw; height: 50vh; border: 1px solid black;">
+        <div class="constrain" style="position: fixed; top: 20px; left: 100px; width: 50vw; height: 50vh; border: 1px solid black;">
           <test-fit auto-fit-on-attach class="el">
             <div>
               Auto center/center to parent element
@@ -331,6 +331,18 @@
           assert.isTrue(rect.height <= crect.height, 'height is less than or equal to fitInto height');
         });
 
+        test('element centers in another element', function() {
+          var constrain = fixture('constrain-target');
+          var el = Polymer.dom(constrain).querySelector('.el')
+          makeScrolling(el);
+          el.fitInto = constrain;
+          el.refit();
+          var rect = el.getBoundingClientRect();
+          var crect = constrain.getBoundingClientRect();
+          assert.closeTo(rect.left - crect.left - (crect.right - rect.right), 0, 5, 'centered horizontally in fitInto');
+          assert.closeTo(rect.top - crect.top - (crect.bottom - rect.bottom), 0, 5, 'centered vertically in fitInto');
+        });
+
       });
 
     </script>