Pre-render text images for configured scale

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

@@ -46,15 +46,17 @@ describe('ol.rendering.style.Text', function() {
 
   describe('#render', function() {
 
-    function createFeatures() {
+    function createFeatures(opt_scale) {
+      var scale = opt_scale || 1;
       var feature;
       feature = new ol.Feature({
         geometry: new ol.geom.Point([-20, 18])
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           text: 'hello',
-          font: '10px'
+          font: '10px sans-serif'
         })
       }));
       vectorSource.addFeature(feature);
@@ -64,10 +66,11 @@ describe('ol.rendering.style.Text', function() {
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           text: 'hello',
           fill: new ol.style.Fill({
             color: 'red',
-            font: '12px'
+            font: '12px sans-serif'
           }),
           stroke: new ol.style.Stroke({
             color: '#000',
@@ -82,9 +85,10 @@ describe('ol.rendering.style.Text', function() {
       });
       feature.setStyle(new ol.style.Style({
         text: new ol.style.Text({
+          scale: scale,
           rotateWithView: true,
           text: 'hello',
-          font: '10px',
+          font: '10px sans-serif',
           stroke: new ol.style.Stroke({
             color: [10, 10, 10, 0.5]
           })
@@ -100,7 +104,7 @@ describe('ol.rendering.style.Text', function() {
     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, strokeColor, strokeWidth) {
+    function createLineString(coords, textAlign, maxAngle, strokeColor, strokeWidth, scale) {
       var geom = new ol.geom.LineString();
       geom.setFlatCoordinates('XY', coords);
       var style = new ol.style.Style({
@@ -110,6 +114,7 @@ describe('ol.rendering.style.Text', function() {
         text: new ol.style.Text({
           text: 'Hello world',
           font: 'bold 14px sans-serif',
+          scale: scale || 1,
           textAlign: textAlign,
           maxAngle: maxAngle,
           placement: 'line',
@@ -161,6 +166,12 @@ describe('ol.rendering.style.Text', function() {
       expectResemble(map, 'rendering/ol/style/expected/text-canvas-hidpi.png', 2.8, done);
     });
 
+    it('renders text correctly with scale != 1', function(done) {
+      createMap('canvas');
+      createFeatures(3);
+      expectResemble(map, 'rendering/ol/style/expected/text-canvas-scale.png', 6, done);
+    });
+
     it('renders multiline text with alignment options', function(done) {
       createMap('canvas');
       var feature;
@@ -293,6 +304,12 @@ describe('ol.rendering.style.Text', function() {
         expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice.png', 2.8, done);
       });
 
+      it('renders text along a linestring with scale != 1', function(done) {
+        createMap('canvas');
+        createLineString(nicePath, undefined, undefined, undefined, undefined, 2);
+        expectResemble(map, 'rendering/ol/style/expected/text-linestring-nice-scale.png', 8, done);
+      });
+
       it('aligns text along a linestring correctly with `textBaseline` option', function(done) {
         createMap('canvas');
         createLineString(nicePath, undefined, undefined, 'cyan', 3);