maplibre-gl 3.4.0 → 3.4.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -44,7 +44,7 @@
     "@mapbox/mvt-fixtures": "^3.10.0",
     "@rollup/plugin-commonjs": "^25.0.5",
     "@rollup/plugin-json": "^6.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.2",
+    "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-replace": "^5.0.3",
     "@rollup/plugin-strip": "^3.0.3",
     "@rollup/plugin-terser": "^0.4.4",
@@ -62,12 +62,12 @@
     "@types/minimist": "^1.2.3",
     "@types/murmurhash-js": "^1.0.4",
     "@types/nise": "^1.4.2",
-    "@types/node": "^20.8.2",
+    "@types/node": "^20.8.3",
     "@types/offscreencanvas": "^2019.7.1",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.2",
     "@types/react": "^18.2.25",
-    "@types/react-dom": "^18.2.10",
+    "@types/react-dom": "^18.2.11",
     "@types/request": "^2.48.9",
     "@types/shuffle-seed": "^1.1.0",
     "@types/window-or-global": "^1.0.4",
@@ -79,10 +79,10 @@
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1205644",
+    "devtools-protocol": "^0.0.1206220",
     "diff": "^5.1.0",
     "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.28.1",
@@ -111,10 +111,10 @@
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
     "pretty-bytes": "^6.1.1",
-    "puppeteer": "^21.3.6",
+    "puppeteer": "^21.3.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.29.4",
+    "rollup": "^4.0.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
     "semver": "^7.5.4",
@@ -126,7 +126,7 @@
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.1",
+    "typedoc": "^0.25.2",
     "typedoc-plugin-markdown": "^3.16.0",
     "typedoc-plugin-missing-exports": "^2.1.0",
     "typescript": "^5.2.2"

package/src/render/glyph_manager.test.ts

