maplibre-gl 6.2.0 → 6.4.0

package/src/ui/map.ts

@@ -31,6 +31,7 @@ import {defaultLocale} from './default_locale.ts';
 import {isAbortError} from '../util/abort_error.ts';
 import {coveringTiles, type CoveringTilesOptions, createCalculateTileZoomFunction} from '../geo/projection/covering_tiles.ts';
 import {CanonicalTileID, type OverscaledTileID} from '../tile/tile_id.ts';
+import {isStyleImageWebGLData} from '../style/style_image.ts';
 
 import type {PaddingOptions} from '../geo/edge_insets.ts';
 import type {Source} from '../source/source.ts';
@@ -3208,9 +3209,11 @@ export class Map extends Evented<MapEventType> {
         } else {
             const {width, height, data} = image as ImageData;
             const userImage = (image as any as StyleImageInterface);
+            const isWebGLImage = isStyleImageWebGLData(userImage.data);
 
             return {
-                data: new RGBAImage({width, height}, new Uint8Array(data)),
+                // A WebGL image paints its own slot, so its pixels are only ever transparent padding.
+                data: isWebGLImage ? new RGBAImage({width, height}) : new RGBAImage({width, height}, new Uint8Array(data)),
                 pixelRatio,
                 stretchX,
                 stretchY,
@@ -3219,6 +3222,7 @@ export class Map extends Evented<MapEventType> {
                 textFitHeight,
                 sdf,
                 version,
+                isWebGLImage,
                 userImage
             };
         }
@@ -3267,8 +3271,13 @@ export class Map extends Evented<MapEventType> {
                 'The width and height of the updated image must be that same as the previous version of the image')));
         }
 
-        const copy = !(image instanceof HTMLImageElement || isImageBitmap(image));
-        existingImage.data.replace(data, copy);
+        existingImage.isWebGLImage = isStyleImageWebGLData(data);
+        if (existingImage.isWebGLImage) {
+            existingImage.userImage = image as StyleImageInterface;
+        } else {
+            const copy = !(image instanceof HTMLImageElement || isImageBitmap(image));
+            existingImage.data.replace(data as Uint8Array | Uint8ClampedArray, copy);
+        }
 
         this.style.updateImage(id, existingImage);
         return this;
