From c33383d248fd5774ec40e4302bedd72f98bcec26 Mon Sep 17 00:00:00 2001
From: Guillaume Beraudo <guillaume.beraudo@camptocamp.com>
Date: Wed, 12 Jul 2017 10:29:43 +0200
Subject: [PATCH] Add rendering test for transparent layer

---
 .../expected/vector-canvas-transparent.png    | Bin 0 -> 1980 bytes
 test_rendering/spec/ol/layer/vector.test.js   |  39 ++++++++++++++++++
 2 files changed, 39 insertions(+)
 create mode 100644 test_rendering/spec/ol/layer/expected/vector-canvas-transparent.png

diff --git a/test_rendering/spec/ol/layer/expected/vector-canvas-transparent.png b/test_rendering/spec/ol/layer/expected/vector-canvas-transparent.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bf3ff79d4c8ea883f610faa4c5f7c252a03a595
GIT binary patch
literal 1980
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
O0000<MNUMnLSTaY8Hrc`

literal 0
HcmV?d00001

diff --git a/test_rendering/spec/ol/layer/vector.test.js b/test_rendering/spec/ol/layer/vector.test.js
index 4045e064cc..356c2bd3b8 100644
--- a/test_rendering/spec/ol/layer/vector.test.js
+++ b/test_rendering/spec/ol/layer/vector.test.js
@@ -97,6 +97,45 @@ describe('ol.rendering.layer.Vector', function() {
       });
     });
 
+    it('renders transparent layers correctly with the canvas renderer', function(done) {
+      map = createMap('canvas');
+      var smallLine = new ol.Feature(new ol.geom.LineString([
+        [center[0], center[1] - 1],
+        [center[0], center[1] + 1]
+      ]));
+      smallLine.setStyle([
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 75, color: 'red'})
+        }),
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 45, color: 'white'})
+        })
+      ]);
+      source.addFeature(smallLine);
+      var smallLine2 = new ol.Feature(new ol.geom.LineString([
+        [center[0], center[1] - 1000],
+        [center[0], center[1] + 1000]
+      ]));
+      smallLine2.setStyle([
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 35, color: 'blue'})
+        }),
+        new ol.style.Style({
+          stroke: new ol.style.Stroke({width: 15, color: 'green'})
+        })
+      ]);
+      source.addFeature(smallLine2);
+
+      map.addLayer(new ol.layer.Vector({
+        source: source,
+        opacity: 0.5
+      }));
+      map.once('postrender', function() {
+        expectResemble(map, 'spec/ol/layer/expected/vector-canvas-transparent.png',
+            7, done);
+      });
+    });
+
     it('renders rotation correctly with the canvas renderer', function(done) {
       map = createMap('canvas');
       map.getView().setRotation(Math.PI + Math.PI / 4);