fix legend valign middle and lock down with test

Author: antoinerg

src/components/legend/style.js

@@ -30,7 +30,7 @@ module.exports = function style(s, gd) {
         if(gd._fullLayout.legend.valign === 'top') valignFactor = 1.0;
         if(gd._fullLayout.legend.valign === 'bottom') valignFactor = -1.0;
         var markerOffsetY = valignFactor * (0.5 * (d[0].lineHeight - d[0].height + 3));
-        if(markerOffsetY) layers.attr('transform', 'translate(0,' + markerOffsetY + ')');
+        if(!isNaN(markerOffsetY)) layers.attr('transform', 'translate(0,' + markerOffsetY + ')');
 
         var fill = layers
             .selectAll('g.legendfill')

test/jasmine/tests/legend_test.js

@@ -665,6 +665,43 @@ describe('legend relayout update', function() {
         .catch(failTest)
         .then(done);
     });
+
+    describe('should update legend valign', function() {
+        var mock = require('@mocks/legend_valign_top.json');
+        var gd;
+
+        beforeEach(function() {
+            gd = createGraphDiv();
+        });
+        afterEach(destroyGraphDiv);
+
+        function markerOffsetY() {
+            var translateY = d3.select('.legend .traces .layers').attr('transform').match(/translate\(\d+,(-?\d+)\)/)[1];
+            return parseFloat(translateY);
+        }
+
+        it('it should translate markers', function(done) {
+            var mockCopy = Lib.extendDeep({}, mock);
+
+            var top, middle, bottom;
+            Plotly.plot(gd, mockCopy.data, mockCopy.layout)
+            .then(function() {
+                top = markerOffsetY();
+                return Plotly.relayout(gd, 'legend.valign', 'middle');
+            })
+            .then(function() {
+                middle = markerOffsetY();
+                expect(middle).toBeGreaterThan(top);
+                return Plotly.relayout(gd, 'legend.valign', 'bottom');
+            })
+            .then(function() {
+                bottom = markerOffsetY();
+                expect(bottom).toBeGreaterThan(middle);
+            })
+            .catch(failTest)
+            .then(done);
+        });
+    });
 });
 
 describe('legend orientation change:', function() {