diff --git a/src/snapshot/svgtoimg.js b/src/snapshot/svgtoimg.js index 55d11bbf041..8b7ddb30690 100644 --- a/src/snapshot/svgtoimg.js +++ b/src/snapshot/svgtoimg.js @@ -86,7 +86,7 @@ function svgToImg(opts) { imgData = canvas.toDataURL('image/webp'); break; case 'svg': - imgData = svg; + imgData = url; break; default: reject(new Error('Image format is not jpeg, png or svg')); diff --git a/src/snapshot/tosvg.js b/src/snapshot/tosvg.js index 206db941a0a..3ef7ee18867 100644 --- a/src/snapshot/tosvg.js +++ b/src/snapshot/tosvg.js @@ -78,24 +78,12 @@ module.exports = function toSVG(gd, format) { return; } - // I've seen font-family styles with non-escaped double quotes in them - breaks the - // serialized svg because the style attribute itself is double-quoted! - // Is this an IE thing? Any other attributes or style elements that can have quotes in them? - // TODO: this looks like a noop right now - what happened to it? - - /* - * Font-family styles with double quotes in them breaks the to-image - * step in FF42 because the style attribute itself is wrapped in - * double quotes. See: - * - * - http://codepen.io/etpinard/pen/bEdQWK - * - https://github.com/plotly/plotly.js/pull/104 - * - * for more info. - */ + // Font family styles break things because of quotation marks, + // so we must remove them *after* the SVG DOM has been serialized + // to a string (browsers convert singles back) var ff = txt.style('font-family'); if(ff && ff.indexOf('"') !== -1) { - txt.style('font-family', ff.replace(/"/g, '\\\'')); + txt.style('font-family', ff.replace(/"/g, 'TOBESTRIPPED')); } }); @@ -115,5 +103,8 @@ module.exports = function toSVG(gd, format) { s = svgTextUtils.html_entity_decode(s); s = svgTextUtils.xml_entity_encode(s); + // Fix quotations around font strings + s = s.replace(/("TOBESTRIPPED)|(TOBESTRIPPED")/g, '\''); + return s; }; diff --git a/test/jasmine/tests/download_test.js b/test/jasmine/tests/download_test.js index 40d68529e25..b5062886c87 100644 --- a/test/jasmine/tests/download_test.js +++ b/test/jasmine/tests/download_test.js @@ -44,45 +44,84 @@ describe('Plotly.downloadImage', function() { }); it('should create link, remove link, accept options', function(done) { - //use MutationObserver to monitor the DOM - //for changes - //code modeled after - //https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver - // select the target node - var target = document.body; - var domchanges = []; - - // create an observer instance - var observer = new MutationObserver(function(mutations) { - mutations.forEach(function(mutation) { - domchanges.push(mutation); - }); - }); + downloadTest(gd, 'jpeg', done); + }); - Plotly.plot(gd, textchartMock.data, textchartMock.layout).then(function(gd) { - // start observing dom - // configuration of the observer: - var config = { childList: true }; - - // pass in the target node and observer options - observer.observe(target, config); - - return Plotly.downloadImage(gd, {format: 'jpeg', height: 300, width: 300, filename: 'plotly_download'}); - }).then(function(filename) { - // stop observing - observer.disconnect(); - // look for an added and removed link - var linkadded = domchanges[domchanges.length - 2].addedNodes[0].outerHTML; - var linkdeleted = domchanges[domchanges.length - 1].removedNodes[0].outerHTML; - - // check for a