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();

test/rendering/ol/reproj/image.test.js

@@ -1,60 +0,0 @@
-import {listen} from '../../../../src/ol/events.js';
-import {get as getProjection} from '../../../../src/ol/proj.js';
-import {HALF_SIZE} from '../../../../src/ol/proj/epsg3857.js';
-import ReprojImage from '../../../../src/ol/reproj/Image.js';
-import Static from '../../../../src/ol/source/ImageStatic.js';
-import {createXYZ, createForProjection} from '../../../../src/ol/tilegrid.js';
-
-
-describe('ol.rendering.reproj.Image', function() {
-
-  function testSingleImage(source, targetProj,
-    targetExtent, targetResolution, pixelRatio, expectedUrl, done) {
-    const sourceProj = source.getProjection();
-
-    let imagesRequested = 0;
-
-    const image = new ReprojImage(sourceProj, getProjection(targetProj),
-      targetExtent, targetResolution, pixelRatio,
-      function(extent, resolution, pixelRatio) {
-        imagesRequested++;
-        return source.getImage(extent, resolution, pixelRatio, sourceProj);
-      });
-    if (image.getState() == 0) { // IDLE
-      listen(image, 'change', function(e) {
-        if (image.getState() == 2) { // LOADED
-          expect(imagesRequested).to.be(1);
-          resembleCanvas(image.getImage(), expectedUrl, IMAGE_TOLERANCE, done);
-        }
-      });
-      image.load();
-    }
-  }
-
-  let source;
-
-  describe('image reprojections from EPSG:3857', function() {
-    beforeEach(function() {
-      source = new Static({
-        url: 'rendering/ol/data/tiles/osm/5/5/12.png',
-        imageExtent: createXYZ().getTileCoordExtent([5, 5, -13]),
-        projection: getProjection('EPSG:3857')
-      });
-    });
-
-    it('works for identity reprojection', function(done) {
-      testSingleImage(source, 'EPSG:3857',
-        createXYZ().getTileCoordExtent([5, 5, -13]),
-        2 * HALF_SIZE / (256 * (1 << 5)), 1,
-        'rendering/ol/data/tiles/osm/5/5/12.png', done);
-    });
-
-    it('to EPSG:4326', function(done) {
-      testSingleImage(source, 'EPSG:4326',
-        createForProjection('EPSG:4326').
-          getTileCoordExtent([6, 10, -10]),
-        360 / (256 * (1 << 4)), 1,
-        'rendering/ol/reproj/expected/image-3857-to-4326.png', done);
-    });
-  });
-});

test/rendering/ol/reproj/tile.test.js

