Add rendering tests

test/rendering/ol/style/text.test.js

@@ -1,7 +1,9 @@
-
-
 goog.require('ol.Feature');
+goog.require('ol.geom.LineString');
+goog.require('ol.geom.MultiLineString');
+goog.require('ol.geom.MultiPolygon');
 goog.require('ol.geom.Point');
+goog.require('ol.geom.Polygon');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.layer.Vector');
@@ -90,6 +92,54 @@ describe('ol.rendering.style.Text', function() {
       vectorSource.addFeature(feature);
     }
 
+    var nicePath = [
+      20, 33, 40, 31, 60, 30, 80, 31, 100, 33, 120, 37, 140, 39, 160, 40,
+      180, 39, 200, 37, 220, 33, 240, 31, 260, 30, 280, 31, 300, 33
+    ];
+    var uglyPath = [163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+    var polygon = [151, 17, 163, 22, 159, 30, 150, 30, 143, 24, 151, 17];
+
+    function createLineString(coords, textAlign, maxAngle) {
+      var geom = new ol.geom.LineString();
+      geom.setFlatCoordinates('XY', coords);
+      var style = new ol.style.Style({
+        stroke: new ol.style.Stroke({
+          color: 'red'
+        }),
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 14px sans-serif',
+          textAlign: textAlign,
+          maxAngle: maxAngle,
+          placement: 'line',
+          stroke: new ol.style.Stroke({
+            color: 'white'
+          })
+        })
+      });
+      var feature = new ol.Feature(geom);
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      geom = geom.clone();
+      geom.translate(0, 5);
+      feature = new ol.Feature(geom);
+      style = style.clone();
+      style.getText().setTextBaseline('top');
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      geom = geom.clone();
+      geom.translate(0, -10);
+      feature = new ol.Feature(geom);
+      style = style.clone();
+      style.getText().setTextBaseline('bottom');
+      feature.setStyle(style);
+      vectorSource.addFeature(feature);
+
+      map.getView().fit(vectorSource.getExtent());
+    }
+
     it('tests the canvas renderer without rotation', function(done) {
       createMap('canvas');
       createFeatures();
@@ -191,6 +241,136 @@ describe('ol.rendering.style.Text', function() {
       expectResemble(map, 'rendering/ol/style/expected/text-align-offset-canvas.png', 5, done);
     });
 
+    describe('Text along an ugly upside down path, keep text upright', function() {
+
+      it('renders text along a linestring with auto-align', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-auto.png', 3.6, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'center\'`', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'center');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-center.png', 3.6, done);
+      });
+
+      it('omits text along a linestring with `textAlign: \'left\'` when > maxAngle', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'left');
+        vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
+      });
+
+      it('omits text along a linestring with `textAlign: \'right\'` when > maxAngle', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'right');
+        vectorSource.getFeatures()[0].getStyle().getText().setTextAlign('left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-omit.png', IMAGE_TOLERANCE, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'left\'` and no angle limit', function(done) {
+        createMap('canvas');
+        createLineString(uglyPath, 'left', Infinity);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left.png', 3.5, done);
+      });
+
+    });
+
+    describe('Text along a nice path', function() {
+
+      it('renders text along a linestring', function(done) {
+        createMap('canvas');
+        createLineString(nicePath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.5, done);
+      });
+
+      it('renders text along a linestring with `textAlign: \'left\'`', function(done) {
+        createMap('canvas');
+        createLineString(nicePath, 'left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice.png', 2.5, done);
+      });
+
+      it('renders text along a rotated linestring', function(done) {
+        createMap('canvas');
+        map.getView().setRotation(Math.PI);
+        createLineString(nicePath);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-rotated.png', 4.5, done);
+      });
+
+      it('renders text along a rotated linestring with `textAlign: \'left\'`', function(done) {
+        createMap('canvas');
+        map.getView().setRotation(Math.PI);
+        createLineString(nicePath, 'left');
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-left-nice-rotated.png', 4.5, done);
+      });
+    });
+
+    it('renders text along a MultiLineString', function(done) {
+      createMap('canvas');
+      var line = new ol.geom.LineString();
+      line.setFlatCoordinates('XY', nicePath);
+      var geom = new ol.geom.MultiLineString(null);
+      geom.appendLineString(line);
+      line.translate(0, 50);
+      geom.appendLineString(line);
+      line.translate(0, -100);
+      geom.appendLineString(line);
+      var feature = new ol.Feature(geom);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          placement: 'line',
+          font: 'bold 30px sans-serif'
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-multilinestring.png', 6.9, done);
+    });
+
+    it('renders text along a Polygon', function(done) {
+      createMap('canvas');
+      var geom = new ol.geom.Polygon(null);
+      geom.setFlatCoordinates('XY', polygon, [polygon.length]);
+      var feature = new ol.Feature(geom);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 24px sans-serif',
+          placement: 'line',
+          exceedLength: true
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-polygon.png', IMAGE_TOLERANCE, done);
+    });
+
+    it('renders text along a MultiPolygon', function(done) {
+      createMap('canvas');
+      var geom = new ol.geom.Polygon(null);
+      geom.setFlatCoordinates('XY', polygon, [polygon.length]);
+      var multiPolygon = new ol.geom.MultiPolygon(null);
+      multiPolygon.appendPolygon(geom);
+      geom.translate(0, 30);
+      multiPolygon.appendPolygon(geom);
+      geom.translate(0, -60);
+      multiPolygon.appendPolygon(geom);
+      var feature = new ol.Feature(multiPolygon);
+      feature.setStyle(new ol.style.Style({
+        text: new ol.style.Text({
+          text: 'Hello world',
+          font: 'bold 24px sans-serif',
+          placement: 'line',
+          exceedLength: true
+        })
+      }));
+      vectorSource.addFeature(feature);
+      map.getView().fit(vectorSource.getExtent());
+      expectResemble(map, 'rendering/ol/style/expected/text-multipolygon.png', 4.4, done);
+    });
+
     where('WebGL').it('tests the webgl renderer without rotation', function(done) {
       createMap('webgl');
       createFeatures();