add in-house getBBox test asset:

- needed to determine bounding box of clipped element,
  as the stock SVG getBBox method does not take clip path
  into consideration
- use it legend scroll test to determine the height of the legend

Author: etpinard

test/jasmine/assets/get_bbox.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var d3 = require('d3');
+
+
+// In-house implementation of SVG getBBox that takes clip paths into account
+module.exports = function getBBox(element) {
+    var elementBBox = element.getBBox();
+
+    var s = d3.select(element);
+    var clipPathAttr = s.attr('clip-path');
+
+    if(!clipPathAttr) return elementBBox;
+
+    // only supports 'url(#<id>)' at the moment
+    var clipPathId = clipPathAttr.substring(5, clipPathAttr.length-1);
+    var clipPath = d3.select('#' + clipPathId).node();
+
+    return minBBox(elementBBox, clipPath.getBBox());
+};
+
+function minBBox(bbox1, bbox2) {
+    var keys = ['x', 'y', 'width', 'height'];
+    var out = {};
+
+    function min(attr) {
+        return Math.min(bbox1[attr], bbox2[attr]);
+    }
+
+    keys.forEach(function(key) {
+        out[key] = min(key);
+    });
+
+    return out;
+}

test/jasmine/tests/legend_scroll_test.js

@@ -1,11 +1,14 @@
 var Plotly = require('@lib/index');
 var createGraph = require('../assets/create_graph_div');
 var destroyGraph = require('../assets/destroy_graph_div');
+var getBBox = require('../assets/get_bbox');
 var mock = require('../../image/mocks/legend_scroll.json');
 
+
 describe('The legend', function() {
-    var gd,
-        legend;
+    'use strict';
+
+    var gd, legend;
 
     describe('when plotted with many traces', function() {
         beforeEach(function() {
@@ -17,7 +20,7 @@ describe('The legend', function() {
         afterEach(destroyGraph);
 
         it('should not exceed plot height', function() {
-            var legendHeight = legend.getAttribute('height'),
+            var legendHeight = getBBox(legend).height,
                 plotHeight = gd._fullLayout.height - gd._fullLayout.margin.t - gd._fullLayout.margin.b;
 
             expect(+legendHeight).toBe(plotHeight);
@@ -53,7 +56,7 @@ describe('The legend', function() {
 
         it('should scale the scrollbar movement from top to bottom', function() {
             var scrollBar = legend.getElementsByClassName('scrollbar')[0],
-                legendHeight = legend.getAttribute('height');
+                legendHeight = getBBox(legend).height;
 
             // The scrollbar is 20px tall and has 4px margins