stash base url on Drawing module object

... so that we don't have to traverse the DOM whenever
    we add a clipPath url 🐎

Author: etpinard

src/components/drawing/index.js

@@ -910,15 +910,21 @@ drawing.setClipUrl = function(s, localId) {
         return;
     }
 
-    var url = '#' + localId,
-        base = d3.select('base');
-
-    // add id to location href w/o hashes if any)
-    if(base.size() && base.attr('href')) {
-        url = window.location.href.split('#')[0] + url;
+    if(drawing.baseUrl === undefined) {
+        var base = d3.select('base');
+
+        // Stash base url once and for all!
+        // We may have to stash this elsewhere when
+        // we'll try to support for child windows
+        // more info -> https://github.com/plotly/plotly.js/issues/702
+        if(base.size() && base.attr('href')) {
+            drawing.baseUrl = window.location.href.split('#')[0];
+        } else {
+            drawing.baseUrl = '';
+        }
     }
 
-    s.attr('clip-path', 'url(' + url + ')');
+    s.attr('clip-path', 'url(' + drawing.baseUrl + '#' + localId + ')');
 };
 
 drawing.getTranslate = function(element) {

test/jasmine/tests/drawing_test.js

@@ -19,6 +19,9 @@ describe('Drawing', function() {
         afterEach(function() {
             this.svg.remove();
             this.g.remove();
+
+            // unstash base url from Drawing module object
+            delete Drawing.baseUrl;
         });
 
         it('should set the clip-path attribute', function() {
@@ -38,7 +41,6 @@ describe('Drawing', function() {
         });
 
         it('should append window URL to clip-path if <base> is present', function() {
-
             // append <base> with href
             var base = d3.select('body')
                 .append('base')

test/jasmine/tests/plot_interact_test.js

@@ -2,6 +2,7 @@ var d3 = require('d3');
 
 var Plotly = require('@lib/index');
 var Lib = require('@src/lib');
+var Drawing = require('@src/components/drawing');
 
 var createGraphDiv = require('../assets/create_graph_div');
 var destroyGraphDiv = require('../assets/destroy_graph_div');
@@ -551,6 +552,7 @@ describe('plot svg clip paths', function() {
             d3.selectAll('[clip-path]').each(function() {
                 var cp = d3.select(this).attr('clip-path');
 
+                expect(Drawing.baseUrl).toBe('');
                 expect(cp.substring(0, 5)).toEqual('url(#');
                 expect(cp.substring(cp.length - 1)).toEqual(')');
             });
@@ -560,6 +562,8 @@ describe('plot svg clip paths', function() {
     });
 
     it('should set clip path url to ids appended to window url', function(done) {
+        // unstash base url from Drawing module object
+        delete Drawing.baseUrl;
 
         // this case occurs in some past versions of AngularJS
         // https://github.com/angular/angular.js/issues/8934
@@ -577,11 +581,13 @@ describe('plot svg clip paths', function() {
             d3.selectAll('[clip-path]').each(function() {
                 var cp = d3.select(this).attr('clip-path');
 
+                expect(Drawing.baseUrl).toBe(href);
                 expect(cp.substring(0, 5 + href.length)).toEqual('url(' + href + '#');
                 expect(cp.substring(cp.length - 1)).toEqual(')');
             });
 
             base.remove();
+            delete Drawing.baseUrl;
         })
         .catch(failTest)
         .then(done);