test(draw): double check marker coloring

* improves color detection to not fail on CI
* verifies message flow markers are being re-used

test/spec/draw/BpmnRenderer.connection-colors.bpmn

@@ -0,0 +1,73 @@
+<?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:bioc="http://bpmn.io/schema/bpmn/biocolor/1.0" id="Definitions_19dhhgf" targetNamespace="http://bpmn.io/schema/bpmn" exporter="bpmn-js (https://demo.bpmn.io)" exporterVersion="3.3.1">
+  <bpmn:collaboration id="Collaboration_1pbeyt7">
+    <bpmn:participant id="Participant_0ibnr2x" processRef="Process_1" />
+    <bpmn:participant id="Participant_1idiy26" processRef="Process_0x3gxd5" />
+    <bpmn:messageFlow id="MessageFlow_1facuin" sourceRef="Participant_0ibnr2x" targetRef="Participant_1idiy26" />
+    <bpmn:messageFlow id="MessageFlow_1vmbq3n" sourceRef="Participant_1idiy26" targetRef="Participant_0ibnr2x" />
+    <bpmn:textAnnotation id="TextAnnotation_1eywcut">
+      <bpmn:text>YO</bpmn:text>
+    </bpmn:textAnnotation>
+    <bpmn:association id="Association_0r1hup8" sourceRef="Participant_0ibnr2x" targetRef="TextAnnotation_1eywcut" />
+  </bpmn:collaboration>
+  <bpmn:process id="Process_1" isExecutable="true" />
+  <bpmn:process id="Process_0x3gxd5" isExecutable="false">
+    <bpmn:dataStoreReference id="DataStoreReference_046zpex" />
+    <bpmn:task id="Task_049utn6">
+      <bpmn:property id="Property_0kufae0" name="__targetRef_placeholder" />
+      <bpmn:dataInputAssociation id="DataInputAssociation">
+        <bpmn:sourceRef>DataStoreReference_046zpex</bpmn:sourceRef>
+        <bpmn:targetRef>Property_0kufae0</bpmn:targetRef>
+      </bpmn:dataInputAssociation>
+      <bpmn:dataOutputAssociation id="DataOutputAssociation_0ixhole">
+        <bpmn:targetRef>DataObjectReference_130kij0</bpmn:targetRef>
+      </bpmn:dataOutputAssociation>
+    </bpmn:task>
+    <bpmn:dataObjectReference id="DataObjectReference_130kij0" dataObjectRef="DataObject_1k959a8" />
+    <bpmn:dataObject id="DataObject_1k959a8" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Collaboration_1pbeyt7">
+      <bpmndi:BPMNShape id="Participant_0ibnr2x_di" bpmnElement="Participant_0ibnr2x" isHorizontal="true">
+        <dc:Bounds x="201" y="151" width="468" height="162" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="TextAnnotation_1eywcut_di" bpmnElement="TextAnnotation_1eywcut">
+        <dc:Bounds x="247" y="81" width="100" height="30" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="Association_0r1hup8_di" bpmnElement="Association_0r1hup8" bioc:stroke="#8E24AA" bioc:fill="#E1BEE7">
+        <di:waypoint x="253" y="151" />
+        <di:waypoint x="261" y="111" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="Participant_1idiy26_di" bpmnElement="Participant_1idiy26" isHorizontal="true">
+        <dc:Bounds x="201" y="374" width="473" height="192" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="MessageFlow_1facuin_di" bpmnElement="MessageFlow_1facuin" bioc:stroke="rgb(23, 100, 344)" bioc:fill="rgb(23, 100, 344)">
+        <di:waypoint x="341" y="313" />
+        <di:waypoint x="341" y="374" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="DataStoreReference_046zpex_di" bpmnElement="DataStoreReference_046zpex">
+        <dc:Bounds x="289" y="483" width="50" height="50" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Task_049utn6_di" bpmnElement="Task_049utn6">
+        <dc:Bounds x="383" y="404" width="100" height="80" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="DataInputAssociation_di" bpmnElement="DataInputAssociation" bioc:stroke="rgb(23, 100, 344)" bioc:fill="rgb(23, 100, 344)">
+        <di:waypoint x="339" y="519" />
+        <di:waypoint x="412" y="519" />
+        <di:waypoint x="423" y="484" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="DataObjectReference_130kij0_di" bpmnElement="DataObjectReference_130kij0">
+        <dc:Bounds x="537" y="483" width="36" height="50" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNEdge id="DataOutputAssociation_0ixhole_di" bpmnElement="DataOutputAssociation_0ixhole" bioc:stroke="#8E24AA" bioc:fill="#E1BEE7">
+        <di:waypoint x="440" y="484" />
+        <di:waypoint x="446" y="520" />
+        <di:waypoint x="537" y="510" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="MessageFlow_1vmbq3n_di" bpmnElement="MessageFlow_1vmbq3n" bioc:stroke="rgb(23, 100, 344)" bioc:fill="rgb(23, 100, 344)">
+        <di:waypoint x="438" y="374" />
+        <di:waypoint x="438" y="313" />
+      </bpmndi:BPMNEdge>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

