diff --git a/rendering/cases/single-layer/main.js b/rendering/cases/single-layer/main.js index cd9d141113..c1fcec8fe5 100644 --- a/rendering/cases/single-layer/main.js +++ b/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'}); diff --git a/rendering/cases/text-style/expected.png b/rendering/cases/text-style/expected.png new file mode 100644 index 0000000000..e2eade5078 Binary files /dev/null and b/rendering/cases/text-style/expected.png differ diff --git a/rendering/cases/text-style/main.js b/rendering/cases/text-style/main.js new file mode 100644 index 0000000000..bd3e688e62 --- /dev/null +++ b/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}); diff --git a/rendering/test.js b/rendering/test.js index 6983f1bed5..d267bdc99a 100755 --- a/rendering/test.js +++ b/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); - message = message !== undefined ? message : entry; + const config = await renderPage(page, entry, options); + 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 {