add test for legends with title and scroll - fix title scroll

src/components/legend/draw.js

@@ -63,20 +63,20 @@ module.exports = function draw(gd) {
         .call(Color.fill, opts.bgcolor)
         .style('stroke-width', opts.borderwidth + 'px');
 
+    var scrollBox = Lib.ensureSingle(legend, 'g', 'scrollbox');
 
     var title = opts.title;
     opts._titleWidth = 0;
     opts._titleHeight = 0;
     if(title.text) {
-        var titleEl = Lib.ensureSingle(legend, 'text', 'legendtitletext');
+        var titleEl = Lib.ensureSingle(scrollBox, 'text', 'legendtitletext');
         titleEl.attr('text-anchor', 'start')
             .classed('user-select-none', true)
             .call(Drawing.font, title.font)
             .text(title.text);
 
-        textLayout(titleEl, legend, gd); // handle mathjax or multi-line text and compute title height
+        textLayout(titleEl, scrollBox, gd); // handle mathjax or multi-line text and compute title height
     }
-    var scrollBox = Lib.ensureSingle(legend, 'g', 'scrollbox');
 
     var scrollBar = Lib.ensureSingle(legend, 'rect', 'scrollbar', function(s) {
         s.attr(constants.scrollBarEnterAttrs)

test/image/mocks/legend_scroll_with_title.json

@@ -0,0 +1,132 @@
+{
+  "data": [
+    {
+      "x": [1,2,3],
+      "y": [1,2,3],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [2,3,4],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [3,4,5],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [4,5,6],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [5,6,7],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [6,7,8],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [7,8,9],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [8,9,10],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [9,10,11],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [10,11,12],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [11,12,13],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [12,13,14],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [13,14,15],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [14,15,16],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [15,16,17],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [16,17,18],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [17,18,19],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [18,19,20],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [19,20,21],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [20,21,22],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [21,22,23],
+      "type": "scatter"
+    },
+    {
+      "x": [1,2,3],
+      "y": [22,23,24],
+      "type": "bar"
+    },
+    {
+      "x": [1,2,3],
+      "y": [23,24,25],
+      "type": "scatter"
+    }
+  ],
+  "layout": {
+    "legend": {
+      "bordercolor": "#000000",
+      "borderwidth": 1,
+      "bgcolor": "#eeffee",
+      "title": {
+        "text": "<b>Legend title</b>",
+        "font": {
+          "size": 20
+        }
+      }
+    }
+  }
+}