Merge pull request #5686 from plotly/no-quote-around-url

Fixup misinterpreted clip-path by some programs after export

Author: archmoj

src/components/drawing/index.js

@@ -1270,7 +1270,9 @@ function getFullUrl(localId, gd) {
 
     var context = gd._context;
     var baseUrl = context._exportedPlot ? '' : (context._baseUrl || '');
-    return 'url(\'' + baseUrl + '#' + localId + '\')';
+    return baseUrl ?
+        'url(\'' + baseUrl + '#' + localId + '\')' :
+        'url(#' + localId + ')';
 }
 
 drawing.getTranslate = function(element) {

test/jasmine/assets/custom_assertions.js

@@ -226,8 +226,8 @@ exports.assertClip = function(sel, isClipped, size, msg) {
         var clipPath = d3Select(this).attr('clip-path');
 
         if(isClipped) {
-            expect(String(clipPath).substr(0, 5))
-                .toBe('url(\'', msg + ' clip path ' + '(item ' + i + ')');
+            expect(String(clipPath).substr(0, 4))
+                .toBe('url(', msg + ' clip path ' + '(item ' + i + ')');
         } else {
             expect(clipPath)
                 .toBe(null, msg + ' clip path ' + '(item ' + i + ')');

test/jasmine/assets/get_bbox.js

@@ -15,7 +15,7 @@ module.exports = function getBBox(element) {
     if(!clipPathAttr) return elementBBox;
 
     // only supports 'url(#<id>)' at the moment
-    var clipPathId = clipPathAttr.substring(6, clipPathAttr.length - 2);
+    var clipPathId = clipPathAttr.substring(5, clipPathAttr.length - 1);
     var clipBBox = getClipBBox(clipPathId);
 
     return minBBox(elementBBox, clipBBox);

test/jasmine/tests/drawing_test.js

@@ -25,7 +25,7 @@ describe('Drawing', function() {
 
             Drawing.setClipUrl(this.g, 'id1', {_context: {}});
 
-            expect(this.g.attr('clip-path')).toEqual('url(\'#id1\')');
+            expect(this.g.attr('clip-path')).toEqual('url(#id1)');
         });
 
         it('should unset the clip-path if arg is falsy', function() {

test/jasmine/tests/layout_images_test.js

@@ -524,22 +524,22 @@ describe('images log/linear axis changes', function() {
         // automatically when you change xref / yref, we leave it to the caller.
 
         // initial clip path should end in 'xy' to match xref/yref
-        expect(d3Select('image').attr('clip-path') || '').toMatch(/xy\'\)$/);
+        expect(d3Select('image').attr('clip-path') || '').toMatch(/xy\)$/);
 
         // linear to log
         Plotly.relayout(gd, {'images[0].yref': 'y2'})
         .then(function() {
             expect(gd.layout.images[0].y).toBe(1);
 
-            expect(d3Select('image').attr('clip-path') || '').toMatch(/xy2\'\)$/);
+            expect(d3Select('image').attr('clip-path') || '').toMatch(/xy2\)$/);
 
             // log to paper
             return Plotly.relayout(gd, {'images[0].yref': 'paper'});
         })
         .then(function() {
             expect(gd.layout.images[0].y).toBe(1);
 
-            expect(d3Select('image').attr('clip-path') || '').toMatch(/x\'\)$/);
+            expect(d3Select('image').attr('clip-path') || '').toMatch(/x\)$/);
 
             // change to full paper-referenced, to make sure the clip path disappears
             return Plotly.relayout(gd, {'images[0].xref': 'paper'});
@@ -553,7 +553,7 @@ describe('images log/linear axis changes', function() {
         .then(function() {
             expect(gd.layout.images[0].y).toBe(1);
 
-            expect(d3Select('image').attr('clip-path') || '').toMatch(/^[^x]+y2\'\)$/);
+            expect(d3Select('image').attr('clip-path') || '').toMatch(/^[^x]+y2\)$/);
 
             // log to linear
             return Plotly.relayout(gd, {'images[0].yref': 'y'});

test/jasmine/tests/plot_interact_test.js

@@ -545,8 +545,8 @@ describe('plot svg clip paths', function() {
             d3SelectAll('[clip-path]').each(function() {
                 var cp = d3Select(this).attr('clip-path');
 
-                expect(cp.substring(0, 6)).toEqual('url(\'#');
-                expect(cp.substring(cp.length - 2)).toEqual('\')');
+                expect(cp.substring(0, 5)).toEqual('url(#');
+                expect(cp.substring(cp.length - 1)).toEqual(')');
             });
         })
         .then(done, done.fail);

test/jasmine/tests/shapes_test.js

@@ -494,7 +494,7 @@ describe('shapes axis reference changes', function() {
     }
 
     it('draws the right number of objects and updates clip-path correctly', function(done) {
-        expect(getShape(0).attr('clip-path') || '').toMatch(/x\'\)$/);
+        expect(getShape(0).attr('clip-path') || '').toMatch(/x\)$/);
 
         Plotly.relayout(gd, {
             'shapes[0].xref': 'paper',
@@ -511,7 +511,7 @@ describe('shapes axis reference changes', function() {
             });
         })
         .then(function() {
-            expect(getShape(0).attr('clip-path') || '').toMatch(/^[^x]+y2\'\)$/);
+            expect(getShape(0).attr('clip-path') || '').toMatch(/^[^x]+y2\)$/);
 
             return Plotly.relayout(gd, {
                 'shapes[0].xref': 'x',
@@ -520,7 +520,7 @@ describe('shapes axis reference changes', function() {
             });
         })
         .then(function() {
-            expect(getShape(0).attr('clip-path') || '').toMatch(/xy2\'\)$/);
+            expect(getShape(0).attr('clip-path') || '').toMatch(/xy2\)$/);
         })
         .then(done, done.fail);
     });

test/jasmine/tests/toimage_test.js

@@ -239,10 +239,10 @@ describe('Plotly.toImage', function() {
             var clipPath = gSubplot.getAttribute('clip-path');
             var len = clipPath.length;
 
-            var head = clipPath.substr(0, 5);
-            var tail = clipPath.substr(len - 8, len);
-            expect(head).toBe('url(\'', 'subplot clipPath head');
-            expect(tail).toBe('xyplot\')', 'subplot clipPath tail');
+            var head = clipPath.substr(0, 4);
+            var tail = clipPath.substr(len - 7, len);
+            expect(head).toBe('url(', 'subplot clipPath head');
+            expect(tail).toBe('xyplot)', 'subplot clipPath tail');
 
             var middle = clipPath.substr(4, 10);
             expect(middle.length).toBe(10, 'subplot clipPath uid length');