apply no-need-for-<rect.bg> optimization to all cartesian subplots

... but do draw <rect.bg> when either plot or paper bgcolor
    are semi-transparent.

Author: etpinard

src/plot_api/subroutines.js

@@ -125,7 +125,8 @@ function lsInner(gd) {
     // activate mode just for large splom (which benefit the most from this
     // optimization), but this could apply to all cartesian subplots.
     var noNeedForBg = (
-        fullLayout._hasOnlyLargeSploms &&
+        Color.opacity(fullLayout.paper_bgcolor) === 1 &&
+        Color.opacity(fullLayout.plot_bgcolor) === 1 &&
         fullLayout.paper_bgcolor === fullLayout.plot_bgcolor
     );
 

test/jasmine/assets/custom_assertions.js

@@ -246,9 +246,6 @@ exports.assertElemInside = function(elem, container, msg) {
  * quick plot area dimension check: test width and/or height of the inner
  * plot area (single subplot) to verify that the margins are as expected
  *
- * Note: if you use margin.pad on the plot, width and height will be larger
- * than you expected by twice that padding.
- *
  * opts can have keys (all optional):
  *   width (exact width match)
  *   height (exact height match)
@@ -261,7 +258,7 @@ exports.assertPlotSize = function(opts, msg) {
     var widthLessThan = opts.widthLessThan;
     var heightLessThan = opts.heightLessThan;
 
-    var plotBB = d3.select('.bglayer .bg').node().getBoundingClientRect();
+    var plotBB = d3.select('.plotclip > rect').node().getBoundingClientRect();
     var actualWidth = plotBB.width;
     var actualHeight = plotBB.height;
 

test/jasmine/tests/cartesian_test.js

@@ -520,7 +520,8 @@ describe('subplot creation / deletion:', function() {
             yaxis2: {domain: [0.5, 1], anchor: 'x2'},
             yaxis3: {overlaying: 'y'},
             // legend makes its own .bg rect - delete so we can ignore that here
-            showlegend: false
+            showlegend: false,
+            plot_bgcolor: '#d3d3d3'
         })
         .then(function() {
             // touching but not overlapping: all backgrounds are in back
@@ -553,6 +554,74 @@ describe('subplot creation / deletion:', function() {
         .then(done);
     });
 
+    it('puts not have backgrounds nodes when plot and paper color match', function(done) {
+        Plotly.plot(gd, [
+            {y: [1, 2, 3]},
+            {y: [2, 3, 1], xaxis: 'x2', yaxis: 'y2'},
+            {y: [3, 1, 2], yaxis: 'y3'}
+        ], {
+            xaxis: {domain: [0, 0.5]},
+            xaxis2: {domain: [0.5, 1], anchor: 'y2'},
+            yaxis: {domain: [0, 1]},
+            yaxis2: {domain: [0.5, 1], anchor: 'x2'},
+            yaxis3: {overlaying: 'y'},
+            // legend makes its own .bg rect - delete so we can ignore that here
+            showlegend: false,
+            plot_bgcolor: 'white',
+            paper_bgcolor: 'white'
+        })
+        .then(function() {
+            // touching but not overlapping, matching colors -> no <rect.bg>
+            checkBGLayers(0, 0, ['xy', 'x2y2', 'xy3']);
+
+            // now add a slight overlap: that's enough to put x2y2 in front
+            return Plotly.relayout(gd, {'xaxis2.domain': [0.49, 1]});
+        })
+        .then(function() {
+            // need to draw one backgroud <rect>
+            checkBGLayers(0, 1, ['xy', 'x2y2', 'xy3']);
+
+            // x ranges overlap, but now y ranges are disjoint
+            return Plotly.relayout(gd, {'xaxis2.domain': [0, 1], 'yaxis.domain': [0, 0.5]});
+        })
+        .then(function() {
+            // disjoint, matching colors -> no <rect.bg>
+            checkBGLayers(0, 0, ['xy', 'x2y2', 'xy3']);
+
+            // regular inset
+            return Plotly.relayout(gd, {
+                'xaxis.domain': [0, 1],
+                'yaxis.domain': [0, 1],
+                'xaxis2.domain': [0.6, 0.9],
+                'yaxis2.domain': [0.6, 0.9]
+            });
+        })
+        .then(function() {
+            // need to draw one backgroud <rect>
+            checkBGLayers(0, 1, ['xy', 'x2y2', 'xy3']);
+
+            // change paper color
+            return Plotly.relayout(gd, 'paper_bgcolor', 'black');
+        })
+        .then(function() {
+            // need a backgroud <rect> on main subplot to distinguish plot from
+            // paper color
+            checkBGLayers(1, 1, ['xy', 'x2y2', 'xy3']);
+
+            // change bg colors to same semi-transparent color
+            return Plotly.relayout(gd, {
+                'paper_bgcolor': 'rgba(255,0,0,0.2)',
+                'plot_bgcolor': 'rgba(255,0,0,0.2)'
+            });
+        })
+        .then(function() {
+            // still need a <rect.bg> to get correct semi-transparent look
+            checkBGLayers(1, 1, ['xy', 'x2y2', 'xy3']);
+        })
+        .catch(failTest)
+        .then(done);
+    });
+
     it('should clear overlaid subplot trace layers on restyle', function(done) {
         var fig = Lib.extendDeep({}, require('@mocks/overlaying-axis-lines.json'));
 

test/jasmine/tests/splom_test.js

@@ -588,7 +588,7 @@ describe('Test splom interactions:', function() {
                 subplotCnt: 25,
                 innerSubplotNodeCnt: 17,
                 hasSplomGrid: false,
-                bgCnt: 25
+                bgCnt: 0
             });
 
             // make sure 'new' subplot layers are in order