Merge pull request #15 from PolymerElements/fix-inline-positioning-af…

…ter-reset Fix inline positioning after refit
PolymerElements · Jun 23, 2015 · f552ead · f552ead
2 parents 87dff23 + 726cca8
commit f552ead
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/iron-fit-behavior.html b/iron-fit-behavior.html
@@ -122,6 +122,10 @@
       var target = window.getComputedStyle(this);
       var sizer = window.getComputedStyle(this.sizingTarget);
       this._fitInfo = {
+        inlineStyle: {
+          top: this.style.top || '',
+          left: this.style.left || ''
+        },
         positionedBy: {
           vertically: target.top !== 'auto' ? 'top' : (target.bottom !== 'auto' ?
             'bottom' : null),
@@ -149,11 +153,11 @@
     resetFit: function() {
       if (!this._fitInfo || !this._fitInfo.sizedBy.height) {
         this.sizingTarget.style.maxHeight = '';
-        this.style.top = '';
+        this.style.top = this._fitInfo ? this._fitInfo.inlineStyle.top : '';
       }
       if (!this._fitInfo || !this._fitInfo.sizedBy.width) {
         this.sizingTarget.style.maxWidth = '';
-        this.style.left = '';
+        this.style.left = this._fitInfo ? this._fitInfo.inlineStyle.left : '';
       }
       if (this._fitInfo) {
         this.style.position = this._fitInfo.positionedBy.css;

diff --git a/test/iron-fit-behavior.html b/test/iron-fit-behavior.html
@@ -120,7 +120,7 @@
 
     <test-fixture id="inline-positioned-xy">
       <template>
-        <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;right:100px;bottom:100px;">
+        <test-fit auto-fit-on-attach class="sized-x sized-y" style="position:absolute;left:100px;top:100px;">
           Sized (x/y), positioned/positioned
         </test-fit>
       </template>
@@ -170,6 +170,7 @@
           var rect = el.getBoundingClientRect();
           assert.equal(rect.top, 100, 'top is unset');
           assert.equal(rect.left, 100, 'left is unset');
+
         });
 
         test('inline positioned element is not re-positioned', function() {
@@ -178,15 +179,21 @@
           // need to measure document.body here because mocha sets a min-width on html,body, and
           // the element is positioned wrt to that by css
           var bodyRect = document.body.getBoundingClientRect();
-          assert.equal(rect.top, bodyRect.height - rect.height - 100, 'top is unset');
-          assert.equal(rect.left, bodyRect.width - rect.width - 100, 'left is unset');
+          assert.equal(rect.top, 100, 'top is unset');
+          assert.equal(rect.left, 100, 'left is unset');
+
+          el.refit();
+
+          rect = el.getBoundingClientRect();
+          assert.equal(rect.top, 100, 'top is unset after refit');
+          assert.equal(rect.left, 100, 'left is unset after refit');
+
         });
 
         test('position property is preserved after', function() {
           var el = fixture('absolute');
           assert.equal(getComputedStyle(el).position, 'absolute', 'position:absolute is preserved');
-        })
-
+        });
       });
 
       suite('fit to window', function() {