From dc1f18a4972cee2d9e1bf46a6412dbb93b28506a Mon Sep 17 00:00:00 2001
From: Philipp Fromme <philippfromme@outlook.com>
Date: Wed, 23 May 2018 14:27:32 +0200
Subject: [PATCH] feat(bpmn-renderer): accept default fill and stroke color

Related to #797
---
 lib/draw/BpmnRenderer.js            | 261 ++++++++++---------
 test/fixtures/bpmn/draw/colors.bpmn | 375 ++++++++++++++--------------
 test/spec/NavigatedViewerSpec.js    |  10 +-
 test/spec/draw/BpmnRendererSpec.js  | 124 ++++++++-
 4 files changed, 459 insertions(+), 311 deletions(-)

diff --git a/lib/draw/BpmnRenderer.js b/lib/draw/BpmnRenderer.js
index 74713f2c..cfa974f5 100644
--- a/lib/draw/BpmnRenderer.js
+++ b/lib/draw/BpmnRenderer.js
@@ -68,11 +68,14 @@ var DEFAULT_FILL_OPACITY = .95,
 
 
 export default function BpmnRenderer(
-    eventBus, styles, pathMap,
+    config, eventBus, styles, pathMap,
     canvas, priority) {
 
   BaseRenderer.call(this, eventBus, priority);
 
+  var defaultFillColor = config.renderer && config.renderer.defaultFillColor,
+      defaultStrokeColor = config.renderer && config.renderer.defaultStrokeColor;
+
   var rendererId = RENDERER_IDS.next();
 
   var textUtil = new TextUtil({
@@ -448,7 +451,9 @@ export default function BpmnRenderer(
 
   function renderLabel(parentGfx, label, options) {
     var text = textUtil.createText(label || '', options);
+
     svgClasses(text).add('djs-label');
+
     svgAppend(parentGfx, text);
 
     return text;
@@ -462,7 +467,7 @@ export default function BpmnRenderer(
       align: align,
       padding: 5,
       style: {
-        fill: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor)
       }
     });
   }
@@ -479,7 +484,10 @@ export default function BpmnRenderer(
     return renderLabel(parentGfx, semantic.name, {
       box: box,
       fitBox: true,
-      style: { fontSize: '11px' }
+      style: {
+        fontSize: '11px',
+        fill: getStrokeColor(element, defaultStrokeColor)
+      }
     });
   }
 
@@ -488,7 +496,7 @@ export default function BpmnRenderer(
       box: { height: 30, width: element.height },
       align: 'center-middle',
       style: {
-        fill: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor)
       }
     });
 