test/spec/draw/BpmnRendererSpec.js

@@ -271,13 +271,33 @@ describe('draw - bpmn renderer', function() {
         var markers = svg.querySelectorAll('marker');
 
         expect(markers).to.have.length(7);
-        expect(markers[0].id).to.match(/^sequenceflow-end-white-black-[A-Za-z0-9]{25}$/);
+        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-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-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-_3399aa-[A-Za-z0-9]{25}$/);
+        expect(markers[4].id).to.match(/^association-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
-        expect(markers[4].id).to.match(/^association-end-white-black-[A-Za-z0-9]{25}$/);
+        expect(markers[5].id).to.match(/^messageflow-end-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
-        expect(markers[5].id).to.match(/^messageflow-end-white-black-[A-Za-z0-9]{25}$/);
+        expect(markers[6].id).to.match(/^messageflow-start-_FFE0B2-_FB8C00-[A-Za-z0-9]{25}$/);
-        expect(markers[6].id).to.match(/^messageflow-start-white-black-[A-Za-z0-9]{25}$/);
+      })();
+
+      done(err);
+    });
+  });
+
+
+  it('should properly render connection markers (2)', function(done) {
+
+    var xml = require('./BpmnRenderer.connection-colors.bpmn');
+    bootstrapViewer(xml).call(this, function(err) {
+
+      inject(function(canvas) {
+        var svg = canvas._svg;
+        var 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}$/);
+        expect(markers[1].id).to.match(/^association-end-_E1BEE7-_8E24AA-[A-Za-z0-9]{25}$/);
+        expect(markers[2].id).to.match(/^messageflow-end-rgb_23_100_344_-rgb_23_100_344_-[A-Za-z0-9]{25}$/);
+        expect(markers[3].id).to.match(/^messageflow-start-rgb_23_100_344_-rgb_23_100_344_-[A-Za-z0-9]{25}$/);
       })();
 
       done(err);
@@ -336,14 +356,26 @@ describe('draw - bpmn renderer', function() {
           defaultStrokeColor = 'lime';
 
       // TODO(philippfromme): remove once PhantomJS is not used anymore
-      var conversionValues = {
+      function expectedColors(color) {
-        blue: '#0000ff',
+
-        lime: '#00ff00',
+        var conversionValues = {
-        red: '#ff0000',
+          blue: '#0000ff',
-        yellow: '#ffff00',
+          lime: '#00ff00',
-        'rgb(251, 140, 0)': '#fb8c00',
+          red: '#ff0000',
-        '#3399aa': 'rgb(51, 153, 170)'
+          yellow: '#ffff00',
-      };
+          'rgb(251, 140, 0)': '#fb8c00',
+          '#3399aa': 'rgb(51, 153, 170)'
+        };
+
+        return [
+          color,
+          color.toLowerCase(),
+          color.toUpperCase(),
+          conversionValues[ color ],
+          conversionValues[ color ] && conversionValues[ color ].toLowerCase(),
+          conversionValues[ color ] && conversionValues[ color ].toUpperCase()
+        ];
+      }
 
       beforeEach(bootstrapViewer(xml,{
         bpmnRenderer: {
@@ -353,11 +385,11 @@ describe('draw - bpmn renderer', function() {
       }));
 
       function expectFillColor(element, color) {
-        expect([ color, conversionValues[ color ]]).to.include(element.style.fill);
+        expect(expectedColors(color)).to.include(element.style.fill);
       }
 
       function expectStrokeColor(element, color) {
-        expect([ color, conversionValues[ color ]]).to.include(element.style.stroke);
+        expect(expectedColors(color)).to.include(element.style.stroke);
       }
 
       /**