Handle middle/center combo (#90)

* Position when horizontal/verticalAlign defined * handle middle/center combo, add tests * fix travis * npm run format
PolymerElements · May 16, 2018 · 95cf674 · 95cf674
1 parent ec88a7b
commit 95cf674
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -16,7 +16,7 @@ env:
         L4lSnuQZDY+YcXYzBZSRKjJJ1rZf18Lc/8YDgQPfkMkAItrRHGR8vblBoKiPAmtvgNxztcpZxAXTiDy1vAeVv54QnX9b1JsuOs7rrQxB4BS04Dj7LdT6DDu1p/V09MJBN11lzLVxgpxljbumwGWE4gfpDl2+rjbBt7cRV5VkVnE=
     - secure: >-
         H7dHZ9FQvJszK2UMNZJiZmzOPET3muO/XvlkUc1x3KcUlV5/tD/404V05XfFMowH7DavHFYleZkb89deYjq9PHncO9c4bp4SHD7HKN4FaGyhzfpXjg66v3dZH/OcERjaas337uUE2jo/x1jCq4HJCz2bMVh+bvd4du1C/2OWarc=
-node_js: stable
+node_js: '9'
 addons:
   firefox: latest
   apt:

diff --git a/iron-fit-behavior.html b/iron-fit-behavior.html
@@ -232,8 +232,7 @@
      * @private
      */
     get __shouldPosition() {
-      return (this.horizontalAlign || this.verticalAlign) &&
-          (this.horizontalAlign !== 'center' || this.verticalAlign !== 'middle');
+      return (this.horizontalAlign || this.verticalAlign) && this.positionTarget;
     },
 
     attached: function() {
@@ -629,6 +628,17 @@
         });
       }
 
+      if (vAlign === 'middle' && hAlign === 'center') {
+        positions.push({
+          verticalAlign: 'middle',
+          horizontalAlign: 'center',
+          top: positionRect.top - sizeNoMargins.height / 2 +
+              positionRect.height / 2 + this.verticalOffset,
+          left: positionRect.left - sizeNoMargins.width / 2 +
+              positionRect.width / 2 + this.horizontalOffset
+        });
+      }
+
       var position;
       for (var i = 0; i < positions.length; i++) {
         var candidate = positions[i];
@@ -676,4 +686,4 @@
     }
 
   };
-</script>
+</script>
diff --git a/test/iron-fit-behavior.html b/test/iron-fit-behavior.html
@@ -1337,6 +1337,25 @@
               });
         });
 
+        suite(
+            'when horizontalAlign is center and verticalAling is middle', function() {
+              test('element is aligned to the positionTarget center', function() {
+                el.horizontalAlign = 'center';
+                el.verticalAlign = 'middle';
+                el.refit();
+                var rect = el.getBoundingClientRect();
+                assert.equal(
+                    rect.left,
+                    parentRect.left + (parentRect.width - rect.width) / 2,
+                    'left ok');
+                assert.equal(
+                    rect.top,
+                    parentRect.top + (parentRect.height - rect.height) / 2,
+                    'top ok');
+                assert.equal(rect.width, elRect.width, 'no cropping');
+              });
+            });
+
         suite('prefer horizontal overlap to vertical overlap', function() {
           setup(function() {
             el.noOverlap = true;