Add tests to LineStringReplay

test/spec/ol/render/webgl/replay.test.js

@@ -1,6 +1,8 @@
 goog.provide('ol.test.render.webgl.Replay');
 
 goog.require('ol.extent');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
 goog.require('ol.geom.MultiPoint');
 goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
@@ -175,6 +177,209 @@ describe('ol.render.webgl.ImageReplay', function() {
   });
 });
 
+describe('ol.render.webgl.LineStringReplay', function() {
+  var replay;
+
+  var strokeStyle1 = new ol.style.Stroke({
+    color: [0, 255, 0, 0.4]
+  });
+
+  var strokeStyle2 = new ol.style.Stroke({
+    color: [255, 0, 0, 1],
+    lineCap: 'square',
+    lineJoin: 'miter'
+  });
+
+  beforeEach(function() {
+    var tolerance = 0.1;
+    var maxExtent = [-10000, -20000, 10000, 20000];
+    replay = new ol.render.webgl.LineStringReplay(tolerance, maxExtent);
+  });
+
+  describe('#setFillStrokeStyle', function() {
+
+    it('set expected states', function() {
+      replay.setFillStrokeStyle(null, strokeStyle1);
+      expect(replay.state_).not.be(null);
+      expect(replay.state_.lineCap).to.be('round');
+      expect(replay.state_.lineJoin).to.be('round');
+      expect(replay.state_.strokeColor).to.eql([0, 1, 0, 0.4]);
+      expect(replay.state_.lineWidth).to.be(1);
+      expect(replay.state_.miterLimit).to.be(10);
+      expect(replay.state_.changed).to.be(true);
+      expect(replay.styles_).to.have.length(1);
+
+      replay.setFillStrokeStyle(null, strokeStyle2);
+      expect(replay.state_.lineCap).to.be('square');
+      expect(replay.state_.lineJoin).to.be('miter');
+      expect(replay.state_.strokeColor).to.eql([1, 0, 0, 1]);
+      expect(replay.state_.lineWidth).to.be(1);
+      expect(replay.state_.miterLimit).to.be(10);
+      expect(replay.state_.changed).to.be(true);
+      expect(replay.styles_).to.have.length(2);
+
+    });
+  });
+
+  describe('#drawLineString', function() {
+
+    it('sets the buffer data', function() {
+      var linestring;
+
+      linestring = new ol.geom.LineString(
+          [[1000, 2000], [2000, 3000]]);
+      replay.setFillStrokeStyle(null, strokeStyle1);
+      replay.drawLineString(linestring, null);
+      expect(replay.vertices_).to.have.length(56);
+      expect(replay.indices_).to.have.length(18);
+      expect(replay.state_.changed).to.be(false);
+      expect(replay.startIndices_).to.have.length(1);
+      expect(replay.startIndicesFeature_).to.have.length(1);
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 4000], [3000, 3000]]);
+      replay.drawLineString(linestring, null);
+      expect(replay.vertices_).to.have.length(140);
+      expect(replay.indices_).to.have.length(48);
+      expect(replay.state_.changed).to.be(false);
+      expect(replay.startIndices_).to.have.length(2);
+      expect(replay.startIndicesFeature_).to.have.length(2);
+    });
+  });
+
+  describe('#drawMultiLineString', function() {
+
+    it('sets the buffer data', function() {
+      var multilinestring;
+
+      multilinestring = new ol.geom.MultiLineString(
+          [[[1000, 2000], [2000, 3000]],
+          [[1000, 3000], [2000, 4000], [3000, 3000]]]);
+      replay.setFillStrokeStyle(null, strokeStyle1);
+      replay.drawMultiLineString(multilinestring, null);
+      expect(replay.vertices_).to.have.length(140);
+      expect(replay.indices_).to.have.length(48);
+      expect(replay.state_.changed).to.be(false);
+      expect(replay.startIndices_).to.have.length(1);
+      expect(replay.startIndicesFeature_).to.have.length(1);
+    });
+  });
+
+  describe('#drawCoordinates_', function() {
+
+    it('triangulates linestrings', function() {
+      var linestring;
+
+      var stroke = new ol.style.Stroke({
+        color: [0, 255, 0, 1],
+        lineCap: 'butt',
+        lineJoin: 'bevel'
+      });
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 4000], [3000, 3000]]);
+      var flatCoordinates = linestring.getFlatCoordinates();
+      replay.setFillStrokeStyle(null, stroke);
+      replay.drawCoordinates_(flatCoordinates, 0,
+          flatCoordinates.length, 2);
+      expect(replay.indices_).to.eql(
+          [2, 0, 1, 4, 2, 1,
+          2, 4, 3,
+          5, 3, 4, 4, 6, 5]);
+    });
+
+    it('optionally creates miters', function() {
+      var linestring;
+
+      var stroke = new ol.style.Stroke({
+        color: [0, 255, 0, 1],
+        lineCap: 'butt'
+      });
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 4000], [3000, 3000]]);
+      var flatCoordinates = linestring.getFlatCoordinates();
+      replay.setFillStrokeStyle(null, stroke);
+      replay.drawCoordinates_(flatCoordinates, 0,
+          flatCoordinates.length, 2);
+      expect(replay.indices_).to.eql(
+          [2, 0, 1, 4, 2, 1,
+          2, 4, 3, 3, 5, 2,
+          6, 3, 4, 4, 7, 6]);
+    });
+
+    it('optionally creates caps', function() {
+      var linestring;
+
+      var stroke = new ol.style.Stroke({
+        color: [0, 255, 0, 1]
+      });
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 4000], [3000, 3000]]);
+      var flatCoordinates = linestring.getFlatCoordinates();
+      replay.setFillStrokeStyle(null, stroke);
+      replay.drawCoordinates_(flatCoordinates, 0,
+          flatCoordinates.length, 2);
+      expect(replay.indices_).to.eql(
+          [2, 0, 1, 1, 3, 2,
+          4, 2, 3, 6, 4, 3,
+          4, 6, 5, 5, 7, 4,
+          8, 5, 6, 6, 9, 8,
+          10, 8, 9, 9, 11, 10]);
+    });
+
+    it('respects segment orientation', function() {
+      var linestring;
+
+      var stroke = new ol.style.Stroke({
+        color: [0, 255, 0, 1],
+        lineCap: 'butt',
+        lineJoin: 'bevel'
+      });
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 2000], [3000, 3000]]);
+      var flatCoordinates = linestring.getFlatCoordinates();
+      replay.setFillStrokeStyle(null, stroke);
+      replay.drawCoordinates_(flatCoordinates, 0,
+          flatCoordinates.length, 2);
+      expect(replay.indices_).to.eql(
+          [2, 0, 1, 4, 2, 0,
+          2, 4, 3,
+          5, 3, 4, 4, 6, 5]);
+    });
+
+    it('closes boundaries', function() {
+      var linestring;
+
+      var stroke = new ol.style.Stroke({
+        color: [0, 255, 0, 1],
+        lineCap: 'butt',
+        lineJoin: 'bevel'
+      });
+
+      linestring = new ol.geom.LineString(
+          [[1000, 3000], [2000, 4000], [3000, 3000], [1000, 3000]]);
+      var flatCoordinates = linestring.getFlatCoordinates();
+      replay.setFillStrokeStyle(null, stroke);
+      replay.drawCoordinates_(flatCoordinates, 0,
+          flatCoordinates.length, 2);
+      expect(replay.indices_).to.eql(
+          [0, 2, 1, 3, 1, 2,
+          5, 3, 2,
+          3, 5, 4, 6, 4, 5,
+          8, 6, 5,
+          6, 8, 7, 9, 7, 8,
+          10, 9, 8]);
+      expect(replay.vertices_.slice(0, 7)).to.eql(
+          replay.vertices_.slice(-14, -7));
+      expect(replay.vertices_.slice(14, 21)).to.eql(
+          replay.vertices_.slice(-7));
+    });
+  });
+});
+
 
 describe('ol.render.webgl.PolygonReplay', function() {
   var replay;

test_rendering/spec/ol/style/linestring.test.js

@@ -98,5 +98,12 @@ describe('ol.rendering.style.LineString', function() {
           map, 'spec/ol/style/expected/linestring-strokes-canvas.png',
           3.0, done);
     });
+    it('tests the WebGL renderer', function(done) {
+      assertWebGL();
+      map = createMap('webgl');
+      createFeatures();
+      expectResemble(map, 'spec/ol/style/expected/linestring-strokes-webgl.png',
+          3.0, done);
+    });
   });
 });