Replaces reproj image.tests.js and tile.tests.js

Transforms the old rendering tests for
ReprojImage and ReprojTile to the new
rendering test approach.

rendering/cases/reproj-image/main.js

@@ -0,0 +1,29 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import Static from '../../../src/ol/source/ImageStatic.js';
+import {
+  get as getProjection,
+  transformExtent
+} from '../../../src/ol/proj';
+import ImageLayer from '../../../src/ol/layer/Image.js';
+
+const source = new Static({
+  url: '/data/tiles/osm/5/5/12.png',
+  imageExtent: transformExtent([-123, 37, -122, 38], 'EPSG:4326', 'EPSG:3857'),
+  projection: getProjection('EPSG:3857')
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [new ImageLayer({
+    source: source
+  })],
+  view: new View({
+    center: [-122.416667, 37.783333],
+    zoom: 8,
+    projection: 'EPSG:4326'
+  })
+});
+
+render();

rendering/cases/reproj-tile-4326/main.js

@@ -0,0 +1,36 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {toLonLat, get} from '../../../src/ol/proj.js';
+import {createXYZ, createForProjection} from '../../../src/ol/tilegrid.js';
+
+const tileGrid = createXYZ();
+const extent = tileGrid.getTileCoordExtent([5, 5, 12]);
+const center = [(extent[0] + extent[2]) / 2, extent[1]];
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+source.setTileGridForProjection(get('EPSG:4326'), createForProjection(get('EPSG:4326'), 7, [64, 64]));
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: toLonLat(center),
+    zoom: 5
+  })
+});
+
+render();

rendering/cases/reproj-tile-5070/main.js

@@ -0,0 +1,41 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('EPSG:5070',
+  '+proj=aea +lat_1=29.5 +lat_2=45.5 +lat_0=23 +lon_0=-96 +x_0=0 ' +
+          '+y_0=0 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
+register(proj4);
+const proj5070 = get('EPSG:5070');
+proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
+
+const center4326 = [-118.125, 31.95];
+const center = transform(center4326, 'EPSG:4326', 'EPSG:5070');
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:5070',
+    center: center,
+    zoom: 4
+  })
+});
+
+render();

rendering/cases/reproj-tile-54009/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+
+register(proj4);
+const proj54009 = get('ESRI:54009');
+proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
+
+const center4326 = [-118.125, 31.95];
+const center = transform(center4326, 'EPSG:4326', 'ESRI:54009');
+
+const source = new XYZ({
+  transition: 0,
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/osm/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'ESRI:54009',
+    center: center,
+    zoom: 6
+  })
+});
+
+render();

rendering/cases/reproj-tile-dateline-merc/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
+
+register(proj4);
+const merc = get('merc_180');
+merc.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
+
+const center4326 = [180, 0];
+const center = transform(center4326, 'EPSG:4326', 'merc_180');
+
+const source = new XYZ({
+  projection: 'EPSG:4326',
+  minZoom: 0,
+  maxZoom: 0,
+  url: '/data/tiles/4326/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'merc_180',
+    center: center,
+    zoom: 0
+  })
+});
+
+render();

rendering/cases/reproj-tile-none-square/main.js

@@ -0,0 +1,38 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {toLonLat} from '../../../src/ol/proj.js';
+import {createXYZ} from '../../../src/ol/tilegrid.js';
+
+const tileGrid = createXYZ({tileSize: [512, 256]});
+const extent = tileGrid.getTileCoordExtent([5, 3, 12]);
+const center = [
+  (extent[0] + extent[2]) / 2,
+  (extent[1] + extent[3]) / 2
+];
+
+const source = new XYZ({
+  projection: 'EPSG:3857',
+  minZoom: 5,
+  maxZoom: 5,
+  url: '/data/tiles/512x256/{z}/{x}/{y}.png',
+  tileSize: [512, 256]
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:4326',
+    center: toLonLat(center),
+    zoom: 5
+  })
+});
+
+render();

rendering/cases/reproj-tile-northpole/main.js

@@ -0,0 +1,40 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import XYZ from '../../../src/ol/source/XYZ.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import {get, transform} from '../../../src/ol/proj.js';
+import {register} from '../../../src/ol/proj/proj4.js';
+import proj4 from 'proj4';
+
+proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 ' +
+          '+k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
+
+register(proj4);
+const proj3413 = get('EPSG:3413');
+proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
+
+const center4326 = [0, 90];
+const center = transform(center4326, 'EPSG:4326', 'EPSG:3413');
+
+const source = new XYZ({
+  maxZoom: 0,
+  projection: 'EPSG:4326',
+  url: '/data/tiles/4326/{z}/{x}/{y}.png'
+});
+
+new Map({
+  pixelRatio: 1,
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: source
+    })
+  ],
+  view: new View({
+    projection: 'EPSG:3413',
+    center: center,
+    zoom: 0
+  })
+});
+
+render();