@@ -1,186 +0,0 @@
-import TileState from '../../../../src/ol/TileState.js';
-import {listen} from '../../../../src/ol/events.js';
-import {get as getProjection} from '../../../../src/ol/proj.js';
-import ReprojTile from '../../../../src/ol/reproj/Tile.js';
-import XYZ from '../../../../src/ol/source/XYZ.js';
-import {createForProjection} from '../../../../src/ol/tilegrid.js';
-import {register} from '../../../../src/ol/proj/proj4.js';
-
-
-describe('ol.rendering.reproj.Tile', function() {
-
-  function testSingleTile(source, targetProjection, targetTileGrid, z, x, y,
-    pixelRatio, expectedUrl, expectedRequests, done) {
-    const sourceProjection = source.getProjection();
-    const sourceGutter = source.getGutterForProjection(sourceProjection);
-
-    let tilesRequested = 0;
-
-    const tile = new ReprojTile(sourceProjection, source.getTileGrid(),
-      getProjection(targetProjection), targetTileGrid,
-      [z, x, y], null, pixelRatio, sourceGutter,
-      function(z, x, y, pixelRatio) {
-        tilesRequested++;
-        return source.getTile(z, x, y, pixelRatio, sourceProjection);
-      });
-    if (tile.getState() == TileState.IDLE) {
-      listen(tile, 'change', function(e) {
-        if (tile.getState() == TileState.LOADED) {
-          expect(tilesRequested).to.be(expectedRequests);
-          resembleCanvas(tile.getImage(), expectedUrl, 7.5, done);
-        }
-      });
-      tile.load();
-    }
-  }
-
-  let source;
-
-  describe('single tile reprojections from EPSG:3857', function() {
-    beforeEach(function() {
-      source = new XYZ({
-        projection: 'EPSG:3857',
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
-      });
-    });
-
-    it('works for identity reprojection', function(done) {
-      testSingleTile(source, 'EPSG:3857', source.getTileGrid(), 5, 5, -13, 1,
-        'rendering/ol/data/tiles/osm/5/5/12.png', 1, done);
-    });
-
-    it('to EPSG:4326', function(done) {
-      const tileGrid = createForProjection('EPSG:4326', 7, [64, 64]);
-      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 21, -20, 1,
-        'rendering/ol/reproj/expected/osm4326.png', 1, done);
-    });
-
-    it('to EPSG:5070', function(done) {
-      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 = getProjection('EPSG:5070');
-      proj5070.setExtent([-6e6, 0, 4e6, 6e6]);
-
-      const tileGrid = createForProjection('EPSG:5070', 5, [64, 64]);
-      testSingleTile(source, 'EPSG:5070', tileGrid, 5, 13, -15, 1,
-        'rendering/ol/reproj/expected/osm5070.png', 1, done);
-    });
-
-    it('to ESRI:54009', function(done) {
-      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 = getProjection('ESRI:54009');
-      proj54009.setExtent([-18e6, -9e6, 18e6, 9e6]);
-
-      const tileGrid = createForProjection('ESRI:54009', 7, [64, 64]);
-      testSingleTile(source, 'ESRI:54009', tileGrid, 7, 27, -16, 1,
-        'rendering/ol/reproj/expected/osm54009.png', 1, done);
-    });
-  });
-
-  describe('stitching several tiles from EPSG:3857', function() {
-    beforeEach(function() {
-      source = new XYZ({
-        projection: 'EPSG:3857',
-        url: 'rendering/ol/data/tiles/osm/{z}/{x}/{y}.png'
-      });
-    });
-
-    it('to EPSG:4326', function(done) {
-      const tileGrid = createForProjection('EPSG:4326', 7, [64, 64]);
-      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 23, -21, 1,
-        'rendering/ol/reproj/expected/stitch-osm4326.png', 2, done);
-    });
-
-    it('to EPSG:3740', function(done) {
-      proj4.defs('EPSG:3740',
-        '+proj=utm +zone=10 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 ' +
-          '+units=m +no_defs');
-      register(proj4);
-      const proj3740 = getProjection('EPSG:3740');
-      proj3740.setExtent([318499.05, 2700792.39, 4359164.89, 7149336.98]);
-
-      const tileGrid = createForProjection('EPSG:3740', 4, [64, 64]);
-      testSingleTile(source, 'EPSG:3740', tileGrid, 4, 4, -13, 1,
-        'rendering/ol/reproj/expected/stitch-osm3740.png', 4, done);
-    });
-  });
-
-  describe('tile projection from EPSG:4326', function() {
-    beforeEach(function() {
-      source = new XYZ({
-        projection: 'EPSG:4326',
-        maxZoom: 0,
-        url: 'rendering/ol/data/tiles/4326/{z}/{x}/{y}.png'
-      });
-    });
-
-    it('works for identity reprojection', function(done) {
-      testSingleTile(source, 'EPSG:4326', source.getTileGrid(), 0, 0, -1, 1,
-        'rendering/ol/data/tiles/4326/0/0/0.png', 1, done);
-    });
-
-    it('to EPSG:3857', function(done) {
-      const tileGrid = createForProjection('EPSG:3857', 0, [64, 64]);
-      testSingleTile(source, 'EPSG:3857', tileGrid, 0, 0, -1, 1,
-        'rendering/ol/reproj/expected/4326-to-3857.png', 1, done);
-    });
-  });
-
-  describe('non-square source tiles', function() {
-    beforeEach(function() {
-      source = new XYZ({
-        projection: 'EPSG:3857',
-        url: 'rendering/ol/data/tiles/osm-512x256/{z}/{x}/{y}.png',
-        tileSize: [512, 256]
-      });
-    });
-
-    it('works for identity reprojection', function(done) {
-      testSingleTile(source, 'EPSG:3857', source.getTileGrid(), 5, 3, -13, 1,
-        'rendering/ol/data/tiles/osm-512x256/5/3/12.png', 1, done);
-    });
-
-    it('to 64x128 EPSG:4326', function(done) {
-      const tileGrid = createForProjection('EPSG:4326', 7, [64, 128]);
-      testSingleTile(source, 'EPSG:4326', tileGrid, 7, 27, -10, 1,
-        'rendering/ol/reproj/expected/512x256-to-64x128.png', 1, done);
-    });
-  });
-
-  describe('dateline wrapping', function() {
-    beforeEach(function() {
-      source = new XYZ({
-        projection: 'EPSG:4326',
-        maxZoom: 0,
-        url: 'rendering/ol/data/tiles/4326/{z}/{x}/{y}.png'
-      });
-    });
-
-    it('wraps X when prime meridian is shifted', function(done) {
-      proj4.defs('merc_180', '+proj=merc +lon_0=180 +units=m +no_defs');
-      register(proj4);
-      const proj_ = getProjection('merc_180');
-      proj_.setExtent([-20026376.39, -20048966.10, 20026376.39, 20048966.10]);
-
-      const tileGrid = createForProjection('merc_180', 0, [64, 64]);
-      testSingleTile(source, 'merc_180', tileGrid, 0, 0, -1, 1,
-        'rendering/ol/reproj/expected/dateline-merc-180.png', 2, done);
-    });
-
-    it('displays north pole correctly (EPSG:3413)', function(done) {
-      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 = getProjection('EPSG:3413');
-      proj3413.setExtent([-4194304, -4194304, 4194304, 4194304]);
-
-      const tileGrid = createForProjection('EPSG:3413', 0, [64, 64]);
-      testSingleTile(source, 'EPSG:3413', tileGrid, 0, 0, -1, 1,
-        'rendering/ol/reproj/expected/dateline-pole.png', 2, done);
-    });
-  });
-});