Merge pull request #3765 from plotly/handle-base-href-in-gradient-url

Include baseUrl in gradient style references

Author: etpinard

src/components/drawing/index.js

@@ -332,7 +332,7 @@ drawing.gradient = function(sel, gd, gradientID, type, colorscale, prop) {
             });
         });
 
-    sel.style(prop, 'url(#' + fullID + ')')
+    sel.style(prop, getFullUrl(fullID, gd))
         .style(prop + '-opacity', null);
 };
 
@@ -1015,16 +1015,16 @@ function nodeHash(node) {
  * - context._exportedPlot {boolean}
  */
 drawing.setClipUrl = function(s, localId, gd) {
-    if(!localId) {
-        s.attr('clip-path', null);
-        return;
-    }
+    s.attr('clip-path', getFullUrl(localId, gd));
+};
+
+function getFullUrl(localId, gd) {
+    if(!localId) return null;
 
     var context = gd._context;
     var baseUrl = context._exportedPlot ? '' : (context._baseUrl || '');
-
-    s.attr('clip-path', 'url(\'' + baseUrl + '#' + localId + '\')');
-};
+    return 'url(\'' + baseUrl + '#' + localId + '\')';
+}
 
 drawing.getTranslate = function(element) {
     // Note the separator [^\d] between x and y in this regex

test/jasmine/tests/drawing_test.js

@@ -543,4 +543,34 @@ describe('gradients', function() {
         .catch(failTest)
         .then(done);
     });
+
+    it('should append window URL to gradient ref if <base> is present', function(done) {
+        var base = d3.select('body')
+            .append('base')
+            .attr('href', 'https://plot.ly');
+
+        Plotly.plot(gd, [{
+            type: 'heatmap',
+            x: [1, 2],
+            y: [2, 3],
+            z: [[1, 3], [2, 3]]
+        }])
+        .then(function() {
+            var cbfills = d3.select(gd).select('.cbfills > rect');
+            expect(cbfills.node().style.fill).toBe([
+                'url("',
+                window.location.href,
+                'g',
+                gd._fullLayout._uid,
+                '-cb',
+                gd._fullData[0].uid,
+                '")'
+            ].join(''));
+        })
+        .catch(failTest)
+        .then(function() {
+            base.remove();
+            done();
+        });
+    });
 });