Merge pull request #8943 from fredj/text-style-tests

Port text style rendering tests

rendering/cases/single-layer/main.js

@@ -18,4 +18,4 @@ new Map({
   })
 });
 
-render('A single layer with a XZY source');
+render({message: 'A single layer with a XZY source'});

rendering/cases/text-style/main.js

@@ -0,0 +1,123 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Feature from '../../../src/ol/Feature.js';
+import Point from '../../../src/ol/geom/Point.js';
+import VectorLayer from '../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../src/ol/source/Vector.js';
+import Text from '../../../src/ol/style/Text.js';
+import Style from '../../../src/ol/style/Style.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+
+
+const vectorSource = new VectorSource();
+let feature;
+
+// scale
+feature = new Feature({
+  geometry: new Point([-50, 50])
+});
+feature.setStyle(new Style({
+  text: new Text({
+    text: 'hello',
+    font: '14px sans-serif',
+    scale: 2,
+    fill: new Fill({
+      color: 'red'
+    }),
+    stroke: new Stroke({
+      color: '#000'
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+// rotate
+feature = new Feature({
+  geometry: new Point([50, -50])
+});
+feature.setStyle(new Style({
+  text: new Text({
+    text: 'upside down',
+    font: '14px sans-serif',
+    rotation: Math.PI,
+    stroke: new Stroke({
+      color: 'red',
+      width: 2
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+// rotate with view
+feature = new Feature({
+  geometry: new Point([50, 50])
+});
+feature.setStyle(new Style({
+  text: new Text({
+    text: 'rotateWithView',
+    rotateWithView: true,
+    stroke: new Stroke({
+      color: [10, 10, 10, 0.5]
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+// background and padding
+feature = new Feature({
+  geometry: new Point([-10, 0])
+});
+feature.setStyle(new Style({
+  text: new Text({
+    text: 'hello',
+    font: '14px sans-serif',
+    padding: [1, 2, 3, 5],
+    backgroundFill: new Fill({
+      color: 'rgba(55, 55, 55, 0.25)'
+    }),
+    backgroundStroke: new Stroke({
+      color: '#000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+// background and padding
+feature = new Feature({
+  geometry: new Point([-10, 0])
+});
+feature.setStyle(new Style({
+  text: new Text({
+    text: 'hello',
+    font: '14px sans-serif',
+    padding: [1, 2, 3, 5],
+    backgroundFill: new Fill({
+      color: 'rgba(55, 55, 55, 0.25)'
+    }),
+    backgroundStroke: new Stroke({
+      color: '#000',
+      width: 1
+    })
+  })
+}));
+vectorSource.addFeature(feature);
+
+
+new Map({
+  pixelRatio: 1,
+  layers: [
+    new VectorLayer({
+      source: vectorSource
+    })
+  ],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    resolution: 1,
+    rotation: Math.PI / 4
+  })
+});
+
+render({tolerance: 0.05});

rendering/test.js

@@ -154,17 +154,17 @@ async function exposeRender(page) {
 
 async function renderPage(page, entry, options) {
   const renderCalled = new Promise(resolve => {
-    handleRender = (message) => {
+    handleRender = (config) => {
       handleRender = null;
-      resolve(message);
+      resolve(config || {});
     };
   });
   options.log.debug('navigating', entry);
   await page.goto(`http://${options.host}:${options.port}${getHref(entry)}`, {waitUntil: 'networkidle0'});
-  const message = await renderCalled;
+  const config = await renderCalled;
   options.log.debug('screenshot', entry);
   await page.screenshot({path: getActualScreenshotPath(entry)});
-  return message;
+  return config;
 }
 
 async function touch(filepath) {
@@ -182,8 +182,9 @@ async function copyActualToExpected(entry) {
 async function renderEach(page, entries, options) {
   let fail = false;
   for (const entry of entries) {
-    let message = await renderPage(page, entry, options);
+    const config = await renderPage(page, entry, options);
-    message = message !== undefined ? message : entry;
+    const message = config.message !== undefined ? config.message : entry;
+    const tolerance = config.tolerance !== undefined ? config.tolerance : 0;
     if (options.fix) {
       await copyActualToExpected(entry);
       continue;
@@ -194,7 +195,7 @@ async function renderEach(page, entries, options) {
       fail = true;
       continue;
     }
-    if (mismatch > 0) {
+    if (mismatch > tolerance) {
       options.log.error(`checking '${message}': mismatch ${mismatch.toFixed(3)}`);
       fail = true;
     } else {