@@ -95,13 +95,13 @@ describe('GlyphManager', () => {
         manager.getGlyphs({'Arial Unicode MS': [0x3005]}, (err, glyphs) => {
             expect(err).toBeFalsy();
             expect(glyphs['Arial Unicode MS'][0x3005]).not.toBeNull();
-            //Request char from Katakana range (te)
+            //Request char from Katakana range (te テ)
             manager.getGlyphs({'Arial Unicode MS': [0x30C6]}, (err, glyphs) => {
                 expect(err).toBeFalsy();
                 const glyph = glyphs['Arial Unicode MS'][0x30c6];
                 //Ensure that te is locally generated.
-                expect(glyph.bitmap.height).toBe(6);
-                expect(glyph.bitmap.width).toBe(6);
+                expect(glyph.bitmap.height).toBe(12);
+                expect(glyph.bitmap.width).toBe(12);
                 done();
             });
         });
@@ -110,9 +110,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates CJK PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
+        // character 平
         manager.getGlyphs({'Arial Unicode MS': [0x5e73]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x5e73].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -120,10 +121,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates Katakana PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
-        // Katakana letter te
+        // Katakana letter te テ
         manager.getGlyphs({'Arial Unicode MS': [0x30c6]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x30c6].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -131,10 +132,10 @@ describe('GlyphManager', () => {
     test('GlyphManager generates Hiragana PBF locally', done => {
         const manager = createGlyphManager('sans-serif');
 
-        //Hiragana letter te
+        //Hiragana letter te て
         manager.getGlyphs({'Arial Unicode MS': [0x3066]}, (err, glyphs) => {
             expect(err).toBeFalsy();
-            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(1);
+            expect(glyphs['Arial Unicode MS'][0x3066].metrics.advance).toBe(0.5);
             done();
         });
     });
@@ -143,7 +144,7 @@ describe('GlyphManager', () => {
 
         const manager = createGlyphManager('sans-serif');
         const drawSpy = GlyphManager.TinySDF.prototype.draw = jest.fn().mockImplementation(() => {
-            return {data: new Uint8ClampedArray(900)} as any;
+            return {data: new Uint8ClampedArray(60 * 60)} as any;
         });
 
         // Katakana letter te

package/src/render/glyph_manager.ts

@@ -180,6 +180,10 @@ export class GlyphManager {
             return;
         }
 
+        // Client-generated glyphs are rendered at 2x texture scale,
+        // because CJK glyphs are more detailed than others.
+        const textureScale = 2;
+
         let tinySDF = entry.tinySDF;
         if (!tinySDF) {
             let fontWeight = '400';
@@ -191,9 +195,9 @@ export class GlyphManager {
                 fontWeight = '200';
             }
             tinySDF = entry.tinySDF = new GlyphManager.TinySDF({
-                fontSize: 24,
-                buffer: 3,
-                radius: 8,
+                fontSize: 24 * textureScale,
+                buffer: 3 * textureScale,
+                radius: 8 * textureScale,
                 cutoff: 0.25,
                 fontFamily,
                 fontWeight
@@ -215,17 +219,20 @@ export class GlyphManager {
          * To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
          * factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
          */
-        const topAdjustment = 27;
+        const topAdjustment = 27.5;
+
+        const leftAdjustment = 0.5;
 
         return {
             id,
-            bitmap: new AlphaImage({width: char.width || 30, height: char.height || 30}, char.data),
+            bitmap: new AlphaImage({width: char.width || 30 * textureScale, height: char.height || 30 * textureScale}, char.data),
             metrics: {
-                width: char.glyphWidth || 24,
-                height: char.glyphHeight || 24,
-                left: char.glyphLeft || 0,
-                top: char.glyphTop - topAdjustment || -8,
-                advance: char.glyphAdvance || 24
+                width: char.glyphWidth / textureScale || 24,
+                height: char.glyphHeight / textureScale || 24,
+                left: (char.glyphLeft / textureScale + leftAdjustment) || 0,
+                top: char.glyphTop / textureScale - topAdjustment || -8,
+                advance: char.glyphAdvance / textureScale || 24,
+                isDoubleResolution: true
             }
         };
     }

package/src/source/raster_dem_tile_source.ts

@@ -1,6 +1,6 @@
 import {ImageRequest} from '../util/image_request';
 import {ResourceType} from '../util/request_manager';
-import {extend, isImageBitmap} from '../util/util';
+import {extend, isImageBitmap, readImageUsingVideoFrame} from '../util/util';
 import {Evented} from '../util/evented';
 import {browser} from '../util/browser';
 import {offscreenCanvasSupported} from '../util/offscreen_canvas_supported';
@@ -16,6 +16,8 @@ import type {Tile} from './tile';
 import type {Callback} from '../types/callback';
 import type {RasterDEMSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {ExpiryData} from '../util/ajax';
+import {isOffscreenCanvasDistorted} from '../util/offscreen_canvas_distorted';
+import {RGBAImage} from '../util/image';
 
 /**
  * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
@@ -54,10 +56,9 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
 
     loadTile(tile: Tile, callback: Callback<void>) {
         const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
-        tile.request = ImageRequest.getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this), this.map._refreshExpiredTiles);
-
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        function imageLoaded(err: Error, img: (HTMLImageElement | ImageBitmap) & ExpiryData) {
+        tile.request = ImageRequest.getImage(request, async (err: Error, img: (HTMLImageElement | ImageBitmap), expiry: ExpiryData) => {
             delete tile.request;
             if (tile.aborted) {
                 tile.state = 'unloaded';
@@ -66,11 +67,9 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
                 tile.state = 'errored';
                 callback(err);
             } else if (img) {
-                if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
-                delete img.cacheControl;
-                delete img.expires;
+                if (this.map._refreshExpiredTiles) tile.setExpiryData(expiry);
                 const transfer = isImageBitmap(img) && offscreenCanvasSupported();
-                const rawImageData = transfer ? img : browser.getImageData(img, 1);
+                const rawImageData = transfer ? img : await readImageNow(img);
                 const params = {
                     uid: tile.uid,
                     coord: tile.tileID,
@@ -85,9 +84,22 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
 
                 if (!tile.actor || tile.state === 'expired') {
                     tile.actor = this.dispatcher.getActor();
-                    tile.actor.send('loadDEMTile', params, done.bind(this));
+                    tile.actor.send('loadDEMTile', params, done);
+                }
+            }
+        }, this.map._refreshExpiredTiles);
+
+        async function readImageNow(img: ImageBitmap | HTMLImageElement): Promise<RGBAImage | ImageData> {
+            if (typeof VideoFrame !== 'undefined' && isOffscreenCanvasDistorted()) {
+                const width = img.width + 2;
+                const height = img.height + 2;
+                try {
+                    return new RGBAImage({width, height}, await readImageUsingVideoFrame(img, -1, -1, width, height));
+                } catch (e) {
+                    // fall-back to browser canvas decoding
                 }
             }
+            return browser.getImageData(img, 1);
         }
 
         function done(err, data) {

package/src/source/raster_dem_tile_worker_source.ts

@@ -6,46 +6,29 @@ import type {
     WorkerDEMTileCallback,
     TileParameters
 } from './worker_source';
-import {isImageBitmap} from '../util/util';
+import {getImageData, isImageBitmap} from '../util/util';
 
 export class RasterDEMTileWorkerSource {
     actor: Actor;
     loaded: {[_: string]: DEMData};
-    offscreenCanvas: OffscreenCanvas;
-    offscreenCanvasContext: OffscreenCanvasRenderingContext2D;
 
     constructor() {
         this.loaded = {};
     }
 
-    loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
+    async loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
         const {uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift} = params;
-        // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
-        const imagePixels = isImageBitmap(rawImageData) ? this.getImageData(rawImageData) : rawImageData as RGBAImage;
+        const width = rawImageData.width + 2;
+        const height = rawImageData.height + 2;
+        const imagePixels: RGBAImage = isImageBitmap(rawImageData) ?
+            new RGBAImage({width, height}, await getImageData(rawImageData, -1, -1, width, height)) :
+            rawImageData;
         const dem = new DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
         callback(null, dem);
     }
 
-    getImageData(imgBitmap: ImageBitmap): RGBAImage {
-        // Lazily initialize OffscreenCanvas
-        if (!this.offscreenCanvas || !this.offscreenCanvasContext) {
-            // Dem tiles are typically 256x256
-            this.offscreenCanvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
-            this.offscreenCanvasContext = this.offscreenCanvas.getContext('2d', {willReadFrequently: true});
-        }
-
-        this.offscreenCanvas.width = imgBitmap.width;
-        this.offscreenCanvas.height = imgBitmap.height;
-
-        this.offscreenCanvasContext.drawImage(imgBitmap, 0, 0, imgBitmap.width, imgBitmap.height);
-        // Insert an additional 1px padding around the image to allow backfilling for neighboring data.
-        const imgData = this.offscreenCanvasContext.getImageData(-1, -1, imgBitmap.width + 2, imgBitmap.height + 2);
-        this.offscreenCanvasContext.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
-        return new RGBAImage({width: imgData.width, height: imgData.height}, imgData.data);
-    }
-
     removeTile(params: TileParameters) {
         const loaded = this.loaded,
             uid = params.uid;

package/src/style/style.ts

@@ -725,6 +725,9 @@ export class Style extends Evented {
 
         this.stylesheet = nextState;
 
+        // reset serialization field, to be populated only when needed
+        this._serializedLayers = null;
+
         return true;
     }
 

package/src/style/style_glyph.ts

@@ -1,14 +1,15 @@
 import type {AlphaImage} from '../util/image';
 
-/**
- * The glyph's metrices
- */
 export type GlyphMetrics = {
     width: number;
     height: number;
     left: number;
     top: number;
     advance: number;
+    /**
+     * isDoubleResolution = true for 48px textures
+     */
+    isDoubleResolution?: boolean;
 };
 
 /**

package/src/symbol/quads.ts

@@ -274,10 +274,12 @@ export function getGlyphQuads(
                 builtInOffset = [0, 0];
             }
 
+            const textureScale = positionedGlyph.metrics.isDoubleResolution ? 2 : 1;
+
             const x1 = (positionedGlyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
             const y1 = (-positionedGlyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
-            const x2 = x1 + textureRect.w * positionedGlyph.scale / pixelRatio;
-            const y2 = y1 + textureRect.h * positionedGlyph.scale / pixelRatio;
+            const x2 = x1 + textureRect.w / textureScale * positionedGlyph.scale / pixelRatio;
+            const y2 = y1 + textureRect.h / textureScale * positionedGlyph.scale / pixelRatio;
 
             const tl = new Point(x1, y1);
             const tr = new Point(x2, y1);

package/src/ui/map.test.ts

@@ -288,6 +288,23 @@ describe('Map', () => {
 
         });
 
+        test('setStyle back to the first style should work', done => {
+            const redStyle = {version: 8 as const, sources: {}, layers: [
+                {id: 'background', type: 'background' as const, paint: {'background-color': 'red'}},
+            ]};
+            const blueStyle = {version: 8 as const, sources: {}, layers: [
+                {id: 'background', type: 'background' as const, paint: {'background-color': 'blue'}},
+            ]};
+            const map = createMap({style: redStyle});
+            map.setStyle(blueStyle);
+            map.once('style.load', () => {
+                map.setStyle(redStyle);
+                const serializedStyle =  map.style.serialize();
+                expect(serializedStyle.layers[0].paint['background-color']).toBe('red');
+                done();
+            });
+        });
+
         test('style transform overrides unmodified map transform', done => {
             const map = new Map({container: window.document.createElement('div')} as any as MapOptions);
             map.transform.lngRange = [-120, 140];

package/src/util/offscreen_canvas_distorted.test.ts

@@ -0,0 +1,13 @@
+import {isOffscreenCanvasDistorted} from './offscreen_canvas_distorted';
+import {Canvas} from 'canvas';
+import {offscreenCanvasSupported} from './offscreen_canvas_supported';
+
+test('normal operation does not mangle canvas', () => {
+    const OffscreenCanvas = (window as any).OffscreenCanvas = jest.fn((width:number, height: number) => {
+        return new Canvas(width, height);
+    });
+    expect(offscreenCanvasSupported()).toBeTruthy();
+    OffscreenCanvas.mockClear();
+    expect(isOffscreenCanvasDistorted()).toBeFalsy();
+    expect(OffscreenCanvas).toHaveBeenCalledTimes(1);
+});

package/src/util/offscreen_canvas_distorted.ts

@@ -0,0 +1,39 @@
+import {offscreenCanvasSupported} from './offscreen_canvas_supported';
+
+let offscreenCanvasDistorted: boolean;
+
+/**
+ * Some browsers don't return the exact pixels from a canvas to prevent user fingerprinting (see #3185).
+ * This function writes pixels to an OffscreenCanvas and reads them back using getImageData, returning false
+ * if they don't match.
+ *
+ * @returns true if the browser supports OffscreenCanvas but it distorts getImageData results, false otherwise.
+ */
+export function isOffscreenCanvasDistorted(): boolean {
+    if (offscreenCanvasDistorted == null) {
+        offscreenCanvasDistorted = false;
+        if (offscreenCanvasSupported()) {
+            const size = 5;
+            const canvas = new OffscreenCanvas(size, size);
+            const context = canvas.getContext('2d', {willReadFrequently: true});
+            if (context) {
+                // fill each pixel with an RGB value that should make the byte at index i equal to i (except alpha channel):
+                // [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 10, 255, ...]
+                for (let i = 0; i < size * size; i++) {
+                    const base = i * 4;
+                    context.fillStyle = `rgb(${base},${base + 1},${base + 2})`;
+                    context.fillRect(i % size, Math.floor(i / size), 1, 1);
+                }
+                const data = context.getImageData(0, 0, size, size).data;
+                for (let i = 0; i < size * size * 4; i++) {
+                    if (i % 4 !== 3 && data[i] !== i) {
+                        offscreenCanvasDistorted = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+
+    return offscreenCanvasDistorted || false;
+}

package/src/util/util.test.ts

@@ -1,5 +1,6 @@
 import Point from '@mapbox/point-geometry';
-import {arraysIntersect, asyncAll, bezier, clamp, clone, deepEqual, easeCubicInOut, extend, filterObject, findLineIntersection, isClosedPolygon, isCounterClockwise, isPowerOfTwo, keysDifference, mapObject, nextPowerOfTwo, parseCacheControl, pick, uniqueId, wrap} from './util';
+import {arraysIntersect, asyncAll, bezier, clamp, clone, deepEqual, easeCubicInOut, extend, filterObject, findLineIntersection, isClosedPolygon, isCounterClockwise, isPowerOfTwo, keysDifference, mapObject, nextPowerOfTwo, parseCacheControl, pick, readImageDataUsingOffscreenCanvas, readImageUsingVideoFrame, uniqueId, wrap} from './util';
+import {Canvas} from 'canvas';
 
 describe('util', () => {
     expect(easeCubicInOut(0)).toBe(0);
@@ -346,3 +347,172 @@ describe('util findLineIntersection', () => {
         expect(intersection).toBeNull();
     });
 });
+
+describe('util readImageUsingVideoFrame', () => {
+    let format = 'RGBA';
+    const frame = {
+        get format() {
+            return format;
+        },
+        copyTo: jest.fn(buf => {
+            buf.set(new Uint8Array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]).subarray(0, buf.length));
+            return Promise.resolve();
+        }),
+        close: jest.fn(),
+    };
+    (window as any).VideoFrame = jest.fn(() => frame);
+    const canvas = document.createElement('canvas');
+    canvas.width = canvas.height = 2;
+
+    beforeEach(() => {
+        format = 'RGBA';
+        frame.copyTo.mockClear();
+        frame.close.mockReset();
+    });
+
+    test('copy RGB', async () => {
+        format = 'RGBA';
+        const result = await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+        expect(result).toHaveLength(4 * 4);
+        expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+            layout: [{offset: 0, stride: 8}],
+            rect: {x: 0, y: 0, width: 2, height: 2}
+        });
+        expect(result).toEqual(new Uint8ClampedArray([
+            1, 2, 3, 4, 5, 6, 7, 8,
+            9, 10, 11, 12, 13, 14, 15, 16
+        ]));
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('flip BRG', async () => {
+        format = 'BGRX';
+        const result = await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+        expect(result).toEqual(new Uint8ClampedArray([
+            3, 2, 1, 4, 7, 6, 5, 8,
+            11, 10, 9, 12, 15, 14, 13, 16
+        ]));
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    test('ignore bad format', async () => {
+        format = 'OTHER';
+        await expect(readImageUsingVideoFrame(canvas, 0, 0, 2, 2)).rejects.toThrow();
+        expect(frame.close).toHaveBeenCalledTimes(1);
+    });
+
+    describe('layout/rect', () => {
+        beforeEach(() => {
+            (window as any).VideoFrame = jest.fn(() => frame);
+            canvas.width = canvas.height = 3;
+        });
+
+        test('full rectangle', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 0, 3, 3);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 12}],
+                rect: {x: 0, y: 0, width: 3, height: 3}
+            });
+        });
+
+        test('top left', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 0, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 0, y: 0, width: 2, height: 2}
+            });
+        });
+
+        test('top right', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 0, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 1, y: 0, width: 2, height: 2}
+            });
+        });
+
+        test('bottom left', async () => {
+            await readImageUsingVideoFrame(canvas, 0, 1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 0, y: 1, width: 2, height: 2}
+            });
+        });
+
+        test('bottom right', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 8}],
+                rect: {x: 1, y: 1, width: 2, height: 2}
+            });
+        });
+
+        test('middle', async () => {
+            await readImageUsingVideoFrame(canvas, 1, 1, 1, 1);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 4}],
+                rect: {x: 1, y: 1, width: 1, height: 1}
+            });
+        });
+
+        test('extend past on all sides', async () => {
+            await readImageUsingVideoFrame(canvas, -1, -1, 5, 5);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 5 + 4, stride: 4 * 5}],
+                rect: {x: 0, y: 0, width: 3, height: 3}
+            });
+        });
+
+        test('overhang top left', async () => {
+            await readImageUsingVideoFrame(canvas, -1, -1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 2 + 4, stride: 4 * 2}],
+                rect: {x: 0, y: 0, width: 1, height: 1}
+            });
+        });
+
+        test('overhang top right', async () => {
+            await readImageUsingVideoFrame(canvas, 2, -1, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4 * 2, stride: 4 * 2}],
+                rect: {x: 2, y: 0, width: 1, height: 1}
+            });
+        });
+
+        test('overhang bottom left', async () => {
+            await readImageUsingVideoFrame(canvas, -1, 2, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 4, stride: 4 * 2}],
+                rect: {x: 0, y: 2, width: 1, height: 1}
+            });
+        });
+
+        test('overhang bottom right', async () => {
+            await readImageUsingVideoFrame(canvas, 2, 2, 2, 2);
+            expect(frame.copyTo).toHaveBeenCalledWith(expect.anything(), {
+                layout: [{offset: 0, stride: 4 * 2}],
+                rect: {x: 2, y: 2, width: 1, height: 1}
+            });
+        });
+    });
+});
+
+describe('util readImageDataUsingOffscreenCanvas', () => {
+    test('reads pixels from image', async () => {
+        (window as any).OffscreenCanvas = Canvas;
+        const image = new Canvas(2, 2);
+        const context = image.getContext('2d');
+        context.fillStyle = 'rgb(10,0,0)';
+        context.fillRect(0, 0, 1, 1);
+        context.fillStyle = 'rgb(0,20,0)';
+        context.fillRect(1, 0, 1, 1);
+        context.fillStyle = 'rgb(0,0,30)';
+        context.fillRect(0, 1, 1, 1);
+        context.fillStyle = 'rgb(40,40,40)';
+        context.fillRect(1, 1, 1, 1);
+        expect([...await readImageDataUsingOffscreenCanvas(image as any, 0, 0, 2, 2)]).toEqual([
+            10, 0, 0, 255, 0, 20, 0, 255,
+            0, 0, 30, 255, 40, 40, 40, 255,
+        ]);
+    });
+});