maplibre-gl 6.2.0 → 6.4.0

package/src/source/image_source.test.ts

@@ -5,7 +5,6 @@ import {type FakeServer, fakeServer} from 'nise';
 import {beforeMapTest, createMap, sleep, stubAjaxGetImage, waitForEvent} from '../util/test/util.ts';
 import {Tile} from '../tile/tile.ts';
 import {OverscaledTileID} from '../tile/tile_id.ts';
-import {ImageRequest} from '../util/image_request.ts';
 import type {Texture} from '../webgl/texture.ts';
 import type {ImageSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {MapSourceDataEvent} from '../ui/events.ts';
@@ -19,6 +18,19 @@ function createSource(options) {
     return new ImageSource('id', options, {} as any, options.eventedParent);
 }
 
+async function createLoadedSourceWithTile(map: Map, server: FakeServer) {
+    server.respondImmediately = true;
+    const source = createSource({url: '/image.png', eventedParent: map});
+    const loaded = waitForEvent(source, 'data', (e: MapSourceDataEvent) => e.sourceDataType === 'metadata');
+    source.onAdd(map);
+    await loaded;
+
+    const {z, x, y} = source.tileID;
+    const tile = new Tile(new OverscaledTileID(z, 0, z, x, y), 512);
+    await source.loadTile(tile);
+    return {source, tile};
+}
+
 describe('ImageSource', () => {
     stubAjaxGetImage(undefined);
     let server: FakeServer;
@@ -58,40 +70,24 @@ describe('ImageSource', () => {
         expect(source.image).toBeTruthy();
     });
 
-    test('passes a live AbortController to ImageRequest when the source is aborted during an async transformRequest', async () => {
+    test('does not request the image when the source is removed while its request is being transformed', async () => {
+        server.respondImmediately = true;
         const source = createSource({url: '/image.png'});
-        let transformStarted: () => void;
-        const transformCalled = new Promise<void>((resolve) => {
-            transformStarted = resolve;
-        });
+        const errorHandler = vi.fn();
+        source.on('error', errorHandler);
         let releaseTransform: (params: {url: string}) => void;
-        map.setTransformRequest(() => {
-            transformStarted();
-            return new Promise<{url: string}>((resolve) => {
-                releaseTransform = resolve;
-            });
-        });
-        const image = {width: 1, height: 1} as ImageBitmap;
-        let requestController: AbortController;
-        let sourceControllerAtRequestTime: AbortController;
-        const getImageSpy = vi.spyOn(ImageRequest, 'getImage').mockImplementation(async (_request, abortController) => {
-            requestController = abortController;
-            sourceControllerAtRequestTime = source._request;
-            return {data: image};
-        });
+        map.setTransformRequest(() => new Promise<{url: string}>((resolve) => {
+            releaseTransform = resolve;
+        }));
+        const load = vi.spyOn(source, 'load');
 
         source.onAdd(map);
-        await transformCalled; // load() is suspended in the transform
-        source.onRemove(); // the abort lands during that suspension
-        const loaded = waitForEvent(source, 'data', (e: MapSourceDataEvent) => e.sourceDataType === 'metadata');
+        source.onRemove();
         releaseTransform({url: '/image.png'});
-        await loaded;
+        await load.mock.results[0].value;
 
-        expect(getImageSpy).toHaveBeenCalledTimes(1);
-        // The request must carry the source's own live controller, so an abort
-        // arriving while it is in flight reaches exactly this request.
-        expect(requestController).toBeInstanceOf(AbortController);
-        expect(requestController).toBe(sourceControllerAtRequestTime);
+        expect(server.requests).toHaveLength(0);
+        expect(errorHandler).not.toHaveBeenCalled();
     });
 
     test('transforms url request', () => {
@@ -147,6 +143,112 @@ describe('ImageSource', () => {
         expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
     });
 
+    test('sets perspective transform for non-parallelogram coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.52, 37.815],
+            [-122.355, 37.8],
+            [-122.325, 37.7],
+            [-122.545, 37.735]
+        ]);
+
+        expect(source.perspectiveTransform).not.toEqual([0, 0, 1]);
+        expect(source.perspectiveTransform.every(Number.isFinite)).toBe(true);
+    });
+
+    test('sets perspective transform when initial coordinates are loaded', async () => {
+        const source = createSource({
+            url: '/image.png',
+            coordinates: [
+                [-122.52, 37.815],
+                [-122.355, 37.8],
+                [-122.325, 37.7],
+                [-122.545, 37.735]
+            ]
+        });
+        const promise = waitForEvent(source, 'data', (e) => e.sourceDataType === 'content');
+
+        source.onAdd(map);
+        await sleep(0);
+        server.respond();
+        await promise;
+
+        expect(source.perspectiveTransform).not.toEqual([0, 0, 1]);
+        expect(source.perspectiveTransform.every(Number.isFinite)).toBe(true);
+    });
+
+    test('keeps projective transform when its constant coefficient is zero', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-67.5, 55.77657301866769],
+            [-22.5, 55.77657301866769],
+            [0, 40.97989806962013],
+            [-90, 40.97989806962013]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 1, 0]);
+    });
+
+    test('sets identity perspective transform for parallelogram coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.409667969, 37.857507156],
+            [-122.409667969, 37.840156836],
+            [-122.431640625, 37.840156836]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform for collinear destination coordinates', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.409667969, 37.857507156],
+            [-122.387695312, 37.857507156],
+            [-122.365722656, 37.857507156]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform when the inverse basis is singular', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-122.431640625, 37.857507156],
+            [-122.431640625, 37.840156836],
+            [-122.431640625, 37.822802434],
+            [-122.409667969, 37.857507156]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform for a cancellation-degenerate quad', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [96.85546875, 79.36770077764092],
+            [-127.265625, 79.36770077764092],
+            [88.06640625, 79.36770077764092],
+            [-17.40234375, 59.534318001095585]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
+    test('sets identity perspective transform when its denominator crosses zero inside the quad', () => {
+        const source = createSource({url: '/image.png'});
+        source.setCoordinates([
+            [-90, 66.51326044311186],
+            [0, 66.51326044311186],
+            [-78.75, 61.606396371386275],
+            [-90, 0]
+        ]);
+
+        expect(source.perspectiveTransform).toEqual([0, 0, 1]);
+    });
+
     test('sets coordinates via updateImage', async () => {
         const source = createSource({url: '/image.png'});
         source.onAdd(map);
@@ -199,6 +301,57 @@ describe('ImageSource', () => {
         expect(tile.state).toBe('loaded');
     });
 
+    test('uploads a url into the texture the tiles already hold', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+
+        const load = vi.spyOn(source, 'load');
+        source.updateImage({url: '/image2.png'});
+        await load.mock.results[0].value;
+        source.prepare();
+
+        expect(upload).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(tile.texture).toBe(texture);
+    });
+
+    test('uploads a decoded image into the texture the tiles already hold', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+
+        source.updateImage({image: new ImageBitmap()});
+        source.prepare();
+
+        expect(upload).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(tile.texture).toBe(texture);
+    });
+
+    test('keeps the texture the tiles hold live when updateImage runs from an event fired during prepare', async () => {
+        const {source, tile} = await createLoadedSourceWithTile(map, server);
+        source.on('data', (e: MapSourceDataEvent) => {
+            if (e.sourceDataType === 'idle') source.updateImage({image: new ImageBitmap()});
+        });
+
+        source.prepare();
+
+        expect(source.texture).toBeTruthy();
+        expect(tile.texture).toBe(source.texture);
+        expect(source.texture.texture).not.toBeNull();
+
+        const upload = vi.spyOn(source.texture, 'update');
+        source.prepare();
+        expect(upload).toHaveBeenCalledTimes(1);
+    });
+
     test('serialize url and coordinates', () => {
         const source = createSource({url: '/image.png'});
 
@@ -223,6 +376,19 @@ describe('ImageSource', () => {
         expect(source.image).toBeTruthy();
     });
 
+    test('keeps the image handed to updateImage instead of the url load it replaced', async () => {
+        const source = createSource({url: '/image.png', eventedParent: map});
+        const bitmap = new ImageBitmap();
+        const load = vi.spyOn(source, 'load');
+
+        source.onAdd(map);
+        source.updateImage({image: bitmap});
+        server.respondImmediately = true;
+        await load.mock.results[0].value;
+
+        expect(source.image).toBe(bitmap);
+    });
+
     test('cancels request if updateImage is used', async () => {
         const source = createSource({url: '/image.png', eventedParent: map});
 
@@ -237,6 +403,20 @@ describe('ImageSource', () => {
         expect(spy).toHaveBeenCalled();
     });
 
+    test('cancels the request updateImage started when updateImage is used again', async () => {
+        const source = createSource({url: '/image.png', eventedParent: map});
+        const load = vi.spyOn(source, 'load');
+
+        source.onAdd(map);
+        source.updateImage({url: '/image2.png'});
+        await load.mock.results[0].value;
+
+        const spy = vi.spyOn(server.requests[0] as any, 'abort');
+
+        source.updateImage({url: '/image3.png'});
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
     test('marks the source as loaded when the request has received a response', async () => {
         const source = createSource({url: '/image.png', eventedParent: map});
 
@@ -275,6 +455,41 @@ describe('ImageSource', () => {
         expect(errorHandler).not.toHaveBeenCalled();
     });
 
+    test('keeps the image it displays, and its texture, when the url handed to updateImage fails to load', async () => {
+        const {source} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const texture = source.texture;
+        const image = source.image;
+        const upload = vi.spyOn(texture, 'update');
+        const destroy = vi.spyOn(texture, 'destroy');
+        const errorHandler = vi.fn();
+        map.on('error', errorHandler);
+
+        const load = vi.spyOn(source, 'load');
+        source.updateImage({url: '/missing-image.png'});
+        await load.mock.results[0].value;
+        source.prepare();
+
+        expect(errorHandler).toHaveBeenCalledTimes(1);
+        expect(destroy).not.toHaveBeenCalled();
+        expect(upload).not.toHaveBeenCalled();
+        expect(source.texture).toBe(texture);
+        expect(source.image).toBe(image);
+    });
+
+    test('deletes its texture and drops its image when the source is removed', async () => {
+        const {source} = await createLoadedSourceWithTile(map, server);
+        source.prepare();
+        const destroy = vi.spyOn(source.texture, 'destroy');
+
+        source.onRemove();
+
+        expect(destroy).toHaveBeenCalledTimes(1);
+        expect(source.texture).toBeNull();
+        expect(source.image).toBeNull();
+        expect(source.tiles).toEqual({});
+    });
+
     describe('updateImage with a decoded image', () => {
         let source: ImageSource;
         let transformRequest: Mock<(url: string, resourceType?: string) => any>;
@@ -286,7 +501,7 @@ describe('ImageSource', () => {
             map.on('error', () => {});
             source = createSource({url: '/image.png', eventedParent: map});
             // onAdd starts the initial load synchronously up to its first await, so
-            // this._request is set and transformRequest is called once. Clear that call
+            // this._abortController is set and transformRequest is called once. Clear that call
             // so tests can assert the image path issues no further request.
             source.onAdd(map);
             transformRequest.mockClear();
@@ -309,13 +524,6 @@ describe('ImageSource', () => {
             expect(firedMetadata).toBe(true);
         });
 
-        test('resets the texture so the new image is uploaded on the next prepare', () => {
-            source.texture = {} as Texture;
-            source.updateImage({image: new ImageBitmap()});
-
-            expect(source.texture).toBeNull();
-        });
-
         test('updates coordinates alongside the image', () => {
             source.updateImage({
                 image: new ImageBitmap(),
@@ -326,7 +534,7 @@ describe('ImageSource', () => {
         });
 
         test('cancels a pending request', () => {
-            const spy = vi.spyOn(source._request, 'abort');
+            const spy = vi.spyOn(source._abortController, 'abort');
             source.updateImage({image: new ImageBitmap()});
             expect(spy).toHaveBeenCalled();
         });

package/src/source/image_source.ts

@@ -19,6 +19,11 @@ import type Point from '@mapbox/point-geometry';
 import {ensureError, MAX_TILE_ZOOM} from '../util/util.ts';
 import {Bounds} from '../geo/bounds.ts';
 import {isAbortError} from '../util/abort_error.ts';
+import {
+    identityPerspectiveTransform,
+    type RasterPerspectiveTransform
+} from '../webgl/program/raster_program.ts';
+import {mat2, vec3} from 'gl-matrix';
 
 /**
  * Four geographical coordinates,
@@ -141,9 +146,11 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
     image: ImageSourceImage;
     tileID: CanonicalTileID;
     tileCoords: Point[];
+    perspectiveTransform: RasterPerspectiveTransform = identityPerspectiveTransform;
     flippedWindingOrder: boolean = false;
     _loaded: boolean;
-    _request: AbortController;
+    _abortController: AbortController;
+    private _imageDirty: boolean = false;
 
     /** @internal */
     constructor(id: string, options: ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
@@ -170,26 +177,25 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
 
         this.url = this.options.url;
 
-        const request = await this.map._requestManager.transformRequest(this.url, ResourceType.Image);
-        this._request = new AbortController();
+        this._abortController = new AbortController();
         try {
-            const image = await ImageRequest.getImage(request, this._request);
-            this._request = null;
+            const image = await ImageRequest.transformAndGetImage(this.map._requestManager, this.url, ResourceType.Image, this._abortController);
+            this._abortController = null;
             this._loaded = true;
 
             if (image?.data) {
-                this.image = image.data;
+                this._setImage(image.data);
                 if (newCoordinates) {
                     this.coordinates = newCoordinates;
                 }
                 this._finishLoading();
             }
         } catch (err) {
-            this._request = null;
+            // In case of abort error, the aborter may have started a new request so we don't want to clear its abort controller.
+            if (isAbortError(err)) return;
+            this._abortController = null;
             this._loaded = true;
-            if (!isAbortError(err)) {
-                this.fire(new ErrorEvent(ensureError(err)));
-            }
+            this.fire(new ErrorEvent(ensureError(err)));
         }
     }
 
@@ -208,19 +214,18 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
      * @param options - The options object.
      */
     updateImage(options: UpdateImageOptions): this {
-        if (this._request) {
-            this._request.abort();
-            this._request = null;
+        if (this._abortController) {
+            this._abortController.abort();
+            this._abortController = null;
         }
 
         if ('image' in options) {
             // Use the already-decoded image directly, skipping the network request.
             this._loaded = true;
-            this.image = options.image;
+            this._setImage(options.image);
             if (options.coordinates) {
                 this.coordinates = options.coordinates;
             }
-            this.texture = null;
             this._finishLoading();
             return this;
         }
@@ -230,10 +235,22 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         }
 
         this.options.url = options.url;
-        this.load(options.coordinates).finally(() => this.texture = null);
+        this.load(options.coordinates);
         return this;
     }
 
+    /** Loaded tiles hold `this.texture`, so the wrapper has to outlive the images in it. */
+    private _setImage(image: ImageSourceImage): void {
+        this.image = image;
+        this._imageDirty = true;
+    }
+
+    /** Teardown only: dropping the reference alone leaves the allocation to the GC. */
+    private _disposeTexture(): void {
+        this.texture?.destroy();
+        this.texture = null;
+    }
+
     _finishLoading(): void {
         if (this.map) {
             this.setCoordinates(this.coordinates);
@@ -247,10 +264,13 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
     }
 
     onRemove(): void {
-        if (this._request) {
-            this._request.abort();
-            this._request = null;
+        if (this._abortController) {
+            this._abortController.abort();
+            this._abortController = null;
         }
+        this._disposeTexture();
+        this.image = null;
+        this.tiles = {};
     }
 
     /**
@@ -287,6 +307,7 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         // Transform the corner coordinates into the coordinate space of our
         // tile.
         this.tileCoords = cornerCoords.map((coord) => this.tileID.getTilePoint(coord)._round());
+        this.perspectiveTransform = calculateRasterPerspectiveTransform(this.tileCoords);
         this.flippedWindingOrder = hasWrongWindingOrder(this.tileCoords);
 
         this.fire(new MapSourceDataEvent('data', {sourceDataType: 'content'}));
@@ -304,7 +325,11 @@ export class ImageSource extends Evented<SourceEventType> implements Source {
         if (!this.texture) {
             this.texture = new Texture(context, this.image, gl.RGBA);
             this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        } else if (this._imageDirty) {
+            this.texture.update(this.image);
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
         }
+        this._imageDirty = false;
 
         let newTilesLoaded = false;
         for (const w in this.tiles) {
@@ -418,3 +443,91 @@ function hasWrongWindingOrder(coords: Point[]) {
 
     return crossProduct < 0;
 }
+
+const perspectiveEpsilon = Number.EPSILON;
+// Allows for accumulated rounding error in the three-term homogeneous dot products.
+const perspectiveErrorFactor = 8;
+
+/**
+ * Calculates the inverse-homography denominator used to sample non-affine
+ * image-source texture coordinates. Image source tile coordinates are rounded
+ * to integers before this runs, so singularity checks use exact zero or
+ * Number.EPSILON scaled to the corner denominators.
+ *
+ * Based on Paul S. Heckbert, "Fundamentals of Texture Mapping and Image
+ * Warping", UCB/CSD-89-516, 1989, section 2.2.3 and appendix A.2.
+ *
+ * @see https://www2.eecs.berkeley.edu/Pubs/TechRpts/1989/5504.html
+ * @see https://www.cs.cmu.edu/~ph/texfund/texfund.pdf
+ */
+function calculateRasterPerspectiveTransform(cornerCoords: Point[]): RasterPerspectiveTransform {
+    if (isParallelogram(cornerCoords)) {
+        return identityPerspectiveTransform;
+    }
+
+    const [topLeft, topRight, bottomRight, bottomLeft] = cornerCoords;
+    const sx = topLeft.x - topRight.x + bottomRight.x - bottomLeft.x;
+    const sy = topLeft.y - topRight.y + bottomRight.y - bottomLeft.y;
+    const dx1 = topRight.x - bottomRight.x;
+    const dy1 = topRight.y - bottomRight.y;
+    const dx2 = bottomLeft.x - bottomRight.x;
+    const dy2 = bottomLeft.y - bottomRight.y;
+    const basis: mat2 = [dx1, dy1, dx2, dy2];
+    const determinant = mat2.determinant(basis);
+
+    if (Math.abs(determinant) < perspectiveEpsilon) {
+        return identityPerspectiveTransform;
+    }
+
+    const perspectiveX = (sx * dy2 - dx2 * sy) / determinant;
+    const perspectiveY = (dx1 * sy - sx * dy1) / determinant;
+
+    // A finite image of the unit square has positive homogeneous denominators
+    // at all four corners after normalizing the top-left denominator to one.
+    const forwardDenominators = [1, 1 + perspectiveX, 1 + perspectiveX + perspectiveY, 1 + perspectiveY];
+    const forwardDenominatorScale = Math.max(...forwardDenominators.map(value => Math.abs(value)));
+    const hasInvalidForwardDenominator = forwardDenominators.some(value =>
+        !Number.isFinite(value) || value <= perspectiveErrorFactor * perspectiveEpsilon * forwardDenominatorScale);
+    if (!Number.isFinite(forwardDenominatorScale) || forwardDenominatorScale === 0 || hasInvalidForwardDenominator) {
+        return identityPerspectiveTransform;
+    }
+
+    const a = topRight.x - topLeft.x + perspectiveX * topRight.x;
+    const b = bottomLeft.x - topLeft.x + perspectiveY * bottomLeft.x;
+    const d = topRight.y - topLeft.y + perspectiveX * topRight.y;
+    const e = bottomLeft.y - topLeft.y + perspectiveY * bottomLeft.y;
+    const inverseDenominator: RasterPerspectiveTransform = [0, 0, 0];
+    vec3.cross(inverseDenominator, [a, d, perspectiveX], [b, e, perspectiveY]);
+    const normalizationScale = Math.max(...inverseDenominator.map(value => Math.abs(value)));
+    const cornerDenominators = cornerCoords.map(({x, y}) =>
+        vec3.dot(inverseDenominator, [x, y, 1]));
+    const cornerDenominatorErrors = cornerCoords.map(({x, y}) =>
+        perspectiveErrorFactor * perspectiveEpsilon * (
+            Math.abs(inverseDenominator[0] * x) +
+            Math.abs(inverseDenominator[1] * y) +
+            Math.abs(inverseDenominator[2])));
+    const denominatorScale = Math.max(...cornerDenominators.map(value => Math.abs(value)));
+    const denominatorSign = Math.sign(cornerDenominators[0]);
+
+    // The denominator is affine within each rendered triangle. Reject a
+    // transform that reaches or crosses zero anywhere inside the quad.
+    const hasInvalidDenominator = cornerDenominators.some((value, index) =>
+        !Number.isFinite(value) ||
+        Math.abs(value) <= Math.max(perspectiveEpsilon * denominatorScale, cornerDenominatorErrors[index]) ||
+        Math.sign(value) !== denominatorSign);
+    if (!Number.isFinite(normalizationScale) || normalizationScale === 0 || !Number.isFinite(denominatorScale) ||
+        denominatorScale === 0 || hasInvalidDenominator) {
+        return identityPerspectiveTransform;
+    }
+
+    // The denominator is homogeneous, so normalize by its largest coefficient
+    // instead of assuming that its constant coefficient is nonzero.
+    const transform = inverseDenominator.map(value => value / normalizationScale) as RasterPerspectiveTransform;
+    return transform.every(Number.isFinite) ? transform : identityPerspectiveTransform;
+}
+
+function isParallelogram(cornerCoords: Point[]) {
+    const [tl, tr, br, bl] = cornerCoords;
+    return Math.abs(tl.x + br.x - tr.x - bl.x) < perspectiveEpsilon &&
+        Math.abs(tl.y + br.y - tr.y - bl.y) < perspectiveEpsilon;
+}

package/src/source/raster_dem_tile_source.test.ts

@@ -3,6 +3,7 @@ import {fakeServer, type FakeServer} from 'nise';
 import {RasterDEMTileSource} from './raster_dem_tile_source.ts';
 import {OverscaledTileID} from '../tile/tile_id.ts';
 import {RequestManager} from '../util/request_manager.ts';
+import {ImageRequest} from '../util/image_request.ts';
 import {type Tile} from '../tile/tile.ts';
 import {getMockDispatcher} from '../util/test/util.ts';
 import {sleep, waitForEvent, waitForMetadataEvent} from '../util/test/util.ts';
@@ -33,6 +34,7 @@ describe('RasterDEMTileSource', () => {
 
     afterEach(() => {
         server.restore();
+        vi.restoreAllMocks();
     });
 
     test('transforms request for TileJSON URL', () => {
@@ -74,7 +76,7 @@ describe('RasterDEMTileSource', () => {
         expect(server.requests[0].requestHeaders.Authorization).toBe('Bearer token');
     });
 
-    test('transforms tile urls before requesting', async () => {
+    test('transforms tile urls and requests them without color space conversion', async () => {
         server.respondWith('/source.json', JSON.stringify({
             minzoom: 0,
             maxzoom: 22,
@@ -84,6 +86,8 @@ describe('RasterDEMTileSource', () => {
         }));
         const source = createSource({url: '/source.json'});
         const transformSpy = vi.spyOn(source.map._requestManager, 'transformRequest');
+        const image = await createImageBitmap(new ImageData(16, 16));
+        const getImageSpy = vi.spyOn(ImageRequest, 'getImage').mockResolvedValue({data: image});
         const promise = waitForMetadataEvent(source);
         await sleep(0);
         server.respond();
@@ -92,13 +96,15 @@ describe('RasterDEMTileSource', () => {
             tileID: new OverscaledTileID(10, 0, 10, 5, 5),
             state: 'loading',
             loadVectorData () {},
-            setExpiryData() {}
+            setExpiryData() {},
+            actor: 1
         } as any as Tile;
-        source.loadTile(tile);
+        await source.loadTile(tile);
 
         expect(transformSpy).toHaveBeenCalledTimes(1);
         expect(transformSpy.mock.calls[0][0]).toBe('http://example.com/10/5/5.png');
         expect(transformSpy.mock.calls[0][1]).toBe('Tile');
+        expect(getImageSpy.mock.calls[0][3]).toEqual({colorSpaceConversion: 'none'});
     });
 
     test('can asynchronously transform tile request', async () => {
@@ -311,6 +317,34 @@ describe('RasterDEMTileSource', () => {
         expect(expiryDataSpy).toHaveBeenCalledTimes(1);
     });
 
+    test('does not request a tile that was aborted while its request was being transformed', async () => {
+        let releaseTransform: (params: {url: string}) => void;
+        const source = createSource({
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        }, (url, type) => {
+            if (type !== 'Tile') return {url};
+            return new Promise<{url: string}>((resolve) => {
+                releaseTransform = resolve;
+            });
+        });
+        source.tiles = ['http://example.com/{z}/{x}/{y}.png'];
+
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            setExpiryData() {}
+        } as any as Tile;
+
+        const loadPromise = source.loadTile(tile);
+        tile.aborted = true;
+        await source.abortTile(tile);
+        releaseTransform({url: 'http://example.com/10/5/5.png'});
+        await expect(loadPromise).resolves.toBeUndefined();
+
+        expect(server.requests).toHaveLength(0);
+        expect(tile.state).toBe('unloaded');
+    });
+
     test('does not throw when tile is aborted', async () => {
         server.respondWith('/source.json', JSON.stringify({
             minzoom: 0,