fix(innerSVG): properly escape <""> in attributes

ceisele-r · Nov 17, 2016 · 2aa6862 · 2aa6862
1 parent 587345b
commit 2aa6862
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 3 deletions.
diff --git a/lib/util/serialize.js b/lib/util/serialize.js
@@ -6,12 +6,13 @@ module.exports = serialize;
 
 
 var TEXT_ENTITIES = /([&<>]{1})/g;
-var ATTR_ENTITIES = /([\n\r]{1})/g;
+var ATTR_ENTITIES = /([\n\r"]{1})/g;
 
 var ENTITY_REPLACEMENT = {
   '&': '&amp;',
   '<': '&lt;',
-  '>': '&gt;'
+  '>': '&gt;',
+  '"': '\''
 };
 
 function escape(str, pattern) {

diff --git a/test/spec/attr.js b/test/spec/attr.js
@@ -60,6 +60,34 @@ describe('attr', function() {
   });
 
 
+  it('should set marker-start attribute', function() {
+
+    // given
+    var rect = create('rect');
+
+    // when
+    attr(rect, 'marker-start', 'url("#foo")');
+
+    // then
+    // Chrome, Firefox export url enclosed in <"">
+    expect(attr(rect, 'marker-start')).to.match(/url\((#foo|"#foo")\)/);
+  });
+
+
+  it('should set markerEnd attribute', function() {
+
+    // given
+    var rect = create('rect');
+
+    // when
+    attr(rect, 'markerEnd', 'url(#bar)');
+
+    // then
+    // Chrome, Firefox export url enclosed in <"">
+    expect(attr(rect, 'marker-end')).to.match(/url\((#bar|"#bar")\)/)
+  });
+
+
   it('should set attribute', function() {
 
     // given

diff --git a/test/spec/innerSVG.js b/test/spec/innerSVG.js
@@ -1,6 +1,7 @@
 var create = require('../../lib/create'),
     appendTo = require('../../lib/appendTo'),
-    innerSVG = require('../../lib/innerSVG');
+    innerSVG = require('../../lib/innerSVG'),
+    attr = require('../../lib/attr');
 
 var helper = require('../helper');
 
@@ -45,6 +46,25 @@ describe('inner-svg', function() {
       expect(element.childNodes.length).to.eql(1);
     });
 
+
+    it('should set url style', function() {
+
+      // given
+      var container = helper.createContainer();
+      var element = appendTo(create('svg'), container);
+
+      var text = '<g style="marker-start: url(\'#foo\')"></g>';
+
+      // when
+      innerSVG(element, text);
+
+      var groupNode = element.childNodes[0];
+
+      // then
+      // Chrome, Firefox export url enclosed in <"">
+      expect(groupNode.style['marker-start']).to.match(/url\((#foo|"#foo")\)/);
+    });
+
   });
 
 
@@ -89,6 +109,35 @@ describe('inner-svg', function() {
     });
 
 
+    it('should get url style', function() {
+
+      // given
+      var container = helper.createContainer();
+      var element = appendTo(create('svg'), container);
+
+      var group = appendTo(create('g'), element);
+      var path = appendTo(create('path'), group);
+
+      attr(path, {
+        d: 'm 272,202L340,202',
+        markerEnd: 'url("#sequenceflow-end")'
+      });
+
+      var text =
+        '<path d="m 272,202L340,202" ' +
+              'style="marker-end: url(\'#sequenceflow-end\'); "/>';
+
+      // when
+      var svg = innerSVG(element);
+
+      // then
+      // Chrome, Firefox export url enclosed in <"">,
+      // we need to properly escape <"> with <'> to produce
+      // valid SVG
+      expect(svg).to.match(/.*url\(('#sequenceflow-end'|#sequenceflow-end)\).*/);
+    });
+
+
     it('should get CDATA <style>', function() {
 
       // given