maplibre-gl 6.0.0 → 6.2.0

package/src/source/rtl_text_plugin_main_thread.test.ts

@@ -1,4 +1,4 @@
-import {describe, beforeEach, it, afterEach, expect, vi, type MockInstance} from 'vitest';
+import {describe, beforeEach, afterEach, expect, vi, type MockInstance, test} from 'vitest';
 import {type FakeServer, fakeServer} from 'nise';
 import {rtlMainThreadPluginFactory} from './rtl_text_plugin_main_thread.ts';
 import {sleep} from '../util/test/util.ts';
@@ -20,7 +20,7 @@ describe('RTLMainThreadPlugin', () => {
         global.fetch = null;
         // Reset the singleton instance before each test
         rtlMainThreadPlugin.clearRTLTextPlugin();
-        broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(() => Promise.resolve({} as any));
+        broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockResolvedValue({} as any);
     });
 
     function broadcastMockSuccess(message: MessageType, payload: PluginState): Promise<PluginState[]> {
@@ -62,36 +62,36 @@ describe('RTLMainThreadPlugin', () => {
         broadcastSpy.mockRestore();
     });
 
-    it('should get the RTL text plugin status', () => {
+    test('should get the RTL text plugin status', () => {
         const status = rtlMainThreadPlugin.getRTLTextPluginStatus();
         expect(status).toBe('unavailable');
     });
 
-    it('should set the RTL text plugin and download it', async () => {
+    test('should set the RTL text plugin and download it', async () => {
         broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(broadcastMockSuccess as any);
         await rtlMainThreadPlugin.setRTLTextPlugin(url);
         expect(rtlMainThreadPlugin.url).toEqual(url);
         expect(rtlMainThreadPlugin.status).toBe('loaded');
     });
 
-    it('should set the RTL text plugin but defer downloading', async () => {
+    test('should set the RTL text plugin but defer downloading', async () => {
         await rtlMainThreadPlugin.setRTLTextPlugin(url, true);
         expect(rtlMainThreadPlugin.status).toBe('deferred');
         expect(broadcastSpy).toHaveBeenCalledWith(SyncRTLPluginStateMessageName, {pluginStatus: 'deferred', pluginURL: url});
     });
 
-    it('should throw if the plugin is already set', async () => {
+    test('should throw if the plugin is already set', async () => {
         await rtlMainThreadPlugin.setRTLTextPlugin(url, true);
         await expect(rtlMainThreadPlugin.setRTLTextPlugin(url)).rejects.toThrow('setRTLTextPlugin cannot be called multiple times.');
     });
 
-    it('should throw if the plugin url is not set', async () => {
-        const spy = vi.spyOn(browser, 'resolveURL').mockImplementation(() => '');
+    test('should throw if the plugin url is not set', async () => {
+        const spy = vi.spyOn(browser, 'resolveURL').mockReturnValue('');
         await expect(rtlMainThreadPlugin.setRTLTextPlugin(null)).rejects.toThrow('requested url null is invalid');
         spy.mockRestore();
     });
 
-    it('should be in error state if download fails', async () => {
+    test('should be in error state if download fails', async () => {
         broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(broadcastMockFailure as any);
         const resultPromise = rtlMainThreadPlugin.setRTLTextPlugin(url);
         await expect(resultPromise).rejects.toBe(failedToLoadMessage);
@@ -99,7 +99,7 @@ describe('RTLMainThreadPlugin', () => {
         expect(rtlMainThreadPlugin.status).toBe('error');
     });
 
-    it('should lazy load the plugin if deferred', async () => {
+    test('should lazy load the plugin if deferred', async () => {
         // use success spy to make sure test case does not throw exception
         const deferredSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(broadcastMockSuccessDefer as any);
         await rtlMainThreadPlugin.setRTLTextPlugin(url, true);
@@ -129,12 +129,12 @@ describe('RTLMainThreadPlugin', () => {
         expect(broadcastSpy).toHaveBeenCalledTimes(1);
     });
 
-    it('should set status to requested if RTL plugin was not set', async () => {
+    test('should set status to requested if RTL plugin was not set', async () => {
         rtlMainThreadPlugin.lazyLoad();
         expect(rtlMainThreadPlugin.status).toBe('requested');
     });
 
-    it('should immediately download if RTL plugin was already requested, ignoring deferred:true', async () => {
+    test('should immediately download if RTL plugin was already requested, ignoring deferred:true', async () => {
         broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(broadcastMockSuccess as any);
         rtlMainThreadPlugin.lazyLoad();
         expect(rtlMainThreadPlugin.status).toBe('requested');
@@ -146,14 +146,14 @@ describe('RTLMainThreadPlugin', () => {
         expect(broadcastSpy).toHaveBeenCalledWith(SyncRTLPluginStateMessageName, {pluginStatus: 'loading', pluginURL: url});
     });
 
-    it('should allow multiple calls to lazyLoad', async () => {
+    test('should allow multiple calls to lazyLoad', async () => {
         rtlMainThreadPlugin.lazyLoad();
         expect(rtlMainThreadPlugin.status).toBe('requested');
         rtlMainThreadPlugin.lazyLoad();
         expect(rtlMainThreadPlugin.status).toBe('requested');
     });
 
-    it('should be in error state if lazyLoad fails', async () => {
+    test('should be in error state if lazyLoad fails', async () => {
         broadcastSpy = vi.spyOn(Dispatcher.prototype, 'broadcast').mockImplementation(broadcastMockSuccessDefer);
         const resultPromise = rtlMainThreadPlugin.setRTLTextPlugin(url, true);
         await expect(resultPromise).resolves.toBeUndefined();

package/src/source/source.test.ts

@@ -27,18 +27,18 @@ describe('addSourceType', () => {
         await addSourceType('foo2', sourceType);
         expect(spy).not.toHaveBeenCalled();
 
-        expect(() => create('id', {type: 'foo2'} as any, null, null)).toThrow();
+        expect(() => create('id', {type: 'foo2'} as any, null, null)).toThrow('Expected Source id to be id instead of undefined');
         expect(sourceType).toHaveBeenCalled();
     });
 
     test('refuses to add new type over existing name', async () => {
         const sourceType = function () {} as any as SourceClass;
-        await expect(addSourceType('canvas', sourceType)).rejects.toThrow();
-        await expect(addSourceType('geojson', sourceType)).rejects.toThrow();
-        await expect(addSourceType('image', sourceType)).rejects.toThrow();
-        await expect(addSourceType('raster', sourceType)).rejects.toThrow();
-        await expect(addSourceType('raster-dem', sourceType)).rejects.toThrow();
-        await expect(addSourceType('vector', sourceType)).rejects.toThrow();
-        await expect(addSourceType('video', sourceType)).rejects.toThrow();
+        await expect(addSourceType('canvas', sourceType)).rejects.toThrow('A source type called "canvas" already exists.');
+        await expect(addSourceType('geojson', sourceType)).rejects.toThrow('A source type called "geojson" already exists.');
+        await expect(addSourceType('image', sourceType)).rejects.toThrow('A source type called "image" already exists.');
+        await expect(addSourceType('raster', sourceType)).rejects.toThrow('A source type called "raster" already exists.');
+        await expect(addSourceType('raster-dem', sourceType)).rejects.toThrow('A source type called "raster-dem" already exists.');
+        await expect(addSourceType('vector', sourceType)).rejects.toThrow('A source type called "vector" already exists.');
+        await expect(addSourceType('video', sourceType)).rejects.toThrow('A source type called "video" already exists.');
     });
 });

package/src/source/vector_tile_source.test.ts

@@ -454,7 +454,7 @@ describe('VectorTileSource', () => {
 
         await waitForEvent(source, 'data', (e: MapSourceDataEvent) => e.sourceDataType === 'metadata');
 
-        expect(server.requests.length).toBe(2);
+        expect(server.requests).toHaveLength(2);
         expect(server.requests[0].aborted).toBe(true);
         expect(source.serialize()).toEqual({
             type: 'vector',

package/src/source/vector_tile_worker_source.test.ts

@@ -66,7 +66,7 @@ describe('vector tile worker source', () => {
 
     test('VectorTileWorkerSource.reloadTile reloads a previously-loaded tile', async () => {
         const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
-        const parse = vi.fn().mockReturnValue(Promise.resolve({} as WorkerTileResult));
+        const parse = vi.fn().mockResolvedValue({});
 
         source.tileState.loaded = {
             '0': {
@@ -144,13 +144,14 @@ describe('vector tile worker source', () => {
             request.respond(200, {'Content-Type': 'application/pbf'}, rawTileData as any);
         });
 
+        const onSettled = vi.fn();
         source.loadTile({
             source: 'source',
             uid: 0,
             tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
             request: {url: 'http://localhost:2900/faketile.pbf'},
             subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision,
-        } as any as WorkerTileParameters).then(() => expect(false).toBeTruthy());
+        } as any as WorkerTileParameters).then(onSettled, onSettled);
 
         server.respond();
 
@@ -163,6 +164,7 @@ describe('vector tile worker source', () => {
             tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
             subdivisionGranularity: SubdivisionGranularitySetting.noSubdivision,
         } as any as WorkerTileParameters) as WorkerTileWithData;
+        expect(onSettled).not.toHaveBeenCalled();
         expect(res).toBeDefined();
         expect(res.rawTileData).toBeDefined();
         expect(res.rawTileData).toStrictEqual(rawTileData);
@@ -391,7 +393,7 @@ describe('vector tile worker source', () => {
         server.respond();
 
         expect(parse).not.toHaveBeenCalled();
-        expect(await promise).toBeNull();
+        await expect(promise).resolves.toBeNull();
     });
 
     test('VectorTileWorkerSource.returns a good error message when failing to parse a tile', async () => {
@@ -412,7 +414,7 @@ describe('vector tile worker source', () => {
         server.respond();
 
         expect(parse).not.toHaveBeenCalled();
-        await expect(loadTilePromise).rejects.toThrowError(/Unable to parse the tile at/);
+        await expect(loadTilePromise).rejects.toThrow(/Unable to parse the tile at/);
     });
 
     test('VectorTileWorkerSource.returns a good error message when failing to parse a gzipped tile', async () => {
@@ -431,7 +433,7 @@ describe('vector tile worker source', () => {
         server.respond();
 
         expect(parse).not.toHaveBeenCalled();
-        await expect(loadTilePromise).rejects.toThrowError(/gzipped/);
+        await expect(loadTilePromise).rejects.toThrow(/gzipped/);
     });
 
     test('VectorTileWorkerSource provides resource timing information', async () => {

package/src/source/video_source.test.ts

@@ -120,7 +120,7 @@ describe('VideoSource', () => {
     test('onRemove removes playing listener and pauses video', () => {
         const video = window.document.createElement('video');
         const removeListenerSpy = vi.spyOn(video, 'removeEventListener');
-        const pauseSpy = vi.spyOn(video, 'pause');
+        const pauseSpy = vi.spyOn(video, 'pause').mockImplementation(() => {});
 
         const source = createSource({
             type: 'video',

package/src/source/worker.test.ts

@@ -97,7 +97,7 @@ describe('Worker generic testing', () => {
     test('worker source messages dispatched to the correct map instance', () => {
         const externalSourceName = 'test';
 
-        const sendAsyncSpy = vi.fn().mockReturnValue(Promise.resolve({} as any));
+        const sendAsyncSpy = vi.fn().mockResolvedValue({} as any);
         worker.actor.sendAsync = sendAsyncSpy;
 
         _self.registerWorkerSource(externalSourceName, WorkerSourceMock);

package/src/source/worker_tile.test.ts

@@ -3,14 +3,14 @@ import {WorkerTile} from '../source/worker_tile.ts';
 import {type Feature, GeoJSONWrapper, type VectorTileLike} from '@maplibre/vt-pbf';
 import {OverscaledTileID} from '../tile/tile_id.ts';
 import {StyleLayerIndex} from '../style/style_layer_index.ts';
-import {type WorkerTileParameters, type WorkerTileWithData} from './worker_source.ts';
+import {MessageType} from '../util/actor_messages.ts';
 import {SubdivisionGranularitySetting} from '../render/subdivision_granularity_settings.ts';
-import {type EvaluationParameters} from '../style/evaluation_parameters.ts';
-import {type PossiblyEvaluated} from '../style/properties.ts';
 import {Color} from '@maplibre/maplibre-gl-style-spec';
-import {type CirclePaintProps, type CirclePaintPropsPossiblyEvaluated} from '../style/style_layer/circle_style_layer_properties.g.ts';
-import {type SymbolLayoutProps, type SymbolLayoutPropsPossiblyEvaluated} from '../style/style_layer/symbol_style_layer_properties.g.ts';
-import {MessageType} from '../util/actor_messages.ts';
+import type {WorkerTileParameters, WorkerTileWithData} from './worker_source.ts';
+import type {EvaluationParameters} from '../style/evaluation_parameters.ts';
+import type {PossiblyEvaluated} from '../style/properties.ts';
+import type {CirclePaintProps, CirclePaintPropsPossiblyEvaluated} from '../style/style_layer/circle_style_layer_properties.g.ts';
+import type {SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated} from '../style/style_layer/symbol_style_layer_properties.g.ts';
 
 function createWorkerTile(params?: {globalState?: Record<string, any>}): WorkerTile {
     return new WorkerTile({
@@ -299,9 +299,11 @@ describe('worker tile', () => {
         const actorMock = {
             sendAsync
         };
-        tile.parse(data, layerIndex, ['hello'], actorMock, SubdivisionGranularitySetting.noSubdivision).then(() => expect(false).toBeTruthy());
-        tile.parse(data, layerIndex, ['hello'], actorMock, SubdivisionGranularitySetting.noSubdivision).then(() => expect(false).toBeTruthy());
+        const onSettled = vi.fn();
+        tile.parse(data, layerIndex, ['hello'], actorMock, SubdivisionGranularitySetting.noSubdivision).then(onSettled, onSettled);
+        tile.parse(data, layerIndex, ['hello'], actorMock, SubdivisionGranularitySetting.noSubdivision).then(onSettled, onSettled);
         const result = await tile.parse(data, layerIndex, ['hello'], actorMock, SubdivisionGranularitySetting.noSubdivision);
+        expect(onSettled).not.toHaveBeenCalled();
         expect(result).toBeDefined();
         expect(cancelCount).toBe(6);
         expect(sendAsync).toHaveBeenCalledTimes(9);

package/src/style/light.test.ts

@@ -8,7 +8,7 @@ import {type TransitionParameters} from './properties.ts';
 const spec = styleSpec.light;
 
 test('Light with defaults', () => {
-    const light = new Light({});
+    const light = new Light({}, {});
     light.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
 
     expect(light.properties.get('anchor')).toEqual(spec.anchor.default);
@@ -23,7 +23,7 @@ test('Light with options', () => {
         anchor: 'map',
         position: [2, 30, 30],
         intensity: 1
-    });
+    }, {});
     light.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
 
     expect(light.properties.get('anchor')).toBe('map');
@@ -38,7 +38,7 @@ test('Light with stops function', () => {
         intensity: {
             stops: [[16, 0.2], [17, 0.8]]
         }
-    } as LightSpecification);
+    } as LightSpecification, {});
     light.recalculate({zoom: 16.5, zoomHistory: {}} as EvaluationParameters);
 
     expect(light.properties.get('intensity')).toBe(0.5);
@@ -50,12 +50,12 @@ test('Light.getLight', () => {
         defaults[key] = spec[key].default;
     }
 
-    expect(new Light(defaults).getLight()).toEqual(defaults);
+    expect(new Light(defaults, {}).getLight()).toEqual(defaults);
 });
 
 describe('Light.setLight', () => {
     test('sets light', () => {
-        const light = new Light({});
+        const light = new Light({}, {});
         light.setLight({color: 'red', 'color-transition': {duration: 3000}});
         light.updateTransitions({transition: true} as any as TransitionParameters);
         light.recalculate({zoom: 16, zoomHistory: {}, now: 1500} as EvaluationParameters);
@@ -63,9 +63,9 @@ describe('Light.setLight', () => {
     });
 
     test('validates by default', () => {
-        const light = new Light({});
+        const light = new Light({}, {});
         const lightSpy = vi.spyOn(light, '_validate');
-        vi.spyOn(console, 'error').mockImplementation(() => { });
+        vi.spyOn(console, 'error').mockImplementation(() => {});
         light.setLight({color: 'notacolor'});
         light.updateTransitions({transition: false} as any as TransitionParameters);
         light.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
@@ -75,7 +75,7 @@ describe('Light.setLight', () => {
     });
 
     test('respects validation option', () => {
-        const light = new Light({});
+        const light = new Light({}, {});
 
         const lightSpy = vi.spyOn(light, '_validate');
         light.setLight({color: [999]} as any, {validate: false});
@@ -96,7 +96,7 @@ describe('Light runtime error logging', () => {
     test('warns with the light property location when an expression errors at runtime', () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
 
-        const light = new Light({});
+        const light = new Light({}, {});
         // global-state defeats constant-folding, so this fails at evaluation time (not parse time).
         light.setLight({intensity: ['number', ['global-state', 'missing']]} as any, {validate: false});
         light.updateTransitions({transition: false} as any as TransitionParameters);

package/src/style/light.ts

@@ -19,9 +19,9 @@ export class Light extends Evented {
     _transitioning: Transitioning<LightProps>;
     properties: PossiblyEvaluated<LightProps, LightPropsPossiblyEvaluated>;
 
-    constructor(lightOptions?: LightSpecification) {
+    constructor(lightOptions: LightSpecification, globalState: Record<string, any>) {
         super();
-        this._transitionable = new Transitionable(getProperties(), 'light', undefined);
+        this._transitionable = new Transitionable(getProperties(), 'light', globalState);
         this.setLight(lightOptions);
         this._transitioning = this._transitionable.untransitioned();
     }
@@ -37,7 +37,7 @@ export class Light extends Evented {
         return sphericalToCartesian(this.properties.get('position'));
     }
 
-    setLight(light?: LightSpecification, options: StyleSetterOptions = {}): void {
+    setLight(light: LightSpecification, options: StyleSetterOptions = {}): void {
         if (this._validate(validateStyle.light, light, options)) {
             return;
         }

package/src/style/load_glyph_range.test.ts

@@ -33,10 +33,10 @@ test('loadGlyphRange', async ()  => {
 
         expect(glyph.id).toBe(Number(id));
         expect(glyph.metrics).toBeTruthy();
-        expect(typeof glyph.metrics.width).toBe('number');
-        expect(typeof glyph.metrics.height).toBe('number');
-        expect(typeof glyph.metrics.top).toBe('number');
-        expect(typeof glyph.metrics.advance).toBe('number');
+        expect(glyph.metrics.width).toBeTypeOf('number');
+        expect(glyph.metrics.height).toBeTypeOf('number');
+        expect(glyph.metrics.top).toBeTypeOf('number');
+        expect(glyph.metrics.advance).toBeTypeOf('number');
     }
     expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
 });
@@ -64,10 +64,10 @@ test('loadGlyphRange with async transformRequest', async () => {
 
         expect(glyph.id).toBe(Number(id));
         expect(glyph.metrics).toBeTruthy();
-        expect(typeof glyph.metrics.width).toBe('number');
-        expect(typeof glyph.metrics.height).toBe('number');
-        expect(typeof glyph.metrics.top).toBe('number');
-        expect(typeof glyph.metrics.advance).toBe('number');
+        expect(glyph.metrics.width).toBeTypeOf('number');
+        expect(glyph.metrics.height).toBeTypeOf('number');
+        expect(glyph.metrics.top).toBeTypeOf('number');
+        expect(glyph.metrics.advance).toBeTypeOf('number');
     }
     expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
     expect(server.requests[0].requestHeaders.Authorization).toBe('Bearer token');

package/src/style/load_sprite.test.ts

@@ -28,7 +28,7 @@ describe('normalizeSpriteURL', () => {
         ).toBe('http://www.foo.com/bar@2x.png?fresh=true');
     });
 
-    test('test relative URL', () => {
+    test('relative URL', () => {
         expect(
             () => normalizeSpriteURL('/bar?fresh=true', '@2x', '.png')
         ).toThrow(/Invalid/i);

package/src/style/properties.test.ts

@@ -1,6 +1,8 @@
-import {describe, test, expect, vi, afterEach} from 'vitest';
-import {Layout, PropertyValue, Transitionable} from './properties.ts';
+import {describe, test, expect, vi, afterEach, beforeEach} from 'vitest';
+import {ColorArray} from '@maplibre/maplibre-gl-style-spec';
+import {DataDrivenProperty, Layout, PossiblyEvaluatedPropertyValue, PropertyValue, Transitionable} from './properties.ts';
 import symbolProperties from './style_layer/symbol_style_layer_properties.g.ts';
+import hillshadeProperties from './style_layer/hillshade_style_layer_properties.g.ts';
 import {type EvaluationParameters} from './evaluation_parameters.ts';
 
 describe('PropertyValue', () => {
@@ -100,3 +102,93 @@ describe('Transitionable', () => {
         expect(warn.mock.calls[0][0]).toBe('layers[0].paint.text-color: Could not parse color from value \'oops blue\' Falling back to rgba(0,0,0,1).');
     });
 });
+
+describe('paint property transitions between arrays of different length, issue #6606', () => {
+    const transition = {duration: 300, delay: 0};
+
+    beforeEach(() => {
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    function evaluateMidTransition(from: string[], to: string[]) {
+        const transitionable = new Transitionable(hillshadeProperties.paint, '', {});
+
+        transitionable.setValue('hillshade-highlight-color', from);
+        let transitioning = transitionable.transitioned(
+            {now: 0, transition}, transitionable.untransitioned());
+        transitioning.possiblyEvaluate({zoom: 0, now: 0} as EvaluationParameters, undefined, []);
+
+        transitionable.setValue('hillshade-highlight-color', to);
+        transitioning = transitionable.transitioned({now: 0, transition}, transitioning);
+
+        // Halfway through the 300ms transition, where interpolation is attempted.
+        return transitioning
+            .possiblyEvaluate({zoom: 0, now: 150} as EvaluationParameters, undefined, [])
+            .get('hillshade-highlight-color');
+    }
+
+    test('removing a light snaps to the new colors instead of throwing', () => {
+        const result = evaluateMidTransition(
+            ['#ffffff', '#ff0000', '#00ff00', '#0000ff'],
+            ['#ffffff', '#ff0000', '#00ff00']
+        );
+
+        expect(result.values).toHaveLength(3);
+        expect(result).toEqual(ColorArray.parse(['#ffffff', '#ff0000', '#00ff00']));
+    });
+
+    test('adding a light snaps to the new colors instead of throwing', () => {
+        const result = evaluateMidTransition(
+            ['#ffffff', '#ff0000'],
+            ['#ffffff', '#ff0000', '#00ff00']
+        );
+
+        expect(result.values).toHaveLength(3);
+        expect(result).toEqual(ColorArray.parse(['#ffffff', '#ff0000', '#00ff00']));
+    });
+
+    test('a same-length change still interpolates normally', () => {
+        const result = evaluateMidTransition(
+            ['#000000', '#000000'],
+            ['#ffffff', '#ffffff']
+        );
+
+        expect(result.values).toHaveLength(2);
+        for (const color of result.values) {
+            expect(color.r).toBeGreaterThan(0);
+            expect(color.r).toBeLessThan(1);
+        }
+    });
+});
+
+describe('DataDrivenProperty.interpolate between arrays of different length, issue #6606', () => {
+    const property = new DataDrivenProperty<ColorArray>({type: 'colorArray'} as any, 'color-array');
+
+    function constant(value: ColorArray) {
+        return new PossiblyEvaluatedPropertyValue<ColorArray>(
+            property, {kind: 'constant', value}, {} as EvaluationParameters);
+    }
+
+    test('a length change snaps to the target value instead of throwing', () => {
+        vi.spyOn(console, 'warn').mockImplementation(() => {});
+        const from = constant(ColorArray.parse(['#ffffff', '#ff0000', '#00ff00', '#0000ff']));
+        const to = constant(ColorArray.parse(['#ffffff', '#ff0000', '#00ff00']));
+
+        const result = property.interpolate(from, to, 0.5);
+
+        expect(result.value).toEqual({kind: 'constant', value: ColorArray.parse(['#ffffff', '#ff0000', '#00ff00'])});
+    });
+
+    test('a same-length change still interpolates normally', () => {
+        const a = ColorArray.parse(['#000000', '#000000']);
+        const b = ColorArray.parse(['#ffffff', '#ffffff']);
+
+        const result = property.interpolate(constant(a), constant(b), 0.5);
+
+        expect(result.value).toEqual({kind: 'constant', value: ColorArray.interpolate(a, b, 0.5)});
+    });
+});

package/src/style/properties.ts

@@ -1,4 +1,4 @@
-import {clone, extend, easeCubicInOut} from '../util/util.ts';
+import {clone, extend, easeCubicInOut, warnOnce} from '../util/util.ts';
 import {interpolates, type Color, type StylePropertySpecification, normalizePropertyExpression,
     type Feature,
     type FeatureState,
@@ -471,6 +471,26 @@ export class PossiblyEvaluated<Props, PossibleEvaluatedProps> {
     }
 }
 
+/**
+ * Returns the length of the array value, or undefined if the value is not an array or a style spec array wrapper.
+ */
+function getArrayValueLength(value: unknown): number | undefined {
+    if (Array.isArray(value)) {
+        return value.length;
+    }
+    const values = (value as {values?: unknown})?.values;
+    return Array.isArray(values) ? values.length : undefined;
+}
+
+/**
+ * Returns true if the two values are arrays of different length, either bare arrays or style spec array wrappers.
+ */
+function isNonInterpolableArrayChange(a: unknown, b: unknown): boolean {
+    const lengthA = getArrayValueLength(a);
+    const lengthB = getArrayValueLength(b);
+    return lengthA !== undefined && lengthB !== undefined && lengthA !== lengthB;
+}
+
 /**
  * @internal
  * An implementation of `Property` for properties that do not permit data-driven (source or composite) expressions.
@@ -492,6 +512,10 @@ export class DataConstantProperty<T> implements Property<T, T> {
     }
 
     interpolate(a: T, b: T, t: number): T {
+        if (isNonInterpolableArrayChange(a, b)) {
+            warnOnce(`Property "${this.name}" is trying to interpolate arrays of different lengths. Rendering may 'jump'.`);
+            return b;
+        }
         const interpolationType = this.specification.type as keyof typeof interpolates;
         const interpolationFn = interpolates[interpolationType] as ((from: T, to: T, t: number) => T) | undefined;
         if (interpolationFn) {
@@ -553,6 +577,11 @@ export class DataDrivenProperty<T> implements Property<T, PossiblyEvaluatedPrope
             return new PossiblyEvaluatedPropertyValue(this, {kind: 'constant', value: undefined}, a.parameters);
         }
 
+        if (isNonInterpolableArrayChange(a.value.value, b.value.value)) {
+            warnOnce(`Property "${this.name}" is trying to interpolate arrays of different lengths. Rendering may 'jump'.`);
+            return b;
+        }
+
         const interpolationType = this.specification.type as keyof typeof interpolates;
         const interpolationFn = interpolates[interpolationType] as ((from: T, to: T, t: number) => T) | undefined;
         if (interpolationFn) {

package/src/style/sky.test.ts

@@ -7,7 +7,7 @@ import {type TransitionParameters} from './properties.ts';
 const spec = styleSpec.sky;
 
 test('Sky with defaults', () => {
-    const sky = new Sky({});
+    const sky = new Sky({}, {});
     sky.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
 
     expect(sky.properties.get('atmosphere-blend')).toEqual(spec['atmosphere-blend'].default);
@@ -16,7 +16,7 @@ test('Sky with defaults', () => {
 test('Sky with options', () => {
     const sky = new Sky({
         'atmosphere-blend': 0.4
-    });
+    }, {});
     sky.recalculate({zoom: 0, zoomHistory: {}} as EvaluationParameters);
 
     expect(sky.properties.get('atmosphere-blend')).toBe(0.4);
@@ -32,7 +32,7 @@ test('Sky with interpolate function', () => {
             5, 1,
             7, 0
         ]
-    });
+    }, {});
     sky.recalculate({zoom: 6, zoomHistory: {}} as EvaluationParameters);
 
     expect(sky.properties.get('atmosphere-blend')).toBe(0.5);
@@ -41,12 +41,12 @@ test('Sky with interpolate function', () => {
 test('Sky.getSky', () => {
     const defaults = {'atmosphere-blend': 0.8};
 
-    expect(new Sky(defaults).getSky()).toEqual(defaults);
+    expect(new Sky(defaults, {}).getSky()).toEqual(defaults);
 });
 
 describe('Sky.setSky', () => {
     test('sets Sky', () => {
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
         sky.setSky({'atmosphere-blend': 1});
         sky.updateTransitions({
             now: 0,
@@ -60,9 +60,9 @@ describe('Sky.setSky', () => {
     });
 
     test('validates by default', () => {
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
         const skySpy = vi.spyOn(sky, '_validate');
-        vi.spyOn(console, 'error').mockImplementation(() => { });
+        vi.spyOn(console, 'error').mockImplementation(() => {});
         sky.setSky({'atmosphere-blend': -1});
         sky.updateTransitions({transition: false} as any as TransitionParameters);
         sky.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
@@ -72,7 +72,7 @@ describe('Sky.setSky', () => {
     });
 
     test('respects validation option', () => {
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
 
         const skySpy = vi.spyOn(sky, '_validate');
         sky.setSky({'atmosphere-blend': -1}, {validate: false});
@@ -93,7 +93,7 @@ describe('Sky runtime error logging', () => {
     test('warns with the sky property location when an expression errors at runtime', () => {
         const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
 
-        const sky = new Sky({});
+        const sky = new Sky({}, {});
         // global-state defeats constant-folding, so this fails at evaluation time (not parse time).
         sky.setSky({'sky-color': ['to-color', ['global-state', 'missing']]} as any, {validate: false});
         sky.updateTransitions({transition: false} as any as TransitionParameters);

package/src/style/sky.ts

@@ -18,9 +18,9 @@ export class Sky extends Evented {
     _transitionable: Transitionable<SkyProps>;
     _transitioning: Transitioning<SkyProps>;
 
-    constructor(sky?: SkySpecification) {
+    constructor(sky: SkySpecification | undefined, globalState: Record<string, any>) {
         super();
-        this._transitionable = new Transitionable(getProperties(), 'sky', undefined);
+        this._transitionable = new Transitionable(getProperties(), 'sky', globalState);
         this.setSky(sky);
         this._transitioning = this._transitionable.untransitioned();
         this.recalculate(new EvaluationParameters(0));