@@ -4146,6 +4155,11 @@ export class Map extends Evented<MapEventType> {
 
         if (this._lostContextStyle.images && this.style) {
             this.style.imageManager.images = this._lostContextStyle.images;
+            // The atlas textures died with the old context, so images that render themselves with WebGL owe every atlas a fresh render.
+            for (const id in this._lostContextStyle.images) {
+                const image = this._lostContextStyle.images[id];
+                if (image.isWebGLImage) this.style.imageManager.updateImage(id, image, false);
+            }
         }
 
         this._lostContextStyle = {style: null, images: null};

package/src/ui/map_tests/map_cross_window.test.ts

@@ -36,8 +36,8 @@ describe('Map cross-window support', () => {
             expect(iframeDocument).not.toBe(window.document);
             expect(iframeWindow).not.toBe(window);
 
-            expect(container instanceof HTMLElement).toBe(false);
-            expect(container instanceof iframeDocument.defaultView.HTMLElement).toBe(true);
+            expect(container).not.toBeInstanceOf( HTMLElement);
+            expect(container).toBeInstanceOf(iframeDocument.defaultView.HTMLElement);
 
             const map = new Map({
                 container,

package/src/ui/map_tests/map_events.test.ts

@@ -3,9 +3,9 @@ import simulate from '../../../test/unit/lib/simulate_interaction.ts';
 import {type StyleLayer} from '../../style/style_layer.ts';
 import {createMap, beforeMapTest, createStyle, sleep, createTerrain} from '../../util/test/util.ts';
 import {type MapGeoJSONFeature} from '../../util/vectortile_to_geojson.ts';
-import {type MapLibreEvent} from '../events.ts';
+import {type MapLibreEvent, MapSourceDataEvent} from '../events.ts';
 import {Map} from '../map.ts';
-import {Event as EventedEvent, ErrorEvent} from '../../util/evented.ts';
+import {ErrorEvent} from '../../util/evented.ts';
 import {type StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 
 type IsAny<T> = 0 extends T & 1 ? T : never;
@@ -980,7 +980,7 @@ describe('map events', () => {
     test('fires sourcedataabort event on dataabort event', async () => {
         const map = createMap();
         const sourcePromise = map.once('sourcedataabort');
-        map.fire(new EventedEvent('dataabort'));
+        map.fire(new MapSourceDataEvent('dataabort'));
         await expect(sourcePromise).resolves.toBeDefined();
     });
 

package/src/ui/map_tests/map_images.test.ts

@@ -95,6 +95,32 @@ test('map fires `styleimagemissing` when missing style image resolver returns no
     expect(map.hasImage(id)).toBeFalsy();
 });
 
+test('map preserves resolved images when missing style image resolver rejects another image', async () => {
+    const map = createMap();
+
+    const resolvedId = 'resolved-style-image';
+    const rejectedId = 'rejected-style-image';
+    const sampleImage = {width: 2, height: 1, data: new Uint8Array(8)};
+    const missingImageEventSpy = vi.fn();
+
+    map.setMissingStyleImageResolver(async (imageId) => {
+        if (imageId === rejectedId) {
+            throw new Error('Failed to resolve image');
+        }
+        map.addImage(imageId, sampleImage);
+    });
+    map.on('styleimagemissing', missingImageEventSpy);
+
+    const generatedImages = await map.style.imageManager.getImages([resolvedId, rejectedId]);
+
+    expect(generatedImages[resolvedId].data.width).toEqual(sampleImage.width);
+    expect(generatedImages[rejectedId]).toBeUndefined();
+    expect(missingImageEventSpy).toHaveBeenCalledTimes(1);
+    expect(missingImageEventSpy.mock.calls[0][0].id).toBe(rejectedId);
+    expect(map.hasImage(resolvedId)).toBeTruthy();
+    expect(map.hasImage(rejectedId)).toBeFalsy();
+});
+
 test('map keeps missing style image resolver after replacing the style', async () => {
     const map = createMap();
 
@@ -215,6 +241,35 @@ test('map getImage matches addImage, StyleImageInterface SDF', () => {
     expect(gotImage.sdf).toBe(true);
 });
 
+test('map addImage packs a placeholder for a WebGL image, which brings its own pixels', () => {
+    const map = createMap();
+    const id = 'add-get-webgl-style-image';
+    const onAdd = vi.fn();
+    const inputImage: StyleImageInterface = {width: 3, height: 2, data: {renderWithWebGL: vi.fn()}, onAdd};
+
+    map.addImage(id, inputImage);
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toBe(3);
+    expect(gotImage.data.height).toBe(2);
+    expect([...gotImage.data.data]).toEqual(new Array(3 * 2 * 4).fill(0));
+    expect(gotImage.isWebGLImage).toBe(true);
+    expect(gotImage.userImage).toBe(inputImage);
+    expect(onAdd).toHaveBeenCalledWith(map, id);
+});
+
+test('map updateImage swaps a WebGL image\'s renderWithWebGL callback instead of copying pixels', () => {
+    const map = createMap();
+    const replacement: StyleImageInterface = {width: 1, height: 1, data: {renderWithWebGL: vi.fn()}};
+
+    map.addImage('webgl', {width: 1, height: 1, data: {renderWithWebGL: vi.fn()}});
+    const version = map.getImage('webgl').version;
+    map.updateImage('webgl', replacement);
+
+    expect(map.getImage('webgl').userImage).toBe(replacement);
+    expect(map.getImage('webgl').version).toBe(version + 1);
+});
+
 test('map does not fire `styleimagemissing` for empty icon values', async () => {
     const map = createMap();
 

package/src/ui/map_tests/map_style.test.ts

@@ -1,7 +1,8 @@
 import {describe, beforeEach, afterEach, test, expect, vi} from 'vitest';
 import {Map, type MapOptions} from '../map.ts';
 import {createMap, beforeMapTest, createStyle, createStyleSource, sleep} from '../../util/test/util.ts';
-import {Event as EventedEvent} from '../../util/evented.ts';
+import {ErrorEvent} from '../../util/evented.ts';
+import {MapSourceDataEvent, MapStyleDataEvent} from '../events.ts';
 import {fixedLngLat, fixedNum} from '../../../test/unit/lib/fixed.ts';
 import {extend} from '../../util/util.ts';
 import {fakeServer, type FakeServer} from 'nise';
@@ -42,9 +43,9 @@ describe('setStyle', () => {
         map.on('data', recordEvent);
         map.on('dataloading', recordEvent);
 
-        map.style.fire(new EventedEvent('error'));
-        map.style.fire(new EventedEvent('data'));
-        map.style.fire(new EventedEvent('dataloading'));
+        map.style.fire(new ErrorEvent(new Error('test')));
+        map.style.fire(new MapSourceDataEvent('data'));
+        map.style.fire(new MapSourceDataEvent('dataloading'));
 
         expect(events).toEqual([
             'error',
@@ -65,10 +66,10 @@ describe('setStyle', () => {
         map.on('sourcedata', recordEvent);
         map.on('sourcedataloading', recordEvent);
 
-        map.style.fire(new EventedEvent('data', {dataType: 'style'}));
-        map.style.fire(new EventedEvent('dataloading', {dataType: 'style'}));
-        map.style.fire(new EventedEvent('data', {dataType: 'source'}));
-        map.style.fire(new EventedEvent('dataloading', {dataType: 'source'}));
+        map.style.fire(new MapStyleDataEvent('data'));
+        map.style.fire(new MapStyleDataEvent('dataloading'));
+        map.style.fire(new MapSourceDataEvent('data'));
+        map.style.fire(new MapSourceDataEvent('dataloading'));
 
         expect(events).toEqual([
             'styledata',

package/src/ui/map_tests/map_webgl.test.ts

@@ -93,6 +93,36 @@ test('does not fire "webglcontextrestored" after remove has been called', async
     expect(spy).not.toHaveBeenCalled();
 });
 
+test('a WebGL style image is told to release its GPU resources on context loss, and survives it', async () => {
+    const map = createMap();
+    const canvas = map.getCanvas();
+    await map.once('load');
+
+    const userImage = {
+        width: 2, height: 2,
+        data: {renderWithWebGL: vi.fn()},
+        onRemove: vi.fn()
+    };
+    map.addImage('gpu-image', userImage);
+    const versionBeforeContextLoss = map.getImage('gpu-image').version;
+
+    const contextLostPromise = map.once('webglcontextlost');
+    canvas.dispatchEvent(new window.Event('webglcontextlost'));
+    await contextLostPromise;
+
+    expect(userImage.onRemove).toHaveBeenCalled();
+
+    const contextRestoredPromise = map.once('webglcontextrestored');
+    canvas.dispatchEvent(new window.Event('webglcontextrestored'));
+    await contextRestoredPromise;
+
+    expect(map.hasImage('gpu-image')).toBe(true);
+    expect(map.getImage('gpu-image').userImage).toBe(userImage);
+    expect(map.getImage('gpu-image').version).toBe(versionBeforeContextLoss + 1);
+
+    map.remove();
+});
+
 test('WebGL2 context creation error fires ErrorEvent with structured GPUInitializationError', () => {
     HTMLCanvasElement.prototype.getContext = function (type: string) {
         if (type === 'webgl2') {

package/src/ui/marker.test.ts

@@ -96,20 +96,20 @@ describe('marker', () => {
             .addTo(map);
 
         const markerElement = marker.getElement();
-        expect(markerElement.classList.contains('some')).toBeTruthy();
-        expect(markerElement.classList.contains('classes')).toBeTruthy();
+        expect(markerElement.classList).toContain('some');
+        expect(markerElement.classList).toContain('classes');
 
         marker.addClassName('addedClass');
-        expect(markerElement.classList.contains('addedClass')).toBeTruthy();
+        expect(markerElement.classList).toContain('addedClass');
 
         marker.removeClassName('addedClass');
-        expect(!markerElement.classList.contains('addedClass')).toBeTruthy();
+        expect(markerElement.classList).not.toContain('addedClass');
 
         marker.toggleClassName('toggle');
-        expect(markerElement.classList.contains('toggle')).toBeTruthy();
+        expect(markerElement.classList).toContain('toggle');
 
         marker.toggleClassName('toggle');
-        expect(!markerElement.classList.contains('toggle')).toBeTruthy();
+        expect(markerElement.classList).not.toContain('toggle');
 
         expect(() => marker.addClassName('should throw exception')).toThrow(window.DOMException);
         expect(() => marker.removeClassName('should throw exception')).toThrow(window.DOMException);
@@ -123,19 +123,19 @@ describe('marker', () => {
     test('Marker provides LngLat accessors', () => {
         expect(new Marker().getLngLat()).toBeUndefined();
 
-        expect(new Marker().setLngLat([1, 2]).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Marker().setLngLat([1, 2]).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Marker().setLngLat([1, 2]).getLngLat()).toEqual(new LngLat(1, 2));
 
-        expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat() instanceof LngLat).toBeTruthy();
+        expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat()).toBeInstanceOf(LngLat);
         expect(new Marker().setLngLat(new LngLat(1, 2)).getLngLat()).toEqual(new LngLat(1, 2));
 
     });
 
     test('Marker provides offset accessors', () => {
-        expect(new Marker().setOffset([1, 2]).getOffset() instanceof Point).toBeTruthy();
+        expect(new Marker().setOffset([1, 2]).getOffset()).toBeInstanceOf(Point);
         expect(new Marker().setOffset([1, 2]).getOffset()).toEqual(new Point(1, 2));
 
-        expect(new Marker().setOffset(new Point(1, 2)).getOffset() instanceof Point).toBeTruthy();
+        expect(new Marker().setOffset(new Point(1, 2)).getOffset()).toBeInstanceOf(Point);
         expect(new Marker().setOffset(new Point(1, 2)).getOffset()).toEqual(new Point(1, 2));
 
     });
@@ -343,7 +343,7 @@ describe('marker', () => {
             .setLngLat([0, 0])
             .addTo(map);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-anchor-center')).toBeTruthy();
+        expect(marker.getElement().classList).toContain('maplibregl-marker-anchor-center');
         expect(marker.getElement().style.transform).toMatch(/translate\(-50%,-50%\)/);
 
         map.remove();
@@ -355,7 +355,7 @@ describe('marker', () => {
             .setLngLat([0, 0])
             .addTo(map);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-anchor-top')).toBeTruthy();
+        expect(marker.getElement().classList).toContain('maplibregl-marker-anchor-top');
         expect(marker.getElement().style.transform).toMatch(/translate\(-50%,0\)/);
 
         map.remove();
@@ -407,51 +407,35 @@ describe('marker', () => {
         Object.defineProperty(marker.getPopup()._container, 'offsetHeight', {value: 100});
 
         // marker should default to above since it has enough space
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom');
 
         // move marker to the top forcing the popup to below
         marker.setLngLat(map.unproject([mapHeight / 2, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top');
 
         // move marker to the right forcing the popup to the left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight / 2]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-right');
 
         // move marker to the left forcing the popup to the right
         marker.setLngLat(map.unproject([markerRight, mapHeight / 2]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-left');
 
         // move marker to the top left forcing the popup to the bottom right
         marker.setLngLat(map.unproject([markerRight, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top-left');
 
         // move marker to the top right forcing the popup to the bottom left
         marker.setLngLat(map.unproject([mapHeight - markerRight, markerTop]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-top-right');
 
         // move marker to the bottom left forcing the popup to the top right
         marker.setLngLat(map.unproject([markerRight, mapHeight]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-left')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom-left');
 
         // move marker to the bottom right forcing the popup to the top left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight]));
-        expect(
-            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-right')
-        ).toBeTruthy();
+        expect(marker.getPopup()._container.classList).toContain('maplibregl-popup-anchor-bottom-right');
 
         map.remove();
     });
@@ -828,6 +812,157 @@ describe('marker', () => {
         map.remove();
     });
 
+    test('Marker with draggable:true is keyboard-focusable, and stops being focusable when dragging is disabled', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+        marker.setDraggable(false);
+        expect(marker.getElement().hasAttribute('tabindex')).toBe(false);
+        map.remove();
+    });
+
+    test('Marker.setDraggable preserves an application-provided tabindex', () => {
+        const marker = new Marker();
+        marker.getElement().setAttribute('tabindex', '5');
+
+        marker.setDraggable(true);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+
+        marker.setDraggable(false);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+    });
+
+    test('Marker keeps a tabindex the application overrode after the marker managed it', () => {
+        const marker = new Marker({draggable: true});
+        marker.setDraggable(true);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+
+        marker.getElement().setAttribute('tabindex', '5');
+        marker.setDraggable(false);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+    });
+
+    test('Marker starts a fresh keyboard gesture after being removed mid-drag and re-added', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const el = marker.getElement();
+        const dragstart = vi.fn();
+        marker.on('dragstart', dragstart);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(dragstart).toHaveBeenCalledTimes(1);
+
+        // removed mid-gesture (no keyup), then re-added
+        marker.remove();
+        marker.addTo(map);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(dragstart).toHaveBeenCalledTimes(2);
+        map.remove();
+    });
+
+    test('Marker keeps its tabindex while either dragging or a popup keeps it interactive', () => {
+        const marker = new Marker({draggable: true}).setPopup(new Popup());
+
+        marker.setPopup();
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+
+        marker.setDraggable(false);
+        expect(marker.getElement().hasAttribute('tabindex')).toBe(false);
+    });
+
+    test('Marker with a custom element leaves focusability and keyboard handling to the application', () => {
+        const map = createMap();
+        const element = window.document.createElement('div');
+        const marker = new Marker({draggable: true, element}).setLngLat([0, 0]).addTo(map);
+        const startLngLat = marker.getLngLat();
+        const event = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true});
+
+        element.dispatchEvent(event);
+
+        expect(element.hasAttribute('tabindex')).toBe(false);
+        expect(marker.getLngLat()).toEqual(startLngLat);
+        expect(event.defaultPrevented).toBe(false);
+        map.remove();
+    });
+
+    test('Marker with draggable:true moves with arrow keys and fires drag events', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const el = marker.getElement();
+        const startPos = map.project(marker.getLngLat());
+        const events: string[] = [];
+        const positionsAtDragstart: Point[] = [];
+        marker.on('dragstart', () => {
+            events.push('dragstart');
+            positionsAtDragstart.push(map.project(marker.getLngLat()));
+        });
+        marker.on('drag', () => events.push('drag'));
+        marker.on('dragend', () => events.push('dragend'));
+
+        const ignoredEvent = new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true});
+        el.dispatchEvent(ignoredEvent);
+        expect(map.project(marker.getLngLat())).toEqual(startPos);
+        expect(ignoredEvent.defaultPrevented).toBe(false);
+
+        const nestedElement = window.document.createElement('button');
+        el.attachShadow({mode: 'open'}).appendChild(nestedElement);
+        const nestedEvent = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, composed: true, cancelable: true});
+        nestedElement.dispatchEvent(nestedEvent);
+        expect(map.project(marker.getLngLat())).toEqual(startPos);
+        expect(nestedEvent.defaultPrevented).toBe(false);
+
+        const easeTo = vi.spyOn(map, 'easeTo');
+        const containerHandler = vi.fn();
+        map.getCanvasContainer().addEventListener('keydown', containerHandler);
+        const event = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true});
+        el.dispatchEvent(event);
+
+        expect(map.project(marker.getLngLat()).x).toBeCloseTo(startPos.x + 1);
+        expect(map.project(marker.getLngLat()).y).toBeCloseTo(startPos.y);
+        expect(event.defaultPrevented).toBe(true);
+        expect(containerHandler).not.toHaveBeenCalled();
+        expect(easeTo).not.toHaveBeenCalled();
+        expect(events).toEqual(['dragstart', 'drag']);
+        expect(positionsAtDragstart[0].x).toBeCloseTo(startPos.x + 1);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', repeat: true, bubbles: true, cancelable: true}));
+        el.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend']);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        el.dispatchEvent(new FocusEvent('blur'));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend', 'dragstart', 'drag', 'dragend']);
+
+        el.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend', 'dragstart', 'drag', 'dragend']);
+        map.remove();
+    });
+
+    test('Marker with draggable:true moves ten pixels per Shift+arrow keydown', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const startPos = map.project(marker.getLngLat());
+
+        marker.getElement().dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', shiftKey: true, bubbles: true, cancelable: true}));
+
+        const endPos = map.project(marker.getLngLat());
+        expect(endPos.x).toBeCloseTo(startPos.x);
+        expect(endPos.y).toBeCloseTo(startPos.y + 10);
+        map.remove();
+    });
+
+    test('Marker stops responding to arrow keys after dragging is disabled', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map).setDraggable(false);
+        const startLngLat = marker.getLngLat();
+
+        marker.getElement().dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+
+        expect(marker.getLngLat()).toEqual(startLngLat);
+        map.remove();
+    });
+
     test('Marker with draggable:false does not move to new position in response to a mouse-triggered drag', () => {
         const map = createMap();
         const marker = new Marker({})
@@ -1352,7 +1487,7 @@ describe('marker', () => {
         map.fire('terrain');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1368,13 +1503,13 @@ describe('marker', () => {
         map.fire('terrain');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
 
         map.terrain.depthAtPoint = () => .95; // Terrain no longer blocking marker
         map.fire('moveend');
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(false);
+        expect(marker.getElement().classList).not.toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1389,7 +1524,7 @@ describe('marker', () => {
         map.setProjection({type: 'globe'});
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
         map.remove();
     });
 
@@ -1404,12 +1539,12 @@ describe('marker', () => {
         map.setProjection({type: 'globe'});
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(true);
+        expect(marker.getElement().classList).toContain('maplibregl-marker-covered');
 
         marker.setLngLat([0, 0]);
         await sleep(100);
 
-        expect(marker.getElement().classList.contains('maplibregl-marker-covered')).toBe(false);
+        expect(marker.getElement().classList).not.toContain('maplibregl-marker-covered');
         map.remove();
     });
 });