maplibre-gl 6.2.0 → 6.3.0

package/src/symbol/shaping.test.ts

@@ -120,7 +120,8 @@ describe('shapeIcon', () => {
         stretchY: undefined,
         paddedRect: Object.freeze({x: 0, y: 0, w: 22, h: 22}),
         pixelRatio: 1,
-        version: 1
+        version: 1,
+        needsFirstWebGLRender: false
     });
 
     test('text-anchor: center', () => {

package/src/symbol/symbol_layout.bench.ts

@@ -0,0 +1,30 @@
+import {bench} from 'vitest';
+import {performSymbolLayout} from './symbol_layout.ts';
+import {SymbolBucket} from '../data/bucket/symbol_bucket.ts';
+import {SubdivisionGranularitySetting} from '../render/subdivision_granularity_settings.ts';
+import {fixtureTiles, parseTile} from '../../test/bench/lib/parse_tile.ts';
+
+import type {WorkerTileWithData} from '../source/worker_source.ts';
+
+const parsedTiles = await Promise.all(fixtureTiles.map(async (tile): Promise<WorkerTileWithData> => {
+    return await parseTile(tile, true) as WorkerTileWithData;
+}));
+
+bench('performSymbolLayout', () => {
+    for (const tileResult of parsedTiles) {
+        for (const bucket of tileResult.buckets) {
+            if (bucket instanceof SymbolBucket) {
+                performSymbolLayout({
+                    bucket,
+                    glyphMap: tileResult.glyphMap,
+                    glyphPositions: tileResult.glyphPositions,
+                    imageMap: tileResult.iconMap,
+                    imagePositions: tileResult.imageAtlas.iconPositions,
+                    showCollisionBoxes: false,
+                    canonical: tileResult.featureIndex.tileID.canonical,
+                    subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision
+                });
+            }
+        }
+    }
+});

package/src/tile/tile_id.test.ts

@@ -63,7 +63,7 @@ describe('CanonicalTileID', () => {
 
 describe('OverscaledTileID', () => {
     test('constructor', () => {
-        expect(new OverscaledTileID(0, 0, 0, 0, 0) instanceof OverscaledTileID).toBeTruthy();
+        expect(new OverscaledTileID(0, 0, 0, 0, 0)).toBeInstanceOf(OverscaledTileID);
     });
 
     test('constructor - deeper canonicalZ than overscaledZ disallowed', () => {

package/src/tile/tile_manager.ts

@@ -16,7 +16,7 @@ import {GEOJSON_TILE_LAYER_NAME} from '../data/feature_index.ts';
 import {hasRasterTransition, isRasterType, updateFadingTiles} from './tile_manager_raster.ts';
 import {backfillDEM} from './tile_manager_raster_dem.ts';
 import {InViewTiles} from './tile_manager_in_view_tiles.ts';
-import {MapSourceDataEvent} from '../ui/events.ts';
+import {MapSourceDataEvent, type SourceEventType} from '../ui/events.ts';
 
 import type Point from '@mapbox/point-geometry';
 import type {Context} from '../webgl/context.ts';
@@ -55,7 +55,7 @@ type TileResult = {
  *  - unloading cached tiles not needed to render a given viewport
  *  - managing tile state and feature state
  */
-export class TileManager extends Evented {
+export class TileManager extends Evented<SourceEventType> {
     id: string;
     dispatcher: Dispatcher;
     map: Map;

package/src/ui/control/fullscreen_control.test.ts

@@ -45,15 +45,15 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
 
         fullscreen._fullscreenButton.dispatchEvent(click);
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
 
         fullscreen._fullscreenButton.dispatchEvent(click);
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('start and end events fire for fullscreen button clicks', () => {
@@ -129,11 +129,11 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(mapContainer.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('pseudo option forces pseudo fullscreen even when native fullscreen is available', () => {
@@ -151,7 +151,7 @@ describe('FullscreenControl', () => {
         fullscreen._fullscreenButton.dispatchEvent(click);
 
         expect(requestFullscreenSpy).not.toHaveBeenCalled();
-        expect(mapContainer.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(mapContainer.classList).toContain('maplibregl-pseudo-fullscreen');
     });
 
     test('pseudo fullscreen can be used on custom container', () => {
@@ -166,11 +166,11 @@ describe('FullscreenControl', () => {
 
         const click = new window.Event('click');
 
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(container.classList).not.toContain('maplibregl-pseudo-fullscreen');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(true);
+        expect(container.classList).toContain('maplibregl-pseudo-fullscreen');
         expect(fullscreen._container.tagName).toBe('BODY');
         fullscreen._fullscreenButton.dispatchEvent(click);
-        expect(container.classList.contains('maplibregl-pseudo-fullscreen')).toBe(false);
+        expect(container.classList).not.toContain('maplibregl-pseudo-fullscreen');
     });
 });

package/src/ui/control/geolocate_control.test.ts

@@ -418,7 +418,7 @@ describe('GeolocateControl with no options', () => {
         geolocate.trigger();
         geolocation.sendError({code: 2, message: 'error message'});
         expect(geolocate._watchState).toBe('ACTIVE_ERROR');
-        expect(geolocate._geolocateButton.classList.contains('maplibregl-ctrl-geolocate-active-error')).toBeTruthy();
+        expect(geolocate._geolocateButton.classList).toContain('maplibregl-ctrl-geolocate-active-error');
     });
 
     test('trigger before added to map', () => {
@@ -538,9 +538,7 @@ describe('GeolocateControl with no options', () => {
 
         expect(lngLatAsFixed(map.getCenter(), 4)).toEqual({lat: '10.0000', lng: '20.0000'});
         expect(geolocate._userLocationDotMarker._map).toBeTruthy();
-        expect(
-            geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')
-        ).toBeFalsy();
+        expect(geolocate._userLocationDotMarker._element.classList).not.toContain('maplibregl-user-location-dot-stale');
         const secontMoveEnd = map.once('moveend');
         geolocation.change({latitude: 40, longitude: 50, accuracy: 60});
         await secontMoveEnd;
@@ -549,7 +547,7 @@ describe('GeolocateControl with no options', () => {
         geolocation.changeError({code: 2, message: 'position unavailable'});
         await errorPromise;
         expect(geolocate._userLocationDotMarker._map).toBeTruthy();
-        expect(geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')).toBeTruthy();
+        expect(geolocate._userLocationDotMarker._element.classList).toContain('maplibregl-user-location-dot-stale');
     });
 
     /**

package/src/ui/control/globe_control.test.ts

@@ -73,8 +73,8 @@ describe('GlobeControl', () => {
         test('default without call to setProjection', () => {
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe');
             expect(map.style.projection.name).toBe('mercator');
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe-enabled');
         });
 
         test('setProjection({type: "mercator" -> "globe")', () => {
@@ -85,8 +85,8 @@ describe('GlobeControl', () => {
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe-enabled');
             expect(map.style.projection.name).toBe('globe');
             expect(button).not.toBeNull();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe-enabled');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe');
         });
 
         test('setProjection({type: "globe" -> "mercator")', () => {
@@ -96,8 +96,8 @@ describe('GlobeControl', () => {
             // mercator = disabled state
             const button = map.getContainer().querySelector('.maplibregl-ctrl-globe');
             expect(map.style.projection.name).toBe('mercator');
-            expect(button.classList.contains('maplibregl-ctrl-globe')).toBeTruthy();
-            expect(button.classList.contains('maplibregl-ctrl-globe-enabled')).toBeFalsy();
+            expect(button.classList).toContain('maplibregl-ctrl-globe');
+            expect(button.classList).not.toContain('maplibregl-ctrl-globe-enabled');
         });
     });
 });

package/src/ui/events.ts

@@ -1,4 +1,4 @@
-import {Event} from '../util/evented.ts';
+import {Event, type ErrorEvent} from '../util/evented.ts';
 
 import {DOM} from '../util/dom.ts';
 import Point from '@mapbox/point-geometry';

package/src/ui/handler/scroll_zoom.test.ts

@@ -1,4 +1,5 @@
 import {describe, beforeEach, test, expect, vi, type MockInstance} from 'vitest';
+import Point from '@mapbox/point-geometry';
 import * as timeControl from '../../util/time_control.ts';
 import {Map, type MapOptions} from '../../ui/map.ts';
 import {DOM} from '../../util/dom.ts';
@@ -656,6 +657,55 @@ describe('ScrollZoomHandler', () => {
         map.remove();
     });
 
+    describe('globe zooms around the pointer', () => {
+        async function zoomInAtOffset(offset: Point) {
+            const timeControlNow = vi.spyOn(timeControl, 'now');
+            timeControlNow.mockReturnValue(1555555555555);
+            const map = createMap();
+            await map.once('load');
+            map.setProjection({type: 'globe'});
+            map.setCenter([0, 0]);
+            map.setZoom(0);
+            map._renderTaskQueue.run();
+
+            const pointer = map._camera.transform.centerPoint.add(offset);
+            const locationBefore = map.unproject(pointer);
+
+            simulate.wheel(map.getCanvas(), {deltaY: -simulate.magicWheelZoomDelta * 4, clientX: pointer.x, clientY: pointer.y});
+            map._renderTaskQueue.run();
+
+            const locationAfter = map.unproject(pointer);
+            const result = {
+                driftLng: locationAfter.lng - locationBefore.lng,
+                driftLat: locationAfter.lat - locationBefore.lat,
+                center: map.getCenter()
+            };
+            map.remove();
+            return result;
+        }
+
+        test('keeps the location under the pointer while the globe is small on screen, and still zooms towards it', async () => {
+            const wellInsideTheGlobe = new Point(0, -40);
+            const {driftLng, driftLat, center} = await zoomInAtOffset(wellInsideTheGlobe);
+            expect(driftLng).toBeCloseTo(0, 6);
+            expect(driftLat).toBeCloseTo(0, 6);
+            expect(center.lat).toBeCloseTo(0.5972, 3);
+        });
+
+        test('eases the anchoring off near the horizon instead of dropping it', async () => {
+            const nearTheHorizon = new Point(0, -67.5);
+            const {driftLat} = await zoomInAtOffset(nearTheHorizon);
+            expect(Math.abs(driftLat)).toBeGreaterThan(0.5);
+            expect(Math.abs(driftLat)).toBeLessThan(1.5);
+        });
+
+        test('leaves zooming with the pointer off the planet unchanged', async () => {
+            const offThePlanet = new Point(0, -85);
+            const {center} = await zoomInAtOffset(offThePlanet);
+            expect(center.lat).toBeCloseTo(0.3545, 3);
+        });
+    });
+
     test('Clamps to min/max zoom when using mercator projection', async () => {
         const timeControlNow = vi.spyOn(timeControl, 'now');
         const map = createMap();

package/src/ui/handler/two_fingers_touch.test.ts

@@ -312,11 +312,11 @@ describe('touch zoom rotate', () => {
         const map = createMap();
 
         const className = 'maplibregl-touch-zoom-rotate';
-        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+        expect(map.getCanvasContainer().classList).toContain(className);
         map.touchZoomRotate.disable();
-        expect(map.getCanvasContainer().classList.contains(className)).toBeFalsy();
+        expect(map.getCanvasContainer().classList).not.toContain(className);
         map.touchZoomRotate.enable();
-        expect(map.getCanvasContainer().classList.contains(className)).toBeTruthy();
+        expect(map.getCanvasContainer().classList).toContain(className);
     });
 
     test('TwoFingersTouchZoomRotateHandler zooms when touching two markers on the same map', () => {

package/src/ui/handler_manager.test.ts

@@ -8,15 +8,15 @@ import type {ICameraHelper, MapControlsDeltas} from '../geo/projection/camera_he
 import type {Terrain} from '../render/terrain.ts';
 import type {ITransform} from '../geo/transform_interface.ts';
 import {Event as MapEvent} from '../util/evented.ts';
-import {beforeMapTest, createMap} from '../util/test/util.ts';
+import {MercatorCoordinate} from '../geo/mercator_coordinate.ts';
+import {beforeMapTest, createMap, createTerrain} from '../util/test/util.ts';
+import simulate from '../../test/unit/lib/simulate_interaction.ts';
 
 let map: Map;
 let manager: HandlerManager;
 
 beforeEach(() => {
     beforeMapTest();
-    map = createMap();
-    manager = map._handlers;
 });
 
 afterEach(() => {
@@ -25,6 +25,11 @@ afterEach(() => {
 });
 
 describe('HandlerManager terrain scenarios', () => {
+    beforeEach(() => {
+        map = createMap();
+        manager = map._handlers;
+    });
+
     test('_handleMapControls keeps terrain movement disabled when terrain is not enabled', () => {
         const handleZoom = vi.fn();
         const handlePan = vi.fn();
@@ -291,3 +296,238 @@ function createEventInProgress(name: keyof EventsInProgress): EventInProgress {
         originalEvent: new MapEvent(`${String(name)}start`),
     };
 }
+
+describe('terrain gesture anchoring', () => {
+    async function setupGestureMap(pitch: number = 0): Promise<HTMLElement> {
+        map = createMap({interactive: true, zoom: 11, center: [7.5, 45.9], pitch, bearing: 0});
+        map.touchZoomRotate.disableRotation();
+        map._handlers._handlersById.tapZoom.disable();
+        map.touchPitch.disable();
+        await map.once('style.load');
+        return map.getCanvas();
+    }
+
+    function gestureStep(kind: 'touchstart' | 'touchmove', target: HTMLElement, positions: Point[]): void {
+        const touches = positions.map((p, i) => ({target, identifier: i + 1, clientX: p.x, clientY: p.y}));
+        simulate[kind](target, {touches});
+        map._renderTaskQueue.run();
+    }
+
+    function endGesture(target: HTMLElement): void {
+        simulate.touchend(target, {touches: []});
+        map._renderTaskQueue.run();
+        map._renderTaskQueue.run();
+    }
+
+    function pinchTouches(mid: Point, halfSpread: number): Point[] {
+        return [
+            new Point(mid.x, mid.y - halfSpread),
+            new Point(mid.x, mid.y + halfSpread),
+        ];
+    }
+
+    function slipOf(anchor: LngLat, expectedAt: Point): number {
+        return map.project(anchor).dist(expectedAt);
+    }
+
+    test('moving-centroid pinch with terrain keeps the grabbed terrain point under the fingers', async () => {
+        const target = await setupGestureMap();
+        const anchor = new LngLat(7.49, 45.905);
+        const anchorCoordinate = MercatorCoordinate.fromLngLat(anchor);
+        let raycastElevation = 1000;
+        map.terrain = {
+            ...createTerrain(),
+            pointCoordinate: () => new MercatorCoordinate(anchorCoordinate.x, anchorCoordinate.y, raycastElevation),
+        } as any as Terrain;
+
+        // Start the pinch with the finger midpoint exactly where the grabbed point renders
+        const start = map.project(anchor);
+        expect(start.x).toBeGreaterThan(20);
+        expect(start.x).toBeLessThan(180);
+        expect(start.y).toBeGreaterThan(20);
+        expect(start.y).toBeLessThan(180);
+
+        gestureStep('touchstart', target, pinchTouches(start, 30));
+        let mid = start;
+        let halfSpread = 30;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(15, 10));
+            halfSpread += 10;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+            // terrain "loading" mid-gesture must not move the anchor plane
+            raycastElevation = 4000;
+        }
+
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+        expect(map._handlers._terrainGestureAnchorElevation).toBe(1000);
+
+        const slip = slipOf(anchor, mid);
+        endGesture(target);
+        expect(slip).toBeLessThan(0.5);
+        expect(map._handlers._terrainGestureAnchorElevation).toBeNull();
+    });
+
+    test('pitched moving-centroid pinch with terrain keeps the grabbed terrain point under the fingers', async () => {
+        const target = await setupGestureMap(60);
+        const anchor = new LngLat(7.494, 45.904);
+        const anchorCoordinate = MercatorCoordinate.fromLngLat(anchor);
+        map.terrain = {
+            ...createTerrain(),
+            pointCoordinate: () => new MercatorCoordinate(anchorCoordinate.x, anchorCoordinate.y, 1000),
+        } as any as Terrain;
+
+        const start = map.project(anchor);
+        expect(start.x).toBeGreaterThan(20);
+        expect(start.x).toBeLessThan(180);
+        expect(start.y).toBeGreaterThan(20);
+        expect(start.y).toBeLessThan(180);
+
+        gestureStep('touchstart', target, pinchTouches(start, 25));
+        let mid = start;
+        let halfSpread = 25;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(12, 8));
+            halfSpread += 8;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+        }
+
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+
+        const slip = slipOf(anchor, mid);
+        endGesture(target);
+        expect(slip).toBeLessThan(0.5);
+    });
+
+    test('touch drag with terrain keeps a grabbed point elevated above the center plane under the finger', async () => {
+        const target = await setupGestureMap();
+        // a 2000 m ridge east of the center, with the center itself at 300 m
+        const ridgeStartLng = map.getCenter().lng + 0.003;
+        const elevationAt = (lngLat: LngLat) => lngLat.lng > ridgeStartLng ? 2000 : 300;
+        const anchor = new LngLat(map.getCenter().lng + 0.012, map.getCenter().lat);
+        const anchorCoordinate = MercatorCoordinate.fromLngLat(anchor);
+        map.terrain = {
+            ...createTerrain(),
+            getElevationForLngLat: (lngLat: LngLat) => elevationAt(lngLat),
+            getElevationForLngLatZoom: (lngLat: LngLat) => elevationAt(lngLat),
+            pointCoordinate: () => new MercatorCoordinate(anchorCoordinate.x, anchorCoordinate.y, 2000),
+        } as any as Terrain;
+        map._camera.transform.setElevation(300);
+
+        const start = map.project(anchor);
+        expect(start.x).toBeGreaterThan(20);
+        expect(start.x).toBeLessThan(180);
+
+        gestureStep('touchstart', target, [start]);
+        let finger = start;
+        for (let step = 0; step < 3; step++) {
+            finger = finger.add(new Point(-20, 0));
+            gestureStep('touchmove', target, [finger]);
+        }
+
+        expect(map.getCenter().lng).not.toBeCloseTo(7.5, 5);
+
+        const slip = slipOf(anchor, finger);
+        endGesture(target);
+        expect(slip).toBeLessThan(0.5);
+    });
+
+    test('center-anchored pinch over terrain still pans with the centroid', async () => {
+        const target = await setupGestureMap();
+        map.touchZoomRotate.enable({around: 'center'});
+        const anchor = new LngLat(7.49, 45.905);
+        const anchorCoordinate = MercatorCoordinate.fromLngLat(anchor);
+        map.terrain = {
+            ...createTerrain(),
+            pointCoordinate: () => new MercatorCoordinate(anchorCoordinate.x, anchorCoordinate.y, 1000),
+        } as any as Terrain;
+
+        const startCenter = map.getCenter();
+        const start = new Point(80, 90);
+        gestureStep('touchstart', target, pinchTouches(start, 30));
+        let mid = start;
+        let halfSpread = 30;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(15, 10));
+            halfSpread += 10;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+        }
+
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+        // center-anchored zoom keeps the center fixed, so only the pan moves it
+        const centerMovedPx = map.project(startCenter).dist(new Point(100, 100));
+        endGesture(target);
+        expect(centerMovedPx).toBeGreaterThan(20);
+    });
+
+    test('falls back to the center-elevation behavior when the terrain under the gesture is not loaded', async () => {
+        const target = await setupGestureMap();
+        map.terrain = {
+            ...createTerrain(),
+            pointCoordinate: () => null,
+        } as any as Terrain;
+
+        const startCenter = map.getCenter();
+        const start = new Point(80, 90);
+        gestureStep('touchstart', target, pinchTouches(start, 30));
+        let mid = start;
+        let halfSpread = 30;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(15, 10));
+            halfSpread += 10;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+        }
+
+        // the gesture still zooms and pans sanely near where it started
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+        expect(Math.abs(map.getCenter().lng - startCenter.lng)).toBeLessThan(0.5);
+        expect(Math.abs(map.getCenter().lat - startCenter.lat)).toBeLessThan(0.5);
+        endGesture(target);
+    });
+
+    test('falls back to the center-elevation behavior when the grabbed terrain point is above the camera altitude', async () => {
+        const target = await setupGestureMap();
+        map.terrain = {
+            ...createTerrain(),
+            pointCoordinate: () => new MercatorCoordinate(0.5, 0.35, 1e6),
+        } as any as Terrain;
+
+        const startCenter = map.getCenter();
+        const start = new Point(80, 90);
+        gestureStep('touchstart', target, pinchTouches(start, 30));
+        let mid = start;
+        let halfSpread = 30;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(15, 10));
+            halfSpread += 10;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+        }
+
+        // the gesture still zooms and pans sanely near where it started
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+        expect(Math.abs(map.getCenter().lng - startCenter.lng)).toBeLessThan(0.5);
+        expect(Math.abs(map.getCenter().lat - startCenter.lat)).toBeLessThan(0.5);
+        endGesture(target);
+    });
+
+    test('control: the same moving-centroid pinch without terrain keeps the grabbed point under the fingers', async () => {
+        const target = await setupGestureMap();
+
+        const start = new Point(67, 76);
+        const anchor = map.unproject(start);
+
+        gestureStep('touchstart', target, pinchTouches(start, 30));
+        let mid = start;
+        let halfSpread = 30;
+        for (let step = 0; step < 3; step++) {
+            mid = mid.add(new Point(15, 10));
+            halfSpread += 10;
+            gestureStep('touchmove', target, pinchTouches(mid, halfSpread));
+        }
+
+        expect(map.getZoom()).toBeGreaterThan(11.5);
+
+        const slip = slipOf(anchor, mid);
+        endGesture(target);
+        expect(slip).toBeLessThan(0.5);
+    });
+});