Merge pull request #9362 from KaiVolland/text-rendering

Use local font "Ubuntu Regular" for rendering tests

rendering/cases/layer-vector-decluttering/main.js

@@ -90,7 +90,7 @@ layer2.setStyle(function(feature) {
   return new Style({
     text: new Text({
       text: feature.get('text'),
-      font: '12px sans-serif'
+      font: '16px Ubuntu'
     })
   });
 });
@@ -119,7 +119,7 @@ layer3.setStyle(function(feature) {
     }),
     text: new Text({
       text: feature.get('text'),
-      font: '12px sans-serif',
+      font: '16px Ubuntu',
       textBaseline: 'bottom',
       offsetY: -5
     })
@@ -151,7 +151,8 @@ line.setStyle(new Style({
   text: new Text({
     placement: 'line',
     text: 'east-west',
-    font: '12px sans-serif'
+    font: '16px Ubuntu',
+    overflow: true
   })
 }));
 source4.addFeature(point);

rendering/cases/layer-vectorimage-decluttering/main.js

@@ -0,0 +1,79 @@
+import Feature from '../../../src/ol/Feature.js';
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Style from '../../../src/ol/style/Style.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import VectorImageLayer from '../../../src/ol/layer/VectorImage.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Point from '../../../src/ol/geom/Point.js';
+import LineString from '../../../src/ol/geom/LineString.js';
+import Text from '../../../src/ol/style/Text.js';
+
+const center = [1825927.7316762917, 6143091.089223046];
+
+const source = new VectorSource();
+const vectorLayer1 = new VectorImageLayer({
+  source: source,
+  style: function(feature) {
+    return new Style({
+      image: new CircleStyle({
+        radius: 15,
+        stroke: new Stroke({
+          color: 'blue'
+        })
+      }),
+      text: new Text({
+        text: feature.get('text'),
+        font: '16px Ubuntu'
+      })
+    });
+  }
+});
+
+const centerFeature = new Feature({
+  geometry: new Point(center),
+  text: 'center'
+});
+source.addFeature(centerFeature);
+source.addFeature(new Feature({
+  geometry: new Point([center[0] - 540, center[1]]),
+  text: 'west'
+}));
+source.addFeature(new Feature({
+  geometry: new Point([center[0] + 540, center[1]]),
+  text: 'east'
+}));
+
+const line = new Feature(new LineString([
+  [center[0] - 650, center[1] - 200],
+  [center[0] + 650, center[1] - 200]
+]));
+line.setStyle(new Style({
+  stroke: new Stroke({
+    color: '#CCC',
+    width: 12
+  }),
+  text: new Text({
+    placement: 'line',
+    text: 'east-west',
+    font: '16px Ubuntu'
+  })
+}));
+source.addFeature(line);
+
+const map = new Map({
+  pixelRatio: 1,
+  layers: [
+    vectorLayer1
+  ],
+  target: 'map',
+  view: new View({
+    center: center,
+    zoom: 13
+  })
+});
+
+map.getView().fit(source.getExtent());
+
+render({tolerance: 0.02});

rendering/cases/text-style-linestring-nice/main.js

@@ -23,6 +23,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
+    font: '10px Ubuntu',
     placement: 'line'
   })
 }));
@@ -35,11 +36,11 @@ feature2.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Scale 2',
+    font: 'normal 400 12px/1 Ubuntu',
     scale: 2,
     textBaseline: 'bottom',
     textAlign: 'right',
-    placement: 'line',
+    placement: 'line'
-    font: 'bold italic 0.8em serif'
   })
 }));
 vectorSource.addFeature(feature2);
@@ -50,10 +51,10 @@ const feature3 = new Feature({geometry: lineString3});
 feature3.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
+    font: 'italic bold 0.75em Ubuntu',
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -71,6 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'negative offsetX',
+    font: 'normal 400 10px/1 Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -86,6 +88,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     textAlign: 'end',
@@ -101,6 +104,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
     placement: 'line',
     fill: new Fill({color: '#FFC0CB'}),
     stroke: new Stroke({

rendering/cases/text-style-linestring-ugly/main.js

@@ -20,6 +20,7 @@ feature1.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Hello world',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true
   })
@@ -37,7 +38,7 @@ feature2.setStyle(new Style({
     textBaseline: 'bottom',
     textAlign: 'right',
     placement: 'line',
-    font: 'bold italic 0.8em serif',
+    font: 'italic bold 0.5em Ubuntu',
     overflow: true
   })
 }));
@@ -52,7 +53,6 @@ feature3.setStyle(new Style({
     text: 'Set properties'
   })
 }));
