diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
index 2f0883e0..43868e44 100644
--- a/lib/draw/BpmnRenderer.js
+++ b/lib/draw/BpmnRenderer.js
@@ -128,7 +128,9 @@ export default function BpmnRenderer(
}
function colorEscape(str) {
- return str.replace(/[()\s,#]+/g, '_');
+
+ // only allow characters and numbers
+ return str.replace(/[^0-9a-zA-z]+/g, '_');
}
function marker(type, fill, stroke) {
diff --git a/test/spec/draw/BpmnRenderer.colors.bpmn b/test/spec/draw/BpmnRenderer.colors.bpmn
index 7b39676f..25604f0a 100644
--- a/test/spec/draw/BpmnRenderer.colors.bpmn
+++ b/test/spec/draw/BpmnRenderer.colors.bpmn
@@ -74,7 +74,7 @@
-
+
diff --git a/test/spec/draw/BpmnRendererSpec.js b/test/spec/draw/BpmnRendererSpec.js
index 1f6d88fc..26425bc1 100644
--- a/test/spec/draw/BpmnRendererSpec.js
+++ b/test/spec/draw/BpmnRendererSpec.js
@@ -245,18 +245,18 @@ describe('draw - bpmn renderer', function() {
it('should properly render colored markers', function(done) {
-
var xml = require('./BpmnRenderer.colors.bpmn');
- bootstrapViewer(xml).call(this, function(err) {
+ bootstrapViewer(xml).call(this, function(err) {
inject(function(canvas) {
- var svg = canvas._svg;
- var markers = svg.querySelectorAll('marker');
+ var svg = canvas._svg,
+ markers = svg.querySelectorAll('marker');
expect(markers).to.have.length(7);
expect(markers[0].id).to.match(/^sequenceflow-end-rgb_255_224_178_-rgb_251_140_0_-[A-Za-z0-9]{25}$/);
expect(markers[1].id).to.match(/^sequenceflow-end-yellow-blue-[A-Za-z0-9]{25}$/);
expect(markers[2].id).to.match(/^sequenceflow-end-white-_3399aa-[A-Za-z0-9]{25}$/);
+ expect(markers[3].id).to.match(/^sequenceflow-end-white-rgba_255_0_0_0_9_-[A-Za-z0-9]{25}$/);
expect(markers[4].id).to.match(/^association-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
expect(markers[5].id).to.match(/^messageflow-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
expect(markers[6].id).to.match(/^messageflow-start-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
@@ -268,13 +268,12 @@ describe('draw - bpmn renderer', function() {
it('should properly render connection markers (2)', function(done) {
-
var xml = require('./BpmnRenderer.connection-colors.bpmn');
- bootstrapViewer(xml).call(this, function(err) {
+ bootstrapViewer(xml).call(this, function(err) {
inject(function(canvas) {
- var svg = canvas._svg;
- var markers = svg.querySelectorAll('marker');
+ var svg = canvas._svg,
+ markers = svg.querySelectorAll('marker');
expect(markers).to.have.length(4);
expect(markers[0].id).to.match(/^association-end-rgb_23_100_344_-rgb_23_100_344_-[A-Za-z0-9]{25}$/);
@@ -338,7 +337,7 @@ describe('draw - bpmn renderer', function() {
var defaultFillColor = 'red',
defaultStrokeColor = 'lime';
- // TODO(philippfromme): remove once PhantomJS is not used anymore
+ // TODO(philippfromme): remove once we drop PhantomJS
function expectedColors(color) {
var conversionValues = {
@@ -368,12 +367,42 @@ describe('draw - bpmn renderer', function() {
}
}));
+ // TODO(philippfromme): remove once we drop PhantomJS
+ /**
+ * Ensure alpha channel of RGB (rgba) color has one decimal point.
+ *
+ * @param {string} color
+ *
+ * @return {string}
+ */
+ function fixRgba(color) {
+ if (color.indexOf('rgba') !== -1) {
+ return [
+ 'rgba(',
+ color
+ .replace(/rgba\(|\)/g, '')
+ .split(',')
+ .map(function(string) {
+ if (string.indexOf('.') !== -1) {
+ return parseFloat(string).toFixed(1);
+ }
+
+ return parseInt(string);
+ })
+ .join(', '),
+ ')'
+ ].join('');
+ }
+
+ return color;
+ }
+
function expectFillColor(element, color) {
- expect(expectedColors(color)).to.include(element.style.fill);
+ expect(expectedColors(color)).to.include(fixRgba(element.style.fill));
}
function expectStrokeColor(element, color) {
- expect(expectedColors(color)).to.include(element.style.stroke);
+ expect(expectedColors(color)).to.include(fixRgba(element.style.stroke));
}
/**
@@ -422,20 +451,20 @@ describe('draw - bpmn renderer', function() {
it('should render default colors without overriding', inject(function(canvas, elementRegistry) {
var rootElement = canvas.getRootElement();
- elementRegistry.forEach(function(e) {
- if (e === rootElement) {
+ elementRegistry.forEach(function(element) {
+ if (element === rootElement) {
return;
}
- var gfx = elementRegistry.getGraphics(e),
- di = getDi(e),
+ var gfx = elementRegistry.getGraphics(element),
+ di = getDi(element),
fillColor = di.get('bioc:fill'),
strokeColor = di.get('bioc:stroke');
if (fillColor || strokeColor) {
- expectColors(e, gfx, fillColor, strokeColor);
+ expectColors(element, gfx, fillColor, strokeColor);
} else {
- expectColors(e, gfx, defaultFillColor, defaultStrokeColor);
+ expectColors(element, gfx, defaultFillColor, defaultStrokeColor);
}
});
}));