test and fix clip path removal on changing an image to full paper-ref

Author: alexcjohnson

src/components/images/draw.js

@@ -143,9 +143,10 @@ module.exports = function draw(gd) {
             yId = ya ? ya._id : '',
             clipAxes = xId + yId;
 
-        if(clipAxes) {
-            thisImage.call(Drawing.setClipUrl, 'clip' + fullLayout._uid + clipAxes);
-        }
+        thisImage.call(Drawing.setClipUrl, clipAxes ?
+            ('clip' + fullLayout._uid + clipAxes) :
+            null
+        );
     }
 
     var imagesBelow = fullLayout._imageLowerLayer.selectAll('image')

test/jasmine/tests/layout_images_test.js

@@ -307,7 +307,7 @@ describe('Layout images', function() {
 
         afterEach(destroyGraphDiv);
 
-        it('should properly add and removing image', function(done) {
+        it('should properly add and remove image', function(done) {
             var gd = createGraphDiv(),
                 data = [{ x: [1, 2, 3], y: [1, 2, 3] }],
                 layout = { width: 500, height: 400 };
@@ -425,23 +425,38 @@ describe('images log/linear axis changes', function() {
         // we don't try to figure out the position on a new axis / canvas
         // automatically when you change xref / yref, we leave it to the caller.
 
+        // initial clip path should end in 'xy' to match xref/yref
+        expect(d3.select('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(d3.select('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(d3.select('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'});
+        })
+        .then(function() {
+            expect(d3.select('image').attr('clip-path')).toBe(null);
+
             // paper to log
             return Plotly.relayout(gd, {'images[0].yref': 'y2'});
         })
         .then(function() {
             expect(gd.layout.images[0].y).toBe(1);
 
+            expect(d3.select('image').attr('clip-path') || '').toMatch(/^[^x]+y2\)$/);
+
             // log to linear
             return Plotly.relayout(gd, {'images[0].yref': 'y'});
         })