Only call beginPath once per MultiPolygon

src/ol/render/canvas/immediate.js

@@ -681,16 +681,16 @@ ol.render.canvas.Immediate.prototype.drawMultiPolygon = function(geometry) {
     var endss = geometry.getEndss();
     var stride = geometry.getStride();
     var i, ii;
+    context.beginPath();
     for (i = 0, ii = endss.length; i < ii; ++i) {
       var ends = endss[i];
-      context.beginPath();
       offset = this.drawRings_(flatCoordinates, offset, ends, stride);
-      if (this.fillState_) {
+    }
-        context.fill();
+    if (this.fillState_) {
-      }
+      context.fill();
-      if (this.strokeState_) {
+    }
-        context.stroke();
+    if (this.strokeState_) {
-      }
+      context.stroke();
     }
   }
   if (this.text_ !== '') {

test/test-extensions.js

@@ -383,7 +383,12 @@
 
   function resembleCanvas(canvas, referenceImage, tolerance, done) {
     if (showMap) {
-      document.body.appendChild(canvas);
+      var wrapper = document.createElement('div');
+      wrapper.style.width = canvas.width + 'px';
+      wrapper.style.height = canvas.height + 'px';
+      wrapper.appendChild(canvas);
+      document.body.appendChild(wrapper);
+      document.body.appendChild(document.createTextNode(referenceImage));
     }
 
     resemble(referenceImage)

test_rendering/spec/ol/layer/clip.test.js

@@ -0,0 +1,110 @@
+goog.provide('layer clipping');
+
+goog.require('ol.Map');
+goog.require('ol.View');
+goog.require('ol.geom.MultiPolygon');
+goog.require('ol.layer.Tile');
+goog.require('ol.source.XYZ');
+goog.require('ol.style.Stroke');
+goog.require('ol.style.Style');
+
+
+describe('layer clipping', function() {
+
+  function onLoad(source, callback) {
+    var loading = 0;
+    var loaded = 0;
+    var called = false;
+
+    function check() {
+      if (!called && loading > 0 && loaded === loading) {
+        callback();
+      }
+    }
+
+    source.on('tileloadstart', function() {
+      ++loading;
+    });
+    source.on('tileloadend', function() {
+      ++loaded;
+      setTimeout(check, 10);
+    });
+    source.on('tileloaderror', function() {
+      callback(new Error('Tile loading failed'));
+      called = true;
+    });
+  }
+
+
+  describe('MultiPolygon clipping', function() {
+
+    var map = null;
+    beforeEach(function() {
+      map = new ol.Map({
+        target: createMapDiv(256, 256),
+        view: new ol.View({
+          center: [0, 0],
+          zoom: 0
+        })
+      });
+    });
+
+    afterEach(function() {
+      disposeMap(map);
+      map = null;
+    });
+
+    it('clips to all parts of the MultiPolygon', function(done) {
+
+      var source = new ol.source.XYZ({
+        url: 'spec/ol/data/tiles/osm/{z}/{x}/{y}.png'
+      });
+
+      var layer = new ol.layer.Tile({
+        source: source
+      });
+
+      var geometry = new ol.geom.MultiPolygon([
+        [[[-80, -40], [-40, 0], [-80, 40], [-120, 0], [-80, -40]]],
+        [[[80, -40], [120, 0], [80, 40], [40, 0], [80, -40]]]
+      ]).transform('EPSG:4326', 'EPSG:3857');
+
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          width: 2,
+          color: 'blue'
+        })
+      });
+
+      layer.on('precompose', function(event) {
+        var context = event.context;
+        context.save();
+
+        var vectorContext = event.vectorContext;
+        vectorContext.setStyle(style);
+        vectorContext.drawGeometry(geometry);
+
+        context.clip();
+      });
+
+      layer.on('postcompose', function(event) {
+        var context = event.context;
+        context.restore();
+
+        var vectorContext = event.vectorContext;
+        vectorContext.setStyle(style);
+        vectorContext.drawGeometry(geometry);
+      });
+
+      onLoad(source, function(err) {
+        if (err) {
+          return done(err);
+        }
+        expectResemble(map, 'spec/ol/layer/expected/multipolygon-clip.png', IMAGE_TOLERANCE, done);
+      });
+
+      map.addLayer(layer);
+
+    });
+  });
+});