fix ax automargin for multi-line ax titles

- automargin-multiline-titles and
  automargin-rangeslider-and-sidepush now push the
  bottom enough to make their axis title visible

Author: etpinard

src/components/rangeslider/helpers.js

@@ -9,7 +9,9 @@
 'use strict';
 
 var axisIDs = require('../../plots/cartesian/axis_ids');
+var svgTextUtils = require('../../lib/svg_text_utils');
 var constants = require('./constants');
+var LINE_SPACING = require('../../constants/alignment').LINE_SPACING;
 var name = constants.name;
 
 function isVisible(ax) {
@@ -42,15 +44,30 @@ exports.makeData = function(fullLayout) {
 };
 
 exports.autoMarginOpts = function(gd, ax) {
+    var fullLayout = gd._fullLayout;
     var opts = ax[name];
-    var bottomDepth = ax.side === 'bottom' ? ax._depth : 0;
+    var axLetter = ax._id.charAt(0);
+
+    var bottomDepth = 0;
+    var titleHeight = 0;
+    if(ax.side === 'bottom') {
+        bottomDepth = ax._depth;
+        if(ax.title.text !== fullLayout._dfltTitle[axLetter]) {
+            // as in rangeslider/draw.js
+            titleHeight = 1.5 * ax.title.font.size + 10 + opts._offsetShift;
+            // multi-line extra bump
+            var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
+            titleHeight += extraLines * ax.title.font.size * LINE_SPACING;
+        }
+    }
+
     return {
         x: 0,
         y: ax._counterDomainMin,
         l: 0,
         r: 0,
         t: 0,
-        b: opts._height + gd._fullLayout.margin.b + bottomDepth,
+        b: opts._height + bottomDepth + Math.max(fullLayout.margin.b, titleHeight),
         pad: constants.extraPad + opts._offsetShift * 2
     };
 };

src/lib/svg_text_utils.js

@@ -266,6 +266,7 @@ var SPLIT_TAGS = /(<[^<>]*>)/;
 var ONE_TAG = /<(\/?)([^ >]*)(\s+(.*))?>/i;
 
 var BR_TAG = /<br(\s+.*)?>/i;
+exports.BR_TAG_ALL = /<br(\s+.*)?>/gi;
 
 /*
  * style and href: pull them out of either single or double quotes. Also

src/plots/cartesian/axes.js

@@ -1934,9 +1934,11 @@ axes.drawOne = function(gd, ax, opts) {
                 ax.position :
                 ax._anchorAxis.domain[domainIndices[0]];
 
-            // TODO won't work for multi-line titles !!
             if(ax.title.text !== fullLayout._dfltTitle[axLetter]) {
-                push[s] += ax.title.font.size;
+                var extraLines = (ax.title.text.match(svgTextUtils.BR_TAG_ALL) || []).length;
+                push[s] += extraLines ?
+                    ax.title.font.size * (extraLines + 1) * LINE_SPACING :
+                    ax.title.font.size;
             }
 
             if(ax.mirror) {