Fix unit tests and bug applying bgcolor with relayout

Fixed unit tests by updating the expectations as appropriate to match
the changed logic in Pull Request #7109. This revealed a bug where
background color changes applied using `Plotly.relayout()` were missed.
This bug was also fixed in this change in order to get all unit tests,
as updated, to pass.

Author: martian111

src/components/modebar/modebar.js

@@ -54,8 +54,12 @@ proto.update = function(graphInfo, buttons) {
     }
 
     var style = fullLayout.modebar;
-    var bgSelector = context.displayModeBar === 'hover' ? '.js-plotly-plot .plotly:hover ' : '';
 
+    // set style for modebar-group directly instead of inline CSS that's not allowed by strict CSP's
+    var groupSelector = '#' + modeBarId + ' .modebar-group';
+    document.querySelectorAll(groupSelector).forEach(function(group) {
+        group.style.backgroundColor = style.bgcolor;
+    });
     // set styles on hover using event listeners instead of inline CSS that's not allowed by strict CSP's
     Lib.setStyleOnHover('#' + modeBarId + ' .modebar-btn', '.active', '.icon path', 'fill: ' + style.activecolor, 'fill: ' + style.color);
 

test/jasmine/tests/modebar_test.js

@@ -1544,33 +1544,6 @@ describe('ModeBar', function() {
             expect(style.fill).toBe(color);
         }
 
-        function getStyleRule() {
-            var uid = gd._fullLayout._uid;
-            var ownerNode = document.getElementById('plotly.js-style-modebar-' + uid);
-            var styleSheets = document.styleSheets;
-            for(var i = 0; i < styleSheets.length; i++) {
-                var ss = styleSheets[i];
-                if(ss.ownerNode === ownerNode) return ss;
-            }
-        }
-
-        it('create an associated style element and destroy it on purge', function(done) {
-            var styleSelector, style;
-            Plotly.newPlot(gd, [], {})
-            .then(function() {
-                styleSelector = 'style[id*="modebar-' + gd._fullLayout._uid + '"]';
-
-                style = document.querySelector(styleSelector);
-                expect(style).toBeTruthy();
-            })
-            .then(function() {
-                Plotly.purge(gd);
-                style = document.querySelector(styleSelector);
-                expect(style).toBeNull();
-            })
-            .then(done, done.fail);
-        });
-
         it('changes icon colors', function(done) {
             Plotly.newPlot(gd, [], {modebar: { color: colors[0]}})
             .then(function() {
@@ -1602,14 +1575,12 @@ describe('ModeBar', function() {
             Plotly.newPlot(gd, [], {modebar: { bgcolor: colors[0]}})
             .then(function() {
                 style = window.getComputedStyle(gd._fullLayout._modeBar.element.querySelector('.modebar-group'));
-                expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0)');
-                expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[0]);
+                expect(style.backgroundColor).toBe(colors[0]);
             })
             .then(function() { return Plotly.relayout(gd, 'modebar.bgcolor', colors[1]); })
             .then(function() {
                 style = window.getComputedStyle(gd._fullLayout._modeBar.element.querySelector('.modebar-group'));
-                expect(style.backgroundColor).toBe('rgba(0, 0, 0, 0)');
-                expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[1]);
+                expect(style.backgroundColor).toBe(colors[1]);
             })
             .then(done, done.fail);
         });
@@ -1619,13 +1590,11 @@ describe('ModeBar', function() {
             .then(function() {
                 style = window.getComputedStyle(gd._fullLayout._modeBar.element.querySelector('.modebar-group'));
                 expect(style.backgroundColor).toBe(colors[0]);
-                expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[0]);
             })
             .then(function() { return Plotly.relayout(gd, 'modebar.bgcolor', colors[1]); })
             .then(function() {
                 style = window.getComputedStyle(gd._fullLayout._modeBar.element.querySelector('.modebar-group'));
                 expect(style.backgroundColor).toBe(colors[1]);
-                expect(getStyleRule().rules[3].style.backgroundColor).toBe(colors[1]);
             })
             .then(done, done.fail);
         });