@@ -518,8 +526,8 @@ export default function BpmnRenderer(
     },
     'bpmn:StartEvent': function(parentGfx, element) {
       var attrs = {
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       var semantic = getSemantic(element);
@@ -527,7 +535,9 @@ export default function BpmnRenderer(
       if (!semantic.isInterrupting) {
         attrs = {
           strokeDasharray: '6',
-          strokeLinecap: 'round'
+          strokeLinecap: 'round',
+          fill: getFillColor(element, defaultFillColor),
+          stroke: getStrokeColor(element, defaultStrokeColor)
         };
       }
 
@@ -549,8 +559,8 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(element) : getFillColor(element);
-      var stroke = isThrowing ? getFillColor(element) : getStrokeColor(element);
+      var fill = isThrowing ? getStrokeColor(element, defaultStrokeColor) : getFillColor(element, defaultFillColor);
+      var stroke = isThrowing ? getFillColor(element, defaultFillColor) : getStrokeColor(element, defaultStrokeColor);
 
       var messagePath = drawPath(parentGfx, pathData, {
         strokeWidth: 1,
@@ -563,8 +573,8 @@ export default function BpmnRenderer(
     'bpmn:TimerEventDefinition': function(parentGfx, element) {
       var circle = drawCircle(parentGfx, element.width, element.height, 0.2 * element.height, {
         strokeWidth: 2,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var pathData = pathMap.getScaledPath('EVENT_TIMER_WH', {
@@ -581,7 +591,7 @@ export default function BpmnRenderer(
       drawPath(parentGfx, pathData, {
         strokeWidth: 2,
         strokeLinecap: 'square',
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       for (var i = 0;i < 12;i++) {
@@ -604,7 +614,7 @@ export default function BpmnRenderer(
           strokeWidth: 1,
           strokeLinecap: 'square',
           transform: 'rotate(' + (i * 30) + ',' + height + ',' + width + ')',
-          stroke: getStrokeColor(element)
+          stroke: getStrokeColor(element, defaultStrokeColor)
         });
       }
 
@@ -622,12 +632,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(event) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
         fill: fill,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:ConditionalEventDefinition': function(parentGfx, event) {
@@ -644,7 +654,7 @@ export default function BpmnRenderer(
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:LinkEventDefinition': function(parentGfx, event, isThrowing) {
@@ -659,12 +669,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(event) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
         fill: fill,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:ErrorEventDefinition': function(parentGfx, event, isThrowing) {
@@ -679,12 +689,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(event) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
         fill: fill,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:CancelEventDefinition': function(parentGfx, event, isThrowing) {
@@ -699,11 +709,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? 'black' : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       var path = drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: fill
+        fill: fill,
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
 
       rotate(path, 45);
@@ -722,12 +733,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(event) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
         fill: fill,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:SignalEventDefinition': function(parentGfx, event, isThrowing) {
@@ -742,12 +753,12 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? getStrokeColor(event) : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
         fill: fill,
-        stroke: getStrokeColor(event)
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:MultipleEventDefinition': function(parentGfx, event, isThrowing) {
@@ -762,7 +773,7 @@ export default function BpmnRenderer(
         }
       });
 
-      var fill = isThrowing ? 'black' : 'none';
+      var fill = isThrowing ? getStrokeColor(event, defaultStrokeColor) : 'none';
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
@@ -783,15 +794,15 @@ export default function BpmnRenderer(
 
       return drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getStrokeColor(event),
-        stroke: getStrokeColor(event)
+        fill: getStrokeColor(event, defaultStrokeColor),
+        stroke: getStrokeColor(event, defaultStrokeColor)
       });
     },
     'bpmn:EndEvent': function(parentGfx, element) {
       var circle = renderer('bpmn:Event')(parentGfx, element, {
         strokeWidth: 4,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       renderEventContent(element, parentGfx, true);
@@ -801,8 +812,8 @@ export default function BpmnRenderer(
     'bpmn:TerminateEventDefinition': function(parentGfx, element) {
       var circle = drawCircle(parentGfx, element.width, element.height, 8, {
         strokeWidth: 4,
-        fill: getStrokeColor(element),
-        stroke: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return circle;
@@ -810,14 +821,15 @@ export default function BpmnRenderer(
     'bpmn:IntermediateEvent': function(parentGfx, element) {
       var outer = renderer('bpmn:Event')(parentGfx, element, {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
-      /* inner */ drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
+      /* inner */
+      drawCircle(parentGfx, element.width, element.height, INNER_OUTER_DIST, {
         strokeWidth: 1,
         fill: getFillColor(element, 'none'),
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       renderEventContent(element, parentGfx);
@@ -840,8 +852,8 @@ export default function BpmnRenderer(
 
     'bpmn:Task': function(parentGfx, element) {
       var attrs = {
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
@@ -863,8 +875,8 @@ export default function BpmnRenderer(
 
       /* service bg */ drawPath(parentGfx, pathDataBG, {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var fillPathData = pathMap.getScaledPath('TASK_TYPE_SERVICE_FILL', {
@@ -876,7 +888,7 @@ export default function BpmnRenderer(
 
       /* service fill */ drawPath(parentGfx, fillPathData, {
         strokeWidth: 0,
-        fill: getFillColor(element)
+        fill: getFillColor(element, defaultFillColor)
       });
 
       var pathData = pathMap.getScaledPath('TASK_TYPE_SERVICE', {
@@ -888,8 +900,8 @@ export default function BpmnRenderer(
 
       /* service */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
@@ -909,8 +921,8 @@ export default function BpmnRenderer(
 
       /* user path */ drawPath(parentGfx, pathData, {
         strokeWidth: 0.5,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var pathData2 = pathMap.getScaledPath('TASK_TYPE_USER_2', {
@@ -922,8 +934,8 @@ export default function BpmnRenderer(
 
       /* user2 path */ drawPath(parentGfx, pathData2, {
         strokeWidth: 0.5,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var pathData3 = pathMap.getScaledPath('TASK_TYPE_USER_3', {
@@ -935,8 +947,8 @@ export default function BpmnRenderer(
 
       /* user3 path */ drawPath(parentGfx, pathData3, {
         strokeWidth: 0.5,
-        fill: getStrokeColor(element),
-        stroke: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
@@ -953,8 +965,8 @@ export default function BpmnRenderer(
 
       /* manual path */ drawPath(parentGfx, pathData, {
         strokeWidth: 0.5, // 0.25,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
@@ -975,8 +987,8 @@ export default function BpmnRenderer(
 
       /* send path */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getStrokeColor(element),
-        stroke: getFillColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getFillColor(element, defaultFillColor)
       });
 
       return task;
@@ -1012,8 +1024,8 @@ export default function BpmnRenderer(
 
       /* receive path */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
@@ -1030,7 +1042,7 @@ export default function BpmnRenderer(
 
       /* script path */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
@@ -1049,7 +1061,7 @@ export default function BpmnRenderer(
       svgAttr(businessHeaderPath, {
         strokeWidth: 1,
         fill: getFillColor(element, '#aaaaaa'),
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var headerData = pathMap.getScaledPath('TASK_TYPE_BUSINESS_RULE_MAIN', {
@@ -1062,15 +1074,15 @@ export default function BpmnRenderer(
       var businessPath = drawPath(parentGfx, headerData);
       svgAttr(businessPath, {
         strokeWidth: 1,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return task;
     },
     'bpmn:SubProcess': function(parentGfx, element, attrs) {
       attrs = assign({
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       }, attrs);
 
       var rect = renderer('bpmn:Activity')(parentGfx, element, attrs);
@@ -1100,7 +1112,7 @@ export default function BpmnRenderer(
       var outer = renderer('bpmn:SubProcess')(parentGfx, element);
 
       var innerAttrs = styles.style([ 'no-fill', 'no-events' ], {
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       /* inner path */ drawRect(parentGfx, element.width, element.height, TASK_BORDER_RADIUS - 2, INNER_OUTER_DIST, innerAttrs);
@@ -1116,8 +1128,8 @@ export default function BpmnRenderer(
 
       var attrs = {
         fillOpacity: DEFAULT_FILL_OPACITY,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       var lane = renderer('bpmn:Lane')(parentGfx, element, attrs);
@@ -1129,7 +1141,7 @@ export default function BpmnRenderer(
           { x: 30, y: 0 },
           { x: 30, y: element.height }
         ], {
-          stroke: getStrokeColor(element)
+          stroke: getStrokeColor(element, defaultStrokeColor)
         });
         var text = getSemantic(element).name;
         renderLaneLabel(parentGfx, text, element);
@@ -1139,7 +1151,7 @@ export default function BpmnRenderer(
         renderLabel(parentGfx, text2, {
           box: element, align: 'center-middle',
           style: {
-            fill: getStrokeColor(element)
+            fill: getStrokeColor(element, defaultStrokeColor)
           }
         });
       }
@@ -1154,9 +1166,9 @@ export default function BpmnRenderer(
     },
     'bpmn:Lane': function(parentGfx, element, attrs) {
       var rect = drawRect(parentGfx, element.width, element.height, 0, assign({
-        fill: getFillColor(element),
+        fill: getFillColor(element, defaultFillColor),
         fillOpacity: HIGH_FILL_OPACITY,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       }, attrs));
 
       var semantic = getSemantic(element);
@@ -1174,8 +1186,8 @@ export default function BpmnRenderer(
       /* circle path */
       drawCircle(parentGfx, element.width, element.height, element.height * 0.24, {
         strokeWidth: 2.5,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return diamond;
@@ -1197,8 +1209,8 @@ export default function BpmnRenderer(
       if ((getDi(element).isMarkerVisible)) {
         drawPath(parentGfx, pathData, {
           strokeWidth: 1,
-          fill: getStrokeColor(element),
-          stroke: getStrokeColor(element)
+          fill: getStrokeColor(element, defaultStrokeColor),
+          stroke: getStrokeColor(element, defaultStrokeColor)
         });
       }
 
@@ -1220,8 +1232,8 @@ export default function BpmnRenderer(
 
       /* complex path */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getStrokeColor(element),
-        stroke: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return diamond;
@@ -1242,8 +1254,8 @@ export default function BpmnRenderer(
 
       /* parallel path */ drawPath(parentGfx, pathData, {
         strokeWidth: 1,
-        fill: getStrokeColor(element),
-        stroke: getStrokeColor(element)
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return diamond;
@@ -1257,7 +1269,7 @@ export default function BpmnRenderer(
       /* outer circle path */ drawCircle(parentGfx, element.width, element.height, element.height * 0.20, {
         strokeWidth: 1,
         fill: 'none',
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var type = semantic.eventGatewayType;
@@ -1279,7 +1291,7 @@ export default function BpmnRenderer(
         var attrs = {
           strokeWidth: 2,
           fill: getFillColor(element, 'none'),
-          stroke: getStrokeColor(element)
+          stroke: getStrokeColor(element, defaultStrokeColor)
         };
 
         /* event path */ drawPath(parentGfx, pathData, attrs);
@@ -1310,7 +1322,7 @@ export default function BpmnRenderer(
           svgAttr(innerCircle, {
             strokeWidth: 1,
             fill: 'none',
-            stroke: getStrokeColor(element)
+            stroke: getStrokeColor(element, defaultStrokeColor)
           });
         }
 
@@ -1322,9 +1334,9 @@ export default function BpmnRenderer(
     },
     'bpmn:Gateway': function(parentGfx, element) {
       var attrs = {
-        fill: getFillColor(element),
+        fill: getFillColor(element, defaultFillColor),
         fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       return drawDiamond(parentGfx, element.width, element.height, attrs);
@@ -1332,13 +1344,13 @@ export default function BpmnRenderer(
     'bpmn:SequenceFlow': function(parentGfx, element) {
       var pathData = createPathFromConnection(element);
 
-      var fill = getFillColor(element),
-          stroke = getStrokeColor(element);
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
 
       var attrs = {
         strokeLinejoin: 'round',
         markerEnd: marker('sequenceflow-end', fill, stroke),
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       var path = drawPath(parentGfx, pathData, attrs);
@@ -1372,14 +1384,14 @@ export default function BpmnRenderer(
 
       var semantic = getSemantic(element);
 
-      var fill = getFillColor(element),
-          stroke = getStrokeColor(element);
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
 
       attrs = assign({
         strokeDasharray: '0.5, 5',
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       }, attrs || {});
 
       if (semantic.associationDirection === 'One' ||
@@ -1394,16 +1406,16 @@ export default function BpmnRenderer(
       return drawLine(parentGfx, element.waypoints, attrs);
     },
     'bpmn:DataInputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element),
-          stroke = getStrokeColor(element);
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
 
       return renderer('bpmn:Association')(parentGfx, element, {
         markerEnd: marker('association-end', fill, stroke)
       });
     },
     'bpmn:DataOutputAssociation': function(parentGfx, element) {
-      var fill = getFillColor(element),
-          stroke = getStrokeColor(element);
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
 
       return renderer('bpmn:Association')(parentGfx, element, {
         markerEnd: marker('association-end', fill, stroke)
@@ -1414,8 +1426,8 @@ export default function BpmnRenderer(
       var semantic = getSemantic(element),
           di = getDi(element);
 
-      var fill = getFillColor(element),
-          stroke = getStrokeColor(element);
+      var fill = getFillColor(element, defaultFillColor),
+          stroke = getStrokeColor(element, defaultStrokeColor);
 
       var pathData = createPathFromConnection(element);
 
@@ -1426,7 +1438,7 @@ export default function BpmnRenderer(
         strokeLinecap: 'round',
         strokeLinejoin: 'round',
         strokeWidth: '1.5px',
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       var path = drawPath(parentGfx, pathData, attrs);
@@ -1469,9 +1481,9 @@ export default function BpmnRenderer(
       });
 
       var elementObject = drawPath(parentGfx, pathData, {
-        fill: getFillColor(element),
+        fill: getFillColor(element, defaultFillColor),
         fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var semantic = getSemantic(element);
@@ -1521,9 +1533,9 @@ export default function BpmnRenderer(
 
       var elementStore = drawPath(parentGfx, DATA_STORE_PATH, {
         strokeWidth: 2,
-        fill: getFillColor(element),
+        fill: getFillColor(element, defaultFillColor),
         fillOpacity: DEFAULT_FILL_OPACITY,
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       return elementStore;
@@ -1535,8 +1547,8 @@ export default function BpmnRenderer(
 
       var attrs = {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       };
 
       if (!cancel) {
@@ -1591,12 +1603,20 @@ export default function BpmnRenderer(
           my: 0.0
         }
       });
+
       drawPath(parentGfx, textPathData, {
-        stroke: getStrokeColor(element)
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       var text = getSemantic(element).text || '';
-      renderLabel(parentGfx, text, { box: element, align: 'left-top', padding: 5 });
+      renderLabel(parentGfx, text, {
+        box: element,
+        align: 'left-top',
+        padding: 5,
+        style: {
+          fill: getStrokeColor(element, defaultStrokeColor)
+        }
+      });
 
       return textElement;
     },
@@ -1612,13 +1632,17 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('participant-multiplicity', parentGfx, markerPath);
+      drawMarker('participant-multiplicity', parentGfx, markerPath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
     },
     'SubProcessMarker': function(parentGfx, element) {
       var markerRect = drawRect(parentGfx, 14, 14, 0, {
         strokeWidth: 1,
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
 
       // Process marker is placed in the middle of the box
@@ -1637,8 +1661,8 @@ export default function BpmnRenderer(
       });
 
       drawMarker('sub-process', parentGfx, markerPath, {
-        fill: getFillColor(element),
-        stroke: getStrokeColor(element)
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
     },
     'ParallelMarker': function(parentGfx, element, position) {
@@ -1653,7 +1677,10 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('parallel', parentGfx, markerPath);
+      drawMarker('parallel', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
     },
     'SequentialMarker': function(parentGfx, element, position) {
       var markerPath = pathMap.getScaledPath('MARKER_SEQUENTIAL', {
@@ -1667,7 +1694,10 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('sequential', parentGfx, markerPath);
+      drawMarker('sequential', parentGfx, markerPath, {
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
     },
     'CompensationMarker': function(parentGfx, element, position) {
       var markerMath = pathMap.getScaledPath('MARKER_COMPENSATION', {
@@ -1681,7 +1711,11 @@ export default function BpmnRenderer(
         }
       });
 
-      drawMarker('compensation', parentGfx, markerMath, { strokeWidth: 1 });
+      drawMarker('compensation', parentGfx, markerMath, {
+        strokeWidth: 1,
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
+      });
     },
     'LoopMarker': function(parentGfx, element, position) {
       var markerPath = pathMap.getScaledPath('MARKER_LOOP', {
@@ -1697,7 +1731,8 @@ export default function BpmnRenderer(
 
       drawMarker('loop', parentGfx, markerPath, {
         strokeWidth: 1,
-        fill: 'none',
+        fill: getFillColor(element, defaultFillColor),
+        stroke: getStrokeColor(element, defaultStrokeColor),
         strokeLinecap: 'round',
         strokeMiterlimit: 0.5
       });
@@ -1716,7 +1751,8 @@ export default function BpmnRenderer(
 
       drawMarker('adhoc', parentGfx, markerPath, {
         strokeWidth: 1,
-        fill: 'black'
+        fill: getStrokeColor(element, defaultStrokeColor),
+        stroke: getStrokeColor(element, defaultStrokeColor)
       });
     }
   };
@@ -1806,6 +1842,7 @@ export default function BpmnRenderer(
 inherits(BpmnRenderer, BaseRenderer);
 
 BpmnRenderer.$inject = [
+  'config',
   'eventBus',
   'styles',
   'pathMap',
diff --git a/test/fixtures/bpmn/draw/colors.bpmn b/test/fixtures/bpmn/draw/colors.bpmn
index 6a10217f..0d1b795e 100644
--- a/test/fixtures/bpmn/draw/colors.bpmn
+++ b/test/fixtures/bpmn/draw/colors.bpmn
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.5.1">
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_1" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="1.14.0">
   <bpmn:collaboration id="Collaboration_12gf8gk">
     <bpmn:participant id="Participant_11xqomt" name="Regressnahme &#10;Sachbearbeiter" processRef="Process_1" />
     <bpmn:participant id="Participant_0igvg0r" />
@@ -26,6 +26,88 @@
     <bpmn:sequenceFlow id="SequenceFlow_0pqo7zt" name="Ja" sourceRef="ExclusiveGateway_092mc05" targetRef="Task_02fdytg" />
     <bpmn:sequenceFlow id="SequenceFlow_0h9s0mp" sourceRef="Task_0iirfhd" targetRef="ExclusiveGateway_092mc05" />
     <bpmn:sequenceFlow id="SequenceFlow_1jrsqqc" sourceRef="StartEvent_1mnut37" targetRef="Task_0iirfhd" />
+    <bpmn:startEvent id="StartEvent_1mnut37" name="Regressverdacht gemeldet">
+      <bpmn:outgoing>SequenceFlow_1jrsqqc</bpmn:outgoing>
+      <bpmn:messageEventDefinition />
+    </bpmn:startEvent>
+    <bpmn:callActivity id="Task_0iirfhd" name="Fall prüfen">
+      <bpmn:incoming>SequenceFlow_1jrsqqc</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_0h9s0mp</bpmn:outgoing>
+      <bpmn:property id="Property_1vr5ovt" name="__targetRef_placeholder" />
+      <bpmn:dataInputAssociation id="DataInputAssociation_1ncouqr">
+        <bpmn:sourceRef>DataStoreReference_1clvrcw</bpmn:sourceRef>
+        <bpmn:targetRef>Property_1vr5ovt</bpmn:targetRef>
+      </bpmn:dataInputAssociation>
+    </bpmn:callActivity>
+    <bpmn:exclusiveGateway id="ExclusiveGateway_092mc05" name="Regress&#10;möglich?">
+      <bpmn:incoming>SequenceFlow_0h9s0mp</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_0pqo7zt</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_1qt82pt</bpmn:outgoing>
+    </bpmn:exclusiveGateway>
+    <bpmn:task id="Task_02fdytg" name="Zahlungsaufforderung an VN schicken">
+      <bpmn:incoming>SequenceFlow_0pqo7zt</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_152w54z</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:task id="Task_04aofbe" name="Vorgang schließen">
+      <bpmn:incoming>SequenceFlow_1qt82pt</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_17ohrlh</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:endEvent id="EndEvent_01a6rq8" name="Vorgang geschlossen">
+      <bpmn:incoming>SequenceFlow_17ohrlh</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:task id="Task_12lthpj" name="Vorgang auf Wiedervorlage setzen">
+      <bpmn:incoming>SequenceFlow_152w54z</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_1xvnonz</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:eventBasedGateway id="EventBasedGateway_0qdxz70">
+      <bpmn:incoming>SequenceFlow_1xvnonz</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_0mbw4et</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_024djlt</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_02klp91</bpmn:outgoing>
+    </bpmn:eventBasedGateway>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_1ias0p2" name="Widerspruch erhalten">
+      <bpmn:incoming>SequenceFlow_0mbw4et</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_01w8xpk</bpmn:outgoing>
+      <bpmn:messageEventDefinition />
+    </bpmn:intermediateCatchEvent>
+    <bpmn:task id="Task_0eti3m2" name="Widerspruch prüfen">
+      <bpmn:incoming>SequenceFlow_01w8xpk</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_17fk7n7</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:exclusiveGateway id="ExclusiveGateway_0lk2nir" name="Gerechtfertigt?">
+      <bpmn:incoming>SequenceFlow_17fk7n7</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_1hytpfi</bpmn:outgoing>
+      <bpmn:outgoing>SequenceFlow_17yh2em</bpmn:outgoing>
+    </bpmn:exclusiveGateway>
+    <bpmn:task id="Task_1qlbv5i" name="Vorgang schließen">
+      <bpmn:incoming>SequenceFlow_1hytpfi</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_1u8uz5a</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_037r6f2" name="Wiedervorlage fällig">
+      <bpmn:incoming>SequenceFlow_024djlt</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_096z65r</bpmn:outgoing>
+      <bpmn:timerEventDefinition />
+    </bpmn:intermediateCatchEvent>
+    <bpmn:task id="Task_1w7bb1w" name="Vorgang an Inkasso-Dienstleister geben">
+      <bpmn:incoming>SequenceFlow_096z65r</bpmn:incoming>
+      <bpmn:incoming>SequenceFlow_17yh2em</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_0ld619c</bpmn:outgoing>
+    </bpmn:task>
+    <bpmn:dataStoreReference id="DataStoreReference_1clvrcw" name="DATA" />
+    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_0d430z1" name="Geld&#10;eingegangen">
+      <bpmn:incoming>SequenceFlow_02klp91</bpmn:incoming>
+      <bpmn:outgoing>SequenceFlow_1xbxd38</bpmn:outgoing>
+      <bpmn:messageEventDefinition />
+    </bpmn:intermediateCatchEvent>
+    <bpmn:endEvent id="EndEvent_119yhl0" name="Vorgang geschlossen">
+      <bpmn:incoming>SequenceFlow_1ooycy6</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:endEvent id="EndEvent_0nfuudw" name="Vorgang offen">
+      <bpmn:incoming>SequenceFlow_0ld619c</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:endEvent id="EndEvent_0k9uozu" name="Vorgang geschlossen">
+      <bpmn:incoming>SequenceFlow_1u8uz5a</bpmn:incoming>
+    </bpmn:endEvent>
     <bpmn:transaction id="SubProcess_12gfrt8">
       <bpmn:incoming>SequenceFlow_1xbxd38</bpmn:incoming>
       <bpmn:outgoing>SequenceFlow_1ooycy6</bpmn:outgoing>
@@ -38,144 +120,63 @@
       </bpmn:task>
       <bpmn:sequenceFlow id="SequenceFlow_0krol9j" sourceRef="Task_1bwmf45" targetRef="Task_0yan60f" />
     </bpmn:transaction>
-    <bpmn:endEvent id="EndEvent_0k9uozu" name="Vorgang geschlossen">
-      <bpmn:incoming>SequenceFlow_1u8uz5a</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:endEvent id="EndEvent_0nfuudw" name="Vorgang offen">
-      <bpmn:incoming>SequenceFlow_0ld619c</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:endEvent id="EndEvent_119yhl0" name="Vorgang geschlossen">
-      <bpmn:incoming>SequenceFlow_1ooycy6</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_0d430z1" name="Geld&#10;eingegangen">
-      <bpmn:incoming>SequenceFlow_02klp91</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_1xbxd38</bpmn:outgoing>
-      <bpmn:messageEventDefinition />
-    </bpmn:intermediateCatchEvent>
-    <bpmn:dataStoreReference id="DataStoreReference_1clvrcw" name="DATA" />
-    <bpmn:task id="Task_1w7bb1w" name="Vorgang an Inkasso-Dienstleister geben">
-      <bpmn:incoming>SequenceFlow_096z65r</bpmn:incoming>
-      <bpmn:incoming>SequenceFlow_17yh2em</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_0ld619c</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_037r6f2" name="Wiedervorlage fällig">
-      <bpmn:incoming>SequenceFlow_024djlt</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_096z65r</bpmn:outgoing>
-      <bpmn:timerEventDefinition />
-    </bpmn:intermediateCatchEvent>
-    <bpmn:task id="Task_1qlbv5i" name="Vorgang schließen">
-      <bpmn:incoming>SequenceFlow_1hytpfi</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_1u8uz5a</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:exclusiveGateway id="ExclusiveGateway_0lk2nir" name="Gerechtfertigt?">
-      <bpmn:incoming>SequenceFlow_17fk7n7</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_1hytpfi</bpmn:outgoing>
-      <bpmn:outgoing>SequenceFlow_17yh2em</bpmn:outgoing>
-    </bpmn:exclusiveGateway>
-    <bpmn:task id="Task_0eti3m2" name="Widerspruch prüfen">
-      <bpmn:incoming>SequenceFlow_01w8xpk</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_17fk7n7</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:intermediateCatchEvent id="IntermediateCatchEvent_1ias0p2" name="Widerspruch erhalten">
-      <bpmn:incoming>SequenceFlow_0mbw4et</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_01w8xpk</bpmn:outgoing>
-      <bpmn:messageEventDefinition />
-    </bpmn:intermediateCatchEvent>
-    <bpmn:eventBasedGateway id="EventBasedGateway_0qdxz70">
-      <bpmn:incoming>SequenceFlow_1xvnonz</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_0mbw4et</bpmn:outgoing>
-      <bpmn:outgoing>SequenceFlow_024djlt</bpmn:outgoing>
-      <bpmn:outgoing>SequenceFlow_02klp91</bpmn:outgoing>
-    </bpmn:eventBasedGateway>
-    <bpmn:task id="Task_12lthpj" name="Vorgang auf Wiedervorlage setzen">
-      <bpmn:incoming>SequenceFlow_152w54z</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_1xvnonz</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:endEvent id="EndEvent_01a6rq8" name="Vorgang geschlossen">
-      <bpmn:incoming>SequenceFlow_17ohrlh</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:task id="Task_04aofbe" name="Vorgang schließen">
-      <bpmn:incoming>SequenceFlow_1qt82pt</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_17ohrlh</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:task id="Task_02fdytg" name="Zahlungsaufforderung an VN schicken">
-      <bpmn:incoming>SequenceFlow_0pqo7zt</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_152w54z</bpmn:outgoing>
-    </bpmn:task>
-    <bpmn:exclusiveGateway id="ExclusiveGateway_092mc05" name="Regress&#10;möglich?">
-      <bpmn:incoming>SequenceFlow_0h9s0mp</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_0pqo7zt</bpmn:outgoing>
-      <bpmn:outgoing>SequenceFlow_1qt82pt</bpmn:outgoing>
-    </bpmn:exclusiveGateway>
-    <bpmn:callActivity id="Task_0iirfhd" name="Fall prüfen">
-      <bpmn:incoming>SequenceFlow_1jrsqqc</bpmn:incoming>
-      <bpmn:outgoing>SequenceFlow_0h9s0mp</bpmn:outgoing>
-      <bpmn:property id="Property_1vr5ovt" name="__targetRef_placeholder" />
-      <bpmn:dataInputAssociation id="DataInputAssociation_1ncouqr">
-        <bpmn:sourceRef>DataStoreReference_1clvrcw</bpmn:sourceRef>
-        <bpmn:targetRef>Property_1vr5ovt</bpmn:targetRef>
-      </bpmn:dataInputAssociation>
-    </bpmn:callActivity>
-    <bpmn:startEvent id="StartEvent_1mnut37" name="Regressverdacht gemeldet">
-      <bpmn:outgoing>SequenceFlow_1jrsqqc</bpmn:outgoing>
-      <bpmn:messageEventDefinition />
-    </bpmn:startEvent>
     <bpmn:association id="Association_05g2d3y" sourceRef="Task_02fdytg" targetRef="TextAnnotation_1ff5m5b" />
-    <bpmn:textAnnotation id="TextAnnotation_1ff5m5b">    <bpmn:text><![CDATA[Some random comment
-can be added, too]]></bpmn:text>
-</bpmn:textAnnotation>
+    <bpmn:textAnnotation id="TextAnnotation_1ff5m5b">
+      <bpmn:text>Some random comment
+can be added, too</bpmn:text>
+    </bpmn:textAnnotation>
   </bpmn:process>
   <bpmndi:BPMNDiagram id="BPMNDiagram_1">
     <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_12gf8gk">
-      <bpmndi:BPMNShape id="Participant_11xqomt_di" bpmnElement="Participant_11xqomt" bioc:stroke="fuchsia" bioc:fill="yellow">
+      <bpmndi:BPMNShape id="Participant_11xqomt_di" bpmnElement="Participant_11xqomt">
         <dc:Bounds x="25" y="15" width="1271" height="455" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="StartEvent_1mnut37_di" bpmnElement="StartEvent_1mnut37" bioc:stroke="666600" bioc:fill="CCCC00">
+      <bpmndi:BPMNShape id="StartEvent_1mnut37_di" bpmnElement="StartEvent_1mnut37">
         <dc:Bounds x="101" y="211" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="75" y="247" width="87" height="25" />
+          <dc:Bounds x="77" y="247" width="84" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Task_0iirfhd_di" bpmnElement="Task_0iirfhd">
+      <bpmndi:BPMNShape id="Task_0iirfhd_di" bpmnElement="Task_0iirfhd" bioc:stroke="blue" bioc:fill="yellow">
         <dc:Bounds x="196" y="189" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="SequenceFlow_1jrsqqc_di" bpmnElement="SequenceFlow_1jrsqqc">
-        <di:waypoint xsi:type="dc:Point" x="137" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="196" y="229" />
+      <bpmndi:BPMNEdge id="SequenceFlow_1jrsqqc_di" bpmnElement="SequenceFlow_1jrsqqc" bioc:stroke="blue" bioc:fill="blue">
+        <di:waypoint x="137" y="229" />
+        <di:waypoint x="196" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="167" y="219" width="0" height="0" />
+          <dc:Bounds x="122" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="ExclusiveGateway_092mc05_di" bpmnElement="ExclusiveGateway_092mc05" isMarkerVisible="true">
         <dc:Bounds x="318" y="204" width="50" height="50" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="320" y="163" width="45" height="25" />
+          <dc:Bounds x="320" y="163" width="45" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_0h9s0mp_di" bpmnElement="SequenceFlow_0h9s0mp">
-        <di:waypoint xsi:type="dc:Point" x="296" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="318" y="229" />
+        <di:waypoint x="296" y="229" />
+        <di:waypoint x="318" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="307" y="219" width="0" height="0" />
+          <dc:Bounds x="262" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Task_02fdytg_di" bpmnElement="Task_02fdytg">
         <dc:Bounds x="430" y="189" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_0pqo7zt_di" bpmnElement="SequenceFlow_0pqo7zt">
-        <di:waypoint xsi:type="dc:Point" x="368" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="430" y="229" />
+        <di:waypoint x="368" y="229" />
+        <di:waypoint x="430" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="392" y="210" width="12" height="12" />
+          <dc:Bounds x="392" y="210" width="13" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Task_04aofbe_di" bpmnElement="Task_04aofbe">
         <dc:Bounds x="430" y="311" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_1qt82pt_di" bpmnElement="SequenceFlow_1qt82pt">
-        <di:waypoint xsi:type="dc:Point" x="343" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="343" y="351" />
-        <di:waypoint xsi:type="dc:Point" x="430" y="351" />
+        <di:waypoint x="343" y="229" />
+        <di:waypoint x="343" y="351" />
+        <di:waypoint x="430" y="351" />
         <bpmndi:BPMNLabel>
           <dc:Bounds x="348" y="282" width="23" height="12" />
         </bpmndi:BPMNLabel>
@@ -183,126 +184,126 @@ can be added, too]]></bpmn:text>
       <bpmndi:BPMNShape id="EndEvent_01a6rq8_di" bpmnElement="EndEvent_01a6rq8">
         <dc:Bounds x="574" y="333" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="561" y="369" width="62" height="25" />
+          <dc:Bounds x="561" y="369" width="62" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_17ohrlh_di" bpmnElement="SequenceFlow_17ohrlh">
-        <di:waypoint xsi:type="dc:Point" x="530" y="351" />
-        <di:waypoint xsi:type="dc:Point" x="574" y="351" />
+        <di:waypoint x="530" y="351" />
+        <di:waypoint x="574" y="351" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="552" y="341" width="0" height="0" />
+          <dc:Bounds x="507" y="341" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Task_12lthpj_di" bpmnElement="Task_12lthpj">
         <dc:Bounds x="555" y="189" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_152w54z_di" bpmnElement="SequenceFlow_152w54z">
-        <di:waypoint xsi:type="dc:Point" x="530" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="555" y="229" />
+        <di:waypoint x="530" y="229" />
+        <di:waypoint x="555" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="543" y="219" width="0" height="0" />
+          <dc:Bounds x="498" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="SequenceFlow_1xvnonz_di" bpmnElement="SequenceFlow_1xvnonz">
-        <di:waypoint xsi:type="dc:Point" x="655" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="687" y="229" />
+        <di:waypoint x="655" y="229" />
+        <di:waypoint x="687" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="671" y="219" width="0" height="0" />
+          <dc:Bounds x="626" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
-      <bpmndi:BPMNShape id="EventBasedGateway_0qdxz70_di" bpmnElement="EventBasedGateway_0qdxz70" bioc:fill="yellow" bioc:stroke="fuchsia">
+      <bpmndi:BPMNShape id="EventBasedGateway_0qdxz70_di" bpmnElement="EventBasedGateway_0qdxz70">
         <dc:Bounds x="687" y="204" width="50" height="50" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="712" y="254" width="0" height="0" />
+          <dc:Bounds x="667" y="254" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="IntermediateCatchEvent_1ias0p2_di" bpmnElement="IntermediateCatchEvent_1ias0p2" bioc:stroke="fuchsia" bioc:fill="yellow">
+      <bpmndi:BPMNShape id="IntermediateCatchEvent_1ias0p2_di" bpmnElement="IntermediateCatchEvent_1ias0p2">
         <dc:Bounds x="766" y="113" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="751" y="76" width="65" height="24" />
+          <dc:Bounds x="752" y="76" width="63" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="SequenceFlow_0mbw4et_di" bpmnElement="SequenceFlow_0mbw4et" bioc:stroke="fuchsia">
-        <di:waypoint xsi:type="dc:Point" x="712" y="204" />
-        <di:waypoint xsi:type="dc:Point" x="712" y="131" />
-        <di:waypoint xsi:type="dc:Point" x="766" y="131" />
+      <bpmndi:BPMNEdge id="SequenceFlow_0mbw4et_di" bpmnElement="SequenceFlow_0mbw4et">
+        <di:waypoint x="712" y="204" />
+        <di:waypoint x="712" y="131" />
+        <di:waypoint x="766" y="131" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="712" y="158" width="0" height="0" />
+          <dc:Bounds x="667" y="158" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
-      <bpmndi:BPMNShape id="Task_0eti3m2_di" bpmnElement="Task_0eti3m2" bioc:stroke="darkgreen" bioc:fill="green">
+      <bpmndi:BPMNShape id="Task_0eti3m2_di" bpmnElement="Task_0eti3m2">
         <dc:Bounds x="834" y="91" width="100" height="80" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="SequenceFlow_01w8xpk_di" bpmnElement="SequenceFlow_01w8xpk" bioc:stroke="fuchsia">
-        <di:waypoint xsi:type="dc:Point" x="802" y="131" />
-        <di:waypoint xsi:type="dc:Point" x="834" y="131" />
+      <bpmndi:BPMNEdge id="SequenceFlow_01w8xpk_di" bpmnElement="SequenceFlow_01w8xpk">
+        <di:waypoint x="802" y="131" />
+        <di:waypoint x="834" y="131" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="818" y="121" width="0" height="0" />
+          <dc:Bounds x="773" y="121" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="ExclusiveGateway_0lk2nir_di" bpmnElement="ExclusiveGateway_0lk2nir" isMarkerVisible="true">
         <dc:Bounds x="972" y="106" width="50" height="50" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="960" y="88" width="73" height="13" />
+          <dc:Bounds x="960" y="88" width="73" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_17fk7n7_di" bpmnElement="SequenceFlow_17fk7n7">
-        <di:waypoint xsi:type="dc:Point" x="934" y="131" />
-        <di:waypoint xsi:type="dc:Point" x="972" y="131" />
+        <di:waypoint x="934" y="131" />
+        <di:waypoint x="972" y="131" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="953" y="121" width="0" height="0" />
+          <dc:Bounds x="908" y="121" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Task_1qlbv5i_di" bpmnElement="Task_1qlbv5i">
         <dc:Bounds x="1060" y="91" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_1hytpfi_di" bpmnElement="SequenceFlow_1hytpfi">
-        <di:waypoint xsi:type="dc:Point" x="1022" y="131" />
-        <di:waypoint xsi:type="dc:Point" x="1060" y="131" />
+        <di:waypoint x="1022" y="131" />
+        <di:waypoint x="1060" y="131" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1032" y="111" width="12" height="12" />
+          <dc:Bounds x="1032" y="111" width="13" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="EndEvent_0k9uozu_di" bpmnElement="EndEvent_0k9uozu">
         <dc:Bounds x="1213" y="113" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1200" y="149" width="62" height="25" />
+          <dc:Bounds x="1200" y="149" width="62" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_1u8uz5a_di" bpmnElement="SequenceFlow_1u8uz5a">
-        <di:waypoint xsi:type="dc:Point" x="1160" y="131" />
-        <di:waypoint xsi:type="dc:Point" x="1213" y="131" />
+        <di:waypoint x="1160" y="131" />
+        <di:waypoint x="1213" y="131" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1187" y="116" width="0" height="0" />
+          <dc:Bounds x="1142" y="116" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="IntermediateCatchEvent_037r6f2_di" bpmnElement="IntermediateCatchEvent_037r6f2">
         <dc:Bounds x="766" y="211" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="747" y="181" width="74" height="25" />
+          <dc:Bounds x="748" y="181" width="73" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_024djlt_di" bpmnElement="SequenceFlow_024djlt">
-        <di:waypoint xsi:type="dc:Point" x="737" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="766" y="229" />
+        <di:waypoint x="737" y="229" />
+        <di:waypoint x="766" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="752" y="219" width="0" height="0" />
+          <dc:Bounds x="707" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="Task_1w7bb1w_di" bpmnElement="Task_1w7bb1w">
         <dc:Bounds x="1060" y="189" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_096z65r_di" bpmnElement="SequenceFlow_096z65r">
-        <di:waypoint xsi:type="dc:Point" x="802" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="1060" y="229" />
+        <di:waypoint x="802" y="229" />
+        <di:waypoint x="1060" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="931" y="219" width="0" height="0" />
+          <dc:Bounds x="886" y="219" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="SequenceFlow_17yh2em_di" bpmnElement="SequenceFlow_17yh2em">
-        <di:waypoint xsi:type="dc:Point" x="997" y="156" />
-        <di:waypoint xsi:type="dc:Point" x="997" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="1060" y="229" />
+        <di:waypoint x="997" y="156" />
+        <di:waypoint x="997" y="229" />
+        <di:waypoint x="1060" y="229" />
         <bpmndi:BPMNLabel>
           <dc:Bounds x="962" y="177" width="23" height="12" />
         </bpmndi:BPMNLabel>
@@ -310,20 +311,20 @@ can be added, too]]></bpmn:text>
       <bpmndi:BPMNShape id="EndEvent_0nfuudw_di" bpmnElement="EndEvent_0nfuudw">
         <dc:Bounds x="1213" y="211" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1196" y="247" width="69" height="13" />
+          <dc:Bounds x="1196" y="247" width="69" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_0ld619c_di" bpmnElement="SequenceFlow_0ld619c">
-        <di:waypoint xsi:type="dc:Point" x="1160" y="229" />
-        <di:waypoint xsi:type="dc:Point" x="1213" y="229" />
+        <di:waypoint x="1160" y="229" />
+        <di:waypoint x="1213" y="229" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1187" y="214" width="0" height="0" />
+          <dc:Bounds x="1142" y="214" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="IntermediateCatchEvent_0d430z1_di" bpmnElement="IntermediateCatchEvent_0d430z1">
         <dc:Bounds x="766" y="348" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="752" y="313" width="64" height="25" />
+          <dc:Bounds x="752" y="313" width="64" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Task_1bwmf45_di" bpmnElement="Task_1bwmf45">
@@ -333,78 +334,78 @@ can be added, too]]></bpmn:text>
         <dc:Bounds x="992" y="313" width="100" height="80" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="SequenceFlow_0krol9j_di" bpmnElement="SequenceFlow_0krol9j">
-        <di:waypoint xsi:type="dc:Point" x="953" y="353" />
-        <di:waypoint xsi:type="dc:Point" x="992" y="353" />
+        <di:waypoint x="953" y="353" />
+        <di:waypoint x="992" y="353" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="973" y="338" width="0" height="0" />
+          <dc:Bounds x="928" y="338" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNShape id="EndEvent_119yhl0_di" bpmnElement="EndEvent_119yhl0">
         <dc:Bounds x="1213" y="348" width="36" height="36" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1200" y="384" width="62" height="25" />
+          <dc:Bounds x="1200" y="384" width="62" height="24" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
       <bpmndi:BPMNShape id="Participant_0j5gs6j_di" bpmnElement="Participant_0igvg0r">
         <dc:Bounds x="313" y="548" width="378" height="60" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="MessageFlow_11bysyp_di" bpmnElement="MessageFlow_11bysyp" bioc:stroke="fuchsia">
-        <di:waypoint xsi:type="dc:Point" x="464" y="391" />
-        <di:waypoint xsi:type="dc:Point" x="464" y="548" />
+      <bpmndi:BPMNEdge id="MessageFlow_11bysyp_di" bpmnElement="MessageFlow_11bysyp">
+        <di:waypoint x="464" y="391" />
+        <di:waypoint x="464" y="548" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="479" y="469.5" width="0" height="0" />
+          <dc:Bounds x="434" y="470" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="MessageFlow_1qyovto_di" bpmnElement="MessageFlow_1qyovto" bioc:stroke="fuchsia">
-        <di:waypoint xsi:type="dc:Point" x="501" y="548" />
-        <di:waypoint xsi:type="dc:Point" x="501" y="391" />
+      <bpmndi:BPMNEdge id="MessageFlow_1qyovto_di" bpmnElement="MessageFlow_1qyovto">
+        <di:waypoint x="501" y="548" />
+        <di:waypoint x="501" y="391" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="516" y="469.5" width="0" height="0" />
+          <dc:Bounds x="471" y="470" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
-      <bpmndi:BPMNShape id="TextAnnotation_1ff5m5b_di" bpmnElement="TextAnnotation_1ff5m5b" bioc:stroke="blue">
+      <bpmndi:BPMNShape id="TextAnnotation_1ff5m5b_di" bpmnElement="TextAnnotation_1ff5m5b">
         <dc:Bounds x="515" y="76" width="126" height="48" />
       </bpmndi:BPMNShape>
       <bpmndi:BPMNEdge id="Association_05g2d3y_di" bpmnElement="Association_05g2d3y">
-        <di:waypoint xsi:type="dc:Point" x="510" y="189" />
-        <di:waypoint xsi:type="dc:Point" x="560" y="124" />
+        <di:waypoint x="510" y="189" />
+        <di:waypoint x="560" y="124" />
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="SequenceFlow_02klp91_di" bpmnElement="SequenceFlow_02klp91">
-        <di:waypoint xsi:type="dc:Point" x="712" y="254" />
-        <di:waypoint xsi:type="dc:Point" x="712" y="366" />
-        <di:waypoint xsi:type="dc:Point" x="766" y="366" />
+        <di:waypoint x="712" y="254" />
+        <di:waypoint x="712" y="366" />
+        <di:waypoint x="766" y="366" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="727" y="310" width="0" height="0" />
+          <dc:Bounds x="682" y="310" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="SequenceFlow_1xbxd38_di" bpmnElement="SequenceFlow_1xbxd38">
-        <di:waypoint xsi:type="dc:Point" x="802" y="366" />
-        <di:waypoint xsi:type="dc:Point" x="829" y="366" />
+        <di:waypoint x="802" y="366" />
+        <di:waypoint x="829" y="366" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="816" y="351" width="0" height="0" />
+          <dc:Bounds x="771" y="351" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
       <bpmndi:BPMNEdge id="SequenceFlow_1ooycy6_di" bpmnElement="SequenceFlow_1ooycy6">
-        <di:waypoint xsi:type="dc:Point" x="1118" y="366" />
-        <di:waypoint xsi:type="dc:Point" x="1166" y="366" />
-        <di:waypoint xsi:type="dc:Point" x="1166" y="366" />
-        <di:waypoint xsi:type="dc:Point" x="1213" y="366" />
+        <di:waypoint x="1118" y="366" />
+        <di:waypoint x="1166" y="366" />
+        <di:waypoint x="1166" y="366" />
+        <di:waypoint x="1213" y="366" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="1181" y="366" width="0" height="0" />
+          <dc:Bounds x="1136" y="366" width="90" height="0" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNEdge>
-      <bpmndi:BPMNShape id="Transaction_0eoggc0_di" bpmnElement="SubProcess_12gfrt8" isExpanded="true" bioc:fill="#66CC99" bioc:stroke="#336633">
+      <bpmndi:BPMNShape id="Transaction_0eoggc0_di" bpmnElement="SubProcess_12gfrt8" isExpanded="true">
         <dc:Bounds x="829" y="288" width="289" height="155" />
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="DataStoreReference_1clvrcw_di" bpmnElement="DataStoreReference_1clvrcw" bioc:stroke="red" bioc:fill="orange">
+      <bpmndi:BPMNShape id="DataStoreReference_1clvrcw_di" bpmnElement="DataStoreReference_1clvrcw">
         <dc:Bounds x="143" y="364" width="50" height="50" />
         <bpmndi:BPMNLabel>
-          <dc:Bounds x="154" y="414" width="28" height="12" />
+          <dc:Bounds x="154" y="414" width="29" height="12" />
         </bpmndi:BPMNLabel>
       </bpmndi:BPMNShape>
-      <bpmndi:BPMNEdge id="DataInputAssociation_1ncouqr_di" bpmnElement="DataInputAssociation_1ncouqr" bioc:stroke="red">
-        <di:waypoint xsi:type="dc:Point" x="180" y="364" />
-        <di:waypoint xsi:type="dc:Point" x="226" y="269" />
+      <bpmndi:BPMNEdge id="DataInputAssociation_1ncouqr_di" bpmnElement="DataInputAssociation_1ncouqr">
+        <di:waypoint x="180" y="364" />
+        <di:waypoint x="226" y="269" />
       </bpmndi:BPMNEdge>
     </bpmndi:BPMNPlane>
   </bpmndi:BPMNDiagram>
diff --git a/test/spec/NavigatedViewerSpec.js b/test/spec/NavigatedViewerSpec.js
index 825b8adb..e36fffd9 100644
--- a/test/spec/NavigatedViewerSpec.js
+++ b/test/spec/NavigatedViewerSpec.js
@@ -1,19 +1,19 @@
 import NavigatedViewer from 'lib/NavigatedViewer';
 
+import TestContainer from 'mocha-test-container-support';
 
 describe('NavigatedViewer', function() {
 
   var container;
 
   beforeEach(function() {
-    container = document.createElement('div');
-    document.body.appendChild(container);
+    container = TestContainer.get(this);
   });
 
-
-
   function createViewer(xml, done) {
-    var viewer = new NavigatedViewer({ container: container });
+    var viewer = new NavigatedViewer({
+      container: container
+    });
 
     viewer.importXML(xml, function(err, warnings) {
       done(err, warnings, viewer);
diff --git a/test/spec/draw/BpmnRendererSpec.js b/test/spec/draw/BpmnRendererSpec.js
index 16badb6f..50d364fd 100644
--- a/test/spec/draw/BpmnRendererSpec.js
+++ b/test/spec/draw/BpmnRendererSpec.js
@@ -16,6 +16,12 @@ import {
   query as domQuery
 } from 'min-dom';
 
+import { isAny } from 'lib/features/modeling/util/ModelingUtil';
+
+import {
+  getDi
+} from 'lib/draw/BpmnRenderUtil';
+
 function checkErrors(done) {
   return function(err, warnings) {
     expect(warnings).to.be.empty;
@@ -177,12 +183,6 @@ describe('draw - bpmn renderer', function() {
   });
 
 
-  it('should render colors', function(done) {
-    var xml = require('../../fixtures/bpmn/draw/colors.bpmn');
-    bootstrapViewer(xml)(checkErrors(done));
-  });
-
-
   it('should render call activity', function(done) {
     var xml = require('../../fixtures/bpmn/draw/call-activity.bpmn');
 
@@ -249,7 +249,10 @@ describe('draw - bpmn renderer', function() {
 
         expect(markers).to.have.length(5);
         expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[A-Za-z0-9]{25}$/);
-        expect(markers[4].id).to.match(/^messageflow-start-white-fuchsia-[A-Za-z0-9]{25}$/);
+        expect(markers[1].id).to.match(/^sequenceflow-end-blue-blue-[A-Za-z0-9]{25}$/);
+        expect(markers[2].id).to.match(/^association-end-white-black-[A-Za-z0-9]{25}$/);
+        expect(markers[3].id).to.match(/^messageflow-end-white-black-[A-Za-z0-9]{25}$/);
+        expect(markers[4].id).to.match(/^messageflow-start-white-black-[A-Za-z0-9]{25}$/);
       })();
 
       done(err);
@@ -292,6 +295,113 @@ describe('draw - bpmn renderer', function() {
   });
 
 
+  describe('colors', function() {
+
+    var xml = require('../../fixtures/bpmn/draw/colors.bpmn');
+
+
+    it('should render colors without warnings and errors', function(done) {
+      bootstrapViewer(xml)(checkErrors(done));
+    });
+
+
+    describe('default colors', function() {
+
+      var defaultFillColor = 'red',
+          defaultStrokeColor = 'lime';
+
+      // TODO(philippfromme): remove once PhantomJS is not used anymore
+      var hexValues = {
+        blue: '#0000ff',
+        lime: '#00ff00',
+        red: '#ff0000',
+        yellow: '#ffff00'
+      };
+
+      beforeEach(bootstrapViewer(xml,{
+        renderer: {
+          defaultFillColor: defaultFillColor,
+          defaultStrokeColor: defaultStrokeColor
+        }
+      }));
+
+      function expectFillColor(element, color) {
+        expect([ color, hexValues[ color ]]).to.include(element.style.fill);
+      }
+
+      function expectStrokeColor(element, color) {
+        expect([ color, hexValues[ color ]]).to.include(element.style.stroke);
+      }
+
+      /**
+       * Expect colors depending on element type.
+       *
+       * @param {djs.model.base} element - Element.
+       * @param {SVG} gfx - Graphics of element.
+       * @param {String} fillColor - Fill color to expect.
+       * @param {String} strokeColor - Stroke color to expect.
+       */
+      function expectColors(element, gfx, fillColor, strokeColor) {
+        var djsVisual = domQuery('.djs-visual', gfx);
+
+        var circle, path, polygon, polyline, rect, text;
+
+        if (element.labelTarget) {
+          text = domQuery('text', djsVisual);
+
+          expectFillColor(text, strokeColor);
+        } else if (element.waypoints) {
+          path = domQuery('path', djsVisual);
+          polyline = domQuery('polyline', djsVisual);
+
+          expectStrokeColor(path || polyline, strokeColor);
+        } else if (isAny(element, [ 'bpmn:StartEvent', 'bpmn:EndEvent' ])) {
+          circle = domQuery('circle', djsVisual);
+
+          expectFillColor(circle, fillColor);
+          expectStrokeColor(circle, strokeColor);
+        } else if (isAny(element, [ 'bpmn:Task', 'bpmn:SubProcess', 'bpmn:Particpant' ])) {
+          rect = domQuery('rect', djsVisual);
+          text = domQuery('text', djsVisual);
+
+          expectFillColor(rect, fillColor);
+          expectStrokeColor(rect, strokeColor);
+          expectFillColor(text, strokeColor);
+        } else if (isAny(element, [ 'bpmn:Gateway' ])) {
+          polygon = domQuery('polygon', djsVisual);
+
+          expectFillColor(polygon, fillColor);
+          expectStrokeColor(polygon, strokeColor);
+        }
+      }
+
+
+      it('should render default colors without overriding', inject(function(canvas, elementRegistry) {
+        var rootElement = canvas.getRootElement();
+
+        elementRegistry.forEach(function(e) {
+          if (e === rootElement) {
+            return;
+          }
+
+          var gfx = elementRegistry.getGraphics(e),
+              di = getDi(e),
+              fillColor = di.get('bioc:fill'),
+              strokeColor = di.get('bioc:stroke');
+
+          if (fillColor || strokeColor) {
+            expectColors(e, gfx, fillColor, strokeColor);
+          } else {
+            expectColors(e, gfx, defaultFillColor, defaultStrokeColor);
+          }
+        });
+      }));
+
+    });
+
+  });
+
+
   describe('path', function() {
 
     var diagramXML = require('./BpmnRenderer.simple-cropping.bpmn');