-feature3.getStyle().getText().setFont('bold italic 1.2em monospace');
 feature3.getStyle().getText().setTextAlign('left');
 feature3.getStyle().getText().setOffsetX(10);
 feature3.getStyle().getText().setOffsetY(-10);
@@ -72,6 +72,7 @@ feature4.setStyle(new Style({
   stroke: new Stroke({color: 'red'}),
   text: new Text({
     text: 'PLEASE OMIT ME IM UGLY',
+    font: '10px Ubuntu',
     offsetX: -10,
     textAlign: 'start',
     textBaseline: 'top',
@@ -88,6 +89,7 @@ feature5.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Small text',
+    font: '10px Ubuntu',
     offsetY: 5,
     scale: 0.7,
     rotation: 4,
@@ -106,6 +108,7 @@ feature6.setStyle(new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'FILL AND STROKE',
+    font: '10px Ubuntu',
     placement: 'line',
     overflow: true,
     fill: new Fill({color: '#FFC0CB'}),

rendering/cases/text-style-overlap/main.js

@@ -19,6 +19,7 @@ const vectorSource = new VectorSource();
 const pointStyle = new Style({
   text: new Text({
     text: 'Point Label',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),
@@ -31,6 +32,7 @@ const lineStyle = new Style({
   stroke: new Stroke({color: 'blue'}),
   text: new Text({
     text: 'Line Label',
+    font: 'Ubuntu',
     fill: new Fill({
       color: 'red'
     }),

rendering/cases/text-style/main.js

@@ -20,7 +20,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     scale: 2,
     fill: new Fill({
       color: 'red'
@@ -39,7 +39,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'upside down',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     rotation: Math.PI,
     stroke: new Stroke({
       color: 'red',
@@ -55,6 +55,7 @@ feature = new Feature({
 });
 feature.setStyle(new Style({
   text: new Text({
+    font: 'Ubuntu',
     text: 'rotateWithView',
     rotateWithView: true,
     stroke: new Stroke({
@@ -71,7 +72,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'
@@ -91,7 +92,7 @@ feature = new Feature({
 feature.setStyle(new Style({
   text: new Text({
     text: 'hello',
-    font: '14px sans-serif',
+    font: '12px Ubuntu',
     padding: [1, 2, 3, 5],
     backgroundFill: new Fill({
       color: 'rgba(55, 55, 55, 0.25)'

rendering/default/index.html

@@ -16,6 +16,20 @@
       .ol-control {
         display: none;
       }
+      @font-face {
+        font-family: "Ubuntu";
+        src: url("/data/fonts/ubuntu-regular-webfont.eot");
+        src: url("/data/fonts/ubuntu-regular-webfont.woff") format("woff"),
+          url("/data/fonts/ubuntu-regular-webfont.svg#filename") format("svg");
+      }
+      @font-face {
+        font-family: "Ubuntu";
+        font-weight: bold;
+        font-style: italic;
+        src: url("/data/fonts/ubuntu-bold-italic-webfont.eot");
+        src: url("/data/fonts/ubuntu-bold-italic-webfont.woff") format("woff"),
+          url("/data/fonts/ubuntu-bold-italic-webfont.svg#filename") format("svg");
+      }
     </style>
   </head>
   <body>

rendering/test.js

@@ -313,6 +313,7 @@ if (require.main === module) {
   const options = yargs.
     option('fix', {
       describe: 'Accept all screenshots as accepted',
+      type: 'boolean',
       default: false
     }).
     option('host', {

test/rendering/ol/layer/vectorimage.test.js

@@ -1,202 +0,0 @@
-import Circle from '../../../../src/ol/geom/Circle.js';
-import CircleStyle from '../../../../src/ol/style/Circle.js';
-import Feature from '../../../../src/ol/Feature.js';
-import Fill from '../../../../src/ol/style/Fill.js';
-import LineString from '../../../../src/ol/geom/LineString.js';
-import Map from '../../../../src/ol/Map.js';
-import Point from '../../../../src/ol/geom/Point.js';
-import Polygon from '../../../../src/ol/geom/Polygon.js';
-import Stroke from '../../../../src/ol/style/Stroke.js';
-import Style from '../../../../src/ol/style/Style.js';
-import Text from '../../../../src/ol/style/Text.js';
-import VectorImageLayer from '../../../../src/ol/layer/VectorImage.js';
-import VectorSource from '../../../../src/ol/source/Vector.js';
-import View from '../../../../src/ol/View.js';
-
-describe('ol.rendering.layer.VectorImage', function() {
-
-  const center = [1825927.7316762917, 6143091.089223046];
-
-  let map, source;
-  function createMap() {
-    source = new VectorSource();
-    map = new Map({
-      pixelRatio: 1,
-      target: createMapDiv(80, 80),
-      view: new View({
-        center: center,
-        zoom: 13
-      })
-    });
-  }
-
-  afterEach(function() {
-    if (map) {
-      disposeMap(map);
-    }
-    map = null;
-  });
-
-  function addCircle(r) {
-    source.addFeature(new Feature(new Circle(center, r)));
-  }
-
-  function addPolygon(r) {
-    source.addFeature(new Feature(new Polygon([
-      [
-        [center[0] - r, center[1] - r],
-        [center[0] + r, center[1] - r],
-        [center[0] + r, center[1] + r],
-        [center[0] - r, center[1] + r],
-        [center[0] - r, center[1] - r]
-      ]
-    ])));
-  }
-
-  it('unskips features correctly', function(done) {
-    createMap();
-    addCircle(500);
-    addPolygon(300);
-    map.skipFeature(source.getFeatures()[1]);
-    map.addLayer(new VectorImageLayer({
-      source: source,
-      style: new Style({
-        fill: new Fill({
-          color: 'rgba(255,0,0,0.5)'
-        }),
-        stroke: new Stroke({
-          width: 2,
-          color: 'black'
-        })
-      })
-    }));
-    map.renderSync();
-    map.unskipFeature(source.getFeatures()[1]);
-    map.once('postrender', function() {
-      expectResemble(map, 'rendering/ol/layer/expected/vector.png',
-        IMAGE_TOLERANCE, done);
-    });
-  });
-
-  it('declutters text', function(done) {
-    createMap();
-    const layer = new VectorImageLayer({
-      declutter: true,
-      source: source
-    });
-    map.addLayer(layer);
-
-    const centerFeature = new Feature({
-      geometry: new Point(center),
-      text: 'center'
-    });
-    source.addFeature(centerFeature);
-    source.addFeature(new Feature({
-      geometry: new Point([center[0] - 540, center[1]]),
-      text: 'west'
-    }));
-    source.addFeature(new Feature({
-      geometry: new Point([center[0] + 540, center[1]]),
-      text: 'east'
-    }));
-
-    layer.setStyle(function(feature) {
-      return new Style({
-        text: new Text({
-          text: feature.get('text'),
-          font: '12px sans-serif'
-        })
-      });
-    });
-
-    map.once('postrender', function() {
-      const hitDetected = map.getFeaturesAtPixel([42, 42]);
-      expect(hitDetected).to.have.length(1);
-      expect(hitDetected[0]).to.equal(centerFeature);
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter.png',
-        2.2, done);
-    });
-  });
-
-  it('declutters images', function(done) {
-    createMap();
-    const layer = new VectorImageLayer({
-      declutter: true,
-      source: source
-    });
-    map.addLayer(layer);
-
-    const centerFeature = new Feature({
-      geometry: new Point(center)
-    });
-    source.addFeature(centerFeature);
-    source.addFeature(new Feature({
-      geometry: new Point([center[0] - 540, center[1]])
-    }));
-    source.addFeature(new Feature({
-      geometry: new Point([center[0] + 540, center[1]])
-    }));
-
-    layer.setStyle(function(feature) {
-      return new Style({
-        image: new CircleStyle({
-          radius: 15,
-          stroke: new Stroke({
-            color: 'blue'
-          })
-        })
-      });
-    });
-
-    map.once('postrender', function() {
-      const hitDetected = map.getFeaturesAtPixel([40, 40]);
-      expect(hitDetected).to.have.length(1);
-      expect(hitDetected[0]).to.equal(centerFeature);
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-image.png',
-        IMAGE_TOLERANCE, done);
-    });
-  });
-
-  it('declutters text along lines and images', function(done) {
-    createMap();
-    const layer = new VectorImageLayer({
-      declutter: true,
-      source: source
-    });
-    map.addLayer(layer);
-
-    const point = new Feature(new Point(center));
-    point.setStyle(new Style({
-      image: new CircleStyle({
-        radius: 8,
-        stroke: new Stroke({
-          color: 'blue'
-        })
-      })
-    }));
-    const line = new Feature(new LineString([
-      [center[0] - 650, center[1] - 200],
-      [center[0] + 650, center[1] - 200]
-    ]));
-    line.setStyle(new Style({
-      stroke: new Stroke({
-        color: '#CCC',
-        width: 12
-      }),
-      text: new Text({
-        placement: 'line',
-        text: 'east-west',
-        font: '12px sans-serif'
-      })
-    }));
-
-    source.addFeature(point);
-    source.addFeature(line);
-
-    map.once('postrender', function() {
-      expectResemble(map, 'rendering/ol/layer/expected/vector-canvas-declutter-line.png',
-        IMAGE_TOLERANCE, done);
-    });
-  });
-
-});