@363045841yyt/klinechart-core 0.9.0-alpha.0 → 0.9.0-alpha.2

package/src/rendering/render/Renderer.ts

@@ -2,12 +2,9 @@
  * High-level renderer interface — the drawing primitives the chart's
  * scene layers (candles, volume, indicators, drawings) call into.
  *
- * Both the existing WebGL renderer (currently spread across
- * `src/core/renderers/{candle,subVolume,crosshair,...}.ts`) and the
- * P1 WebGPU renderer implement this contract. v0's WebGL path will
- * be refactored to fit behind it in a follow-up PR (this file ships
- * the contract first; the legacy code is unchanged until the next
- * step is approved).
+ * WebGL (`createWebGLRenderer`) implements this contract today; P1 WebGPU
+ * will implement the same surface. Call sites only use sceneRenderer
+ * (fail-closed boolean → Canvas2D), never dual-path surfaces.
  *
  * Design notes:
  * - `drawInstances` is the workhorse: render N copies of a unit geometry
@@ -22,10 +19,6 @@
  * - `setUniforms` is intentionally schemaless on the interface — the
  *   uniform layout is owned by each shader/program. Callers pass a
  *   structured object that the backend translates into uniform writes.
- *
- * This file is **pure interface** in this PR; behaviour comes in the
- * next two PRs (Scale interfaces, then a Renderer impl that wraps
- * the existing WebGL primitives).
  */
 
 import type { SurfaceBackend, SurfaceRegion } from './SurfaceBackend'
@@ -65,12 +58,24 @@ export type DrawInstancesParams = {
   uniforms?: Record<string, unknown>
 }
 
+export type DrawLineStrip = {
+  points: ReadonlyArray<{ x: number; y: number }>
+  color: string
+  width?: number
+}
+
 export type DrawLinesParams = {
   pipeline: PipelineHandle
-  vertices: BufferHandle
-  vertexCount: number
+  /**
+   * 单 strip 路径：vertices 为交错 x,y Float32。
+   * 若提供 strips，则忽略 vertices/vertexCount，一次 GPU 提交多条（避免 MSAA 逐条 clear）。
+   */
+  vertices?: BufferHandle
+  vertexCount?: number
   /** Line strip vs disconnected segments. */
   topology?: 'strip' | 'list'
+  /** 多色折线批量（推荐 MA 等多周期） */
+  strips?: ReadonlyArray<DrawLineStrip>
   uniforms?: Record<string, unknown>
 }
 
@@ -117,8 +122,16 @@ export interface Renderer {
   // --- frame ---
 
   beginFrame(region: SurfaceRegion): void
-  drawInstances(params: DrawInstancesParams): void
-  drawLines(params: DrawLinesParams): void
+  /**
+   * 返回 true 表示本批已成功提交 GPU（或 instanceCount<=0 无需绘制）。
+   * 返回 false 表示未画上（无 surface / pipeline 不匹配 / 资源缺失）——调用方应 fail-closed 走 2D。
+   */
+  drawInstances(params: DrawInstancesParams): boolean
+  /**
+   * 返回 true 表示本批折线/填充已成功提交 GPU。
+   * 返回 false 表示未画上——调用方应 fail-closed 走 2D。
+   */
+  drawLines(params: DrawLinesParams): boolean
   /** WebGPU only — WebGL implementations MUST throw. Caller checks caps first. */
   dispatchCompute(params: DispatchComputeParams): void
   endFrame(): void

package/src/rendering/render/SurfaceBackend.ts

@@ -2,22 +2,20 @@
  * Low-level GPU surface backend.
  *
  * Abstracts canvas + context lifecycle, viewport / scissor regions, clear,
- * compositing into a 2D canvas overlay, and teardown. Both the existing
- * WebGL surface (`src/core/renderers/webgl/sharedWebGLSurface.ts`) and the
- * P1 WebGPU surface implement this contract.
+ * compositing into a 2D canvas overlay, and teardown. WebGL
+ * (`createWebGLSurfaceBackend` over SharedWebGLSurface) implements this today;
+ * P1 WebGPU will implement the same contract.
  *
  * This file is **pure interface** — no implementation. It exists so that:
  *
- * 1. Existing WebGL code can declare conformance via a one-line adapter
- *    (see `createLegacyWebGLBackend` below) without changing any behaviour.
+ * 1. WebGL can adapt SharedWebGLSurface behind a stable contract.
  * 2. P1's WebGPU implementation has a fixed target to write against.
  * 3. The higher-level `Renderer` (`./Renderer.ts`) can compose a backend
  *    without knowing which GPU API it sits on.
  *
  * Design notes:
  * - All region coordinates are in **logical pixels** with the surface
- *   responsible for DPR scaling internally. This matches the existing
- *   `WebGLRegion` semantics so the legacy adapter is a transparent pass-through.
+ *   responsible for DPR scaling internally (same semantics as WebGLRegion).
  * - `compositeTo` takes a 2D `CanvasRenderingContext2D` because the chart's
  *   final composition target is a 2D overlay canvas — WebGL/WebGPU pixels
  *   are drawn into the overlay via `drawImage`. Future paths that bypass

package/src/rendering/render/__tests__/canvas2DRenderer.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from 'vitest'
+
+import { createCanvas2DRenderer } from '../createCanvas2DRenderer'
+
+describe('createCanvas2DRenderer', () => {
+  it('fails closed so business renderers use Canvas2D', () => {
+    const renderer = createCanvas2DRenderer()
+    const buffer = renderer.createBuffer('instance', 16)
+    const pipeline = renderer.createPipeline({ type: 'candle' })
+
+    expect(renderer.caps.name).toBe('canvas2d')
+    expect(renderer.surface.isAvailable()).toBe(false)
+    expect(
+      renderer.drawInstances({
+        pipeline,
+        vertices: buffer,
+        instances: buffer,
+        instanceCount: 1,
+        vertexCount: 6,
+      }),
+    ).toBe(false)
+    expect(renderer.drawLines({ pipeline, strips: [] })).toBe(false)
+  })
+
+  it('has an idempotent disposed lifecycle', () => {
+    const renderer = createCanvas2DRenderer()
+
+    renderer.dispose()
+    renderer.dispose()
+
+    expect(() => renderer.createBuffer('vertex', 8)).toThrow('Renderer is disposed')
+    expect(() => renderer.createComputePipeline({})).toThrow('compute not supported')
+  })
+})

package/src/rendering/render/__tests__/contract.test.ts

@@ -109,8 +109,8 @@ function makeMockRenderer(surface: SurfaceBackend, computeSupported: boolean): R
     },
     destroyComputePipeline: () => {},
     beginFrame: () => {},
-    drawInstances: () => {},
-    drawLines: () => {},
+    drawInstances: () => true,
+    drawLines: () => true,
     dispatchCompute: () => {
       if (!computeSupported) {
         throw new Error('dispatchCompute requires a backend with caps.compute === true')

package/src/rendering/render/__tests__/frameMetrics.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+
+import { createFrameMetrics, getFrameMetrics, resetFrameMetrics } from '../frameMetrics'
+
+describe('frameMetrics', () => {
+  it('counts submits uploads and buffer creates per frame', () => {
+    resetFrameMetrics()
+    const m = createFrameMetrics()
+    m.beginFrame()
+    m.recordBufferCreate()
+    m.recordUpload(64)
+    m.recordDraw()
+    m.recordSubmit()
+    m.recordComposite()
+    m.endFrame()
+    expect(getFrameMetrics()).toMatchObject({
+      bufferCreateCount: 1,
+      bufferUploadBytes: 64,
+      drawCallCount: 1,
+      queueSubmitCount: 1,
+      compositeCount: 1,
+    })
+  })
+})

package/src/rendering/render/__tests__/rendererHost.test.ts

@@ -0,0 +1,157 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import type { Renderer } from '../Renderer'
+import { createCanvas2DRenderer } from '../createCanvas2DRenderer'
+import { createRendererHost, type RendererBackend } from '../rendererHost'
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+function makeRenderer(backend: RendererBackend): Renderer {
+  const renderer = createCanvas2DRenderer()
+  return {
+    ...renderer,
+    caps: { ...renderer.caps, name: backend === 'webgl' ? 'webgl2' : backend },
+  }
+}
+
+describe('RendererHost', () => {
+  it('degrades WebGPU to WebGL without changing the requested preference', async () => {
+    const webgl = makeRenderer('webgl')
+    const onRuntimeChange = vi.fn()
+    const host = await createRendererHost('webgpu', {
+      createWebGPU: async () => {
+        throw new Error('adapter unavailable')
+      },
+      createWebGL: () => webgl,
+      createCanvas: createCanvas2DRenderer,
+      onRuntimeChange,
+    })
+
+    expect(host.renderer).toBe(webgl)
+    expect(host.runtime).toEqual({
+      effective: 'webgl',
+      status: 'degraded',
+      error: 'adapter unavailable',
+    })
+    expect(onRuntimeChange).toHaveBeenLastCalledWith(host.runtime)
+  })
+
+  it('degrades WebGL to Canvas when WebGL is unavailable', async () => {
+    const host = await createRendererHost('webgl', {
+      createWebGPU: () => makeRenderer('webgpu'),
+      createWebGL: () => {
+        throw new Error('WebGL2 unavailable')
+      },
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    expect(host.renderer.caps.name).toBe('canvas2d')
+    expect(host.runtime).toEqual({
+      effective: 'canvas',
+      status: 'degraded',
+      error: 'WebGL2 unavailable',
+    })
+  })
+
+  it('keeps the active renderer while a replacement is prepared', async () => {
+    const pending = deferred<Renderer>()
+    const webgl = makeRenderer('webgl')
+    const webgpu = makeRenderer('webgpu')
+    const host = await createRendererHost('webgl', {
+      createWebGPU: () => pending.promise,
+      createWebGL: () => webgl,
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    const switching = host.switchTo('webgpu')
+
+    expect(host.renderer).toBe(webgl)
+    expect(host.runtime.status).toBe('switching')
+
+    pending.resolve(webgpu)
+    await switching
+
+    expect(host.renderer).toBe(webgpu)
+    expect(host.runtime).toEqual({ effective: 'webgpu', status: 'ready', error: null })
+  })
+
+  it('preserves the surface size when switching renderers', async () => {
+    const webgl = makeRenderer('webgl')
+    const webgpu = makeRenderer('webgpu')
+    const resizeWebGL = vi.spyOn(webgl.surface, 'resize')
+    const resizeWebGPU = vi.spyOn(webgpu.surface, 'resize')
+    const host = await createRendererHost('webgl', {
+      createWebGPU: () => webgpu,
+      createWebGL: () => webgl,
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    host.resize(960, 540, 1.5)
+    await host.switchTo('webgpu')
+
+    expect(resizeWebGL).toHaveBeenCalledWith(960, 540, 1.5)
+    expect(resizeWebGPU).toHaveBeenCalledWith(960, 540, 1.5)
+  })
+
+  it('disposes a stale renderer created by an older switch', async () => {
+    const pending = deferred<Renderer>()
+    const stale = makeRenderer('webgpu')
+    const staleDispose = vi.spyOn(stale, 'dispose')
+    const host = await createRendererHost('canvas', {
+      createWebGPU: () => pending.promise,
+      createWebGL: () => makeRenderer('webgl'),
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    const oldSwitch = host.switchTo('webgpu')
+    await host.switchTo('canvas')
+    pending.resolve(stale)
+    await oldSwitch
+
+    expect(staleDispose).toHaveBeenCalledOnce()
+    expect(host.runtime.effective).toBe('canvas')
+  })
+
+  it('disposes a renderer that arrives after the host is disposed', async () => {
+    const pending = deferred<Renderer>()
+    const late = makeRenderer('webgpu')
+    const lateDispose = vi.spyOn(late, 'dispose')
+    const host = await createRendererHost('canvas', {
+      createWebGPU: () => pending.promise,
+      createWebGL: () => makeRenderer('webgl'),
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    const switching = host.switchTo('webgpu')
+    host.dispose()
+    pending.resolve(late)
+    await switching
+
+    expect(lateDispose).toHaveBeenCalledOnce()
+  })
+
+  it('degrades the active WebGPU renderer after device loss', async () => {
+    const webgpu = makeRenderer('webgpu')
+    const webgl = makeRenderer('webgl')
+    const host = await createRendererHost('webgpu', {
+      createWebGPU: () => webgpu,
+      createWebGL: () => webgl,
+      createCanvas: createCanvas2DRenderer,
+    })
+
+    await host.handleDeviceLost('device reset')
+
+    expect(host.renderer).toBe(webgl)
+    expect(host.runtime).toEqual({
+      effective: 'webgl',
+      status: 'degraded',
+      error: 'device reset',
+    })
+  })
+})

package/src/rendering/render/__tests__/webglRenderer.fallback.test.ts

@@ -54,50 +54,16 @@ function createMockSharedWebGLSurface() {
   }
 }
 
-function makeMockFallbackCtx() {
-  return {
-    beginPath: vi.fn(),
-    moveTo: vi.fn(),
-    lineTo: vi.fn(),
-    closePath: vi.fn(),
-    fill: vi.fn(),
-    stroke: vi.fn(),
-    fillStyle: '',
-    strokeStyle: '',
-    lineWidth: 1,
-    fillRect: vi.fn(),
-  }
-}
-
 beforeEach(() => {
   vi.clearAllMocks()
 })
 
-describe('Canvas2D fallback', () => {
-  it('setFallbackContext stores the context and dpr', () => {
-    const surface = createMockSurfaceBackend()
-    const glSurface = createMockSharedWebGLSurface()
-    const renderer = createWebGLRenderer(surface, glSurface as any)
-    const ctx = makeMockFallbackCtx()
-
-    expect(() => (renderer as any).setFallbackContext(ctx, 2)).not.toThrow()
-  })
-
-  it('setFallbackContext with null clears the fallback', () => {
-    const surface = createMockSurfaceBackend()
-    const glSurface = createMockSharedWebGLSurface()
-    const renderer = createWebGLRenderer(surface, glSurface as any)
-
-    expect(() => (renderer as any).setFallbackContext(null, 1)).not.toThrow()
-  })
-
+describe('fail-closed when GPU surfaces unavailable', () => {
   describe('drawLines — line type', () => {
-    it('draws a polyline on the fallback context when WebGL is unavailable', () => {
+    it('returns false when lineSurface unavailable', () => {
       const surface = createMockSurfaceBackend()
       const glSurface = createMockSharedWebGLSurface()
       const renderer = createWebGLRenderer(surface, glSurface as any)
-      const ctx = makeMockFallbackCtx()
-      ;(renderer as any).setFallbackContext(ctx, 1)
 
       renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
 
@@ -106,23 +72,17 @@ describe('Canvas2D fallback', () => {
       const verts = new Float32Array([10, 20, 30, 40, 50, 60])
       renderer.writeBuffer(vertexBuf, verts)
 
-      renderer.drawLines({
+      const ok = renderer.drawLines({
         pipeline,
         vertices: vertexBuf,
         vertexCount: 3,
         uniforms: { color: '#00ff00', scrollLeft: 5, lineWidth: 2 },
       })
 
-      expect(ctx.beginPath).toHaveBeenCalledTimes(1)
-      expect(ctx.moveTo).toHaveBeenCalledWith(5, 20)
-      expect(ctx.lineTo).toHaveBeenCalledWith(25, 40)
-      expect(ctx.lineTo).toHaveBeenCalledWith(45, 60)
-      expect(ctx.strokeStyle).toBe('#00ff00')
-      expect(ctx.lineWidth).toBe(2)
-      expect(ctx.stroke).toHaveBeenCalledTimes(1)
+      expect(ok).toBe(false)
     })
 
-    it('no-ops on drawLines with no fallback context', () => {
+    it('returns false on drawLines with no lineSurface', () => {
       const surface = createMockSurfaceBackend()
       const glSurface = createMockSharedWebGLSurface()
       const renderer = createWebGLRenderer(surface, glSurface as any)
@@ -132,19 +92,15 @@ describe('Canvas2D fallback', () => {
       const vertexBuf = renderer.createBuffer('vertex', 256)
       renderer.writeBuffer(vertexBuf, new Float32Array([0, 0, 100, 100]))
 
-      expect(() =>
-        renderer.drawLines({ pipeline, vertices: vertexBuf, vertexCount: 2 }),
-      ).not.toThrow()
+      expect(renderer.drawLines({ pipeline, vertices: vertexBuf, vertexCount: 2 })).toBe(false)
     })
   })
 
   describe('drawLines — fill type', () => {
-    it('draws a filled band on the fallback context', () => {
+    it('returns false when lineSurface unavailable', () => {
       const surface = createMockSurfaceBackend()
       const glSurface = createMockSharedWebGLSurface()
       const renderer = createWebGLRenderer(surface, glSurface as any)
-      const ctx = makeMockFallbackCtx()
-      ;(renderer as any).setFallbackContext(ctx, 1)
 
       renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
 
@@ -153,33 +109,22 @@ describe('Canvas2D fallback', () => {
       const verts = new Float32Array([0, 100, 0, 50, 100, 100, 100, 50, 200, 100, 200, 50])
       renderer.writeBuffer(vertexBuf, verts)
 
-      renderer.drawLines({
+      const ok = renderer.drawLines({
         pipeline,
         vertices: vertexBuf,
         vertexCount: 6,
         uniforms: { color: '#0000ff', scrollLeft: 5 },
       })
 
-      expect(ctx.beginPath).toHaveBeenCalledTimes(1)
-      expect(ctx.moveTo).toHaveBeenCalledWith(-5, 100)
-      expect(ctx.lineTo).toHaveBeenCalledWith(95, 100)
-      expect(ctx.lineTo).toHaveBeenCalledWith(195, 100)
-      expect(ctx.lineTo).toHaveBeenCalledWith(195, 50)
-      expect(ctx.lineTo).toHaveBeenCalledWith(95, 50)
-      expect(ctx.lineTo).toHaveBeenCalledWith(-5, 50)
-      expect(ctx.closePath).toHaveBeenCalledTimes(1)
-      expect(ctx.fillStyle).toBe('#0000ff')
-      expect(ctx.fill).toHaveBeenCalledTimes(1)
+      expect(ok).toBe(false)
     })
   })
 
   describe('drawInstances', () => {
-    it('draws rectangles on the fallback context', () => {
+    it('returns false when candleSurface unavailable', () => {
       const surface = createMockSurfaceBackend()
       const glSurface = createMockSharedWebGLSurface()
       const renderer = createWebGLRenderer(surface, glSurface as any)
-      const ctx = makeMockFallbackCtx()
-      ;(renderer as any).setFallbackContext(ctx, 1)
 
       renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
 
@@ -188,7 +133,7 @@ describe('Canvas2D fallback', () => {
       const rects = new Float32Array([10, 20, 30, 40, 60, 70, 20, 10])
       renderer.writeBuffer(instanceBuf, rects)
 
-      renderer.drawInstances({
+      const ok = renderer.drawInstances({
         pipeline,
         vertices: instanceBuf,
         instances: instanceBuf,
@@ -197,20 +142,15 @@ describe('Canvas2D fallback', () => {
         uniforms: { color: '#ff0000', scrollLeft: 5 },
       })
 
-      expect(ctx.fillRect).toHaveBeenCalledTimes(2)
-      expect(ctx.fillRect).toHaveBeenNthCalledWith(1, 5, 20, 30, 40)
-      expect(ctx.fillRect).toHaveBeenNthCalledWith(2, 55, 70, 20, 10)
-      expect(ctx.fillStyle).toBe('#ff0000')
+      expect(ok).toBe(false)
     })
   })
 
   describe('dispose behaviour', () => {
-    it('after dispose, fallback draw calls are no-ops', () => {
+    it('after dispose, draw calls are no-ops / false', () => {
       const surface = createMockSurfaceBackend()
       const glSurface = createMockSharedWebGLSurface()
       const renderer = createWebGLRenderer(surface, glSurface as any)
-      const ctx = makeMockFallbackCtx()
-      ;(renderer as any).setFallbackContext(ctx, 1)
 
       const pipeline = renderer.createPipeline({ type: 'line' })
       const vertexBuf = renderer.createBuffer('vertex', 256)
@@ -221,7 +161,7 @@ describe('Canvas2D fallback', () => {
       expect(() =>
         renderer.drawLines({ pipeline, vertices: vertexBuf, vertexCount: 2 }),
       ).not.toThrow()
-      expect(ctx.stroke).not.toHaveBeenCalled()
+      expect(renderer.drawLines({ pipeline, vertices: vertexBuf, vertexCount: 2 })).toBe(false)
     })
   })
 })

package/src/rendering/render/__tests__/webglRenderer.test.ts

@@ -198,7 +198,7 @@ describe('createWebGLRenderer', () => {
       renderer.writeBuffer(instanceBuf, rects)
 
       const vertices = renderer.createBuffer('vertex', 48)
-      renderer.drawInstances({
+      const ok = renderer.drawInstances({
         pipeline,
         vertices,
         instances: instanceBuf,
@@ -207,6 +207,7 @@ describe('createWebGLRenderer', () => {
         uniforms: { color: '#ff0000', scrollLeft: 0 },
       })
 
+      expect(ok).toBe(true)
       expect(mocks.mockDrawRectBuffer).toHaveBeenCalledTimes(1)
       const args = mocks.mockDrawRectBuffer.mock.calls[0]
       expect(args[0]).toBeInstanceOf(Float32Array)
@@ -215,37 +216,56 @@ describe('createWebGLRenderer', () => {
       expect(args[3]).toBe(0)
     })
 
-    it('no-ops when instanceCount is zero', () => {
+    it('returns true without GPU when instanceCount is zero', () => {
       const { renderer } = makeRenderer()
       renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
       const pipeline = renderer.createPipeline({ type: 'candle' })
       const buf = renderer.createBuffer('instance', 64)
       renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
-      renderer.drawInstances({
+      const ok = renderer.drawInstances({
         pipeline,
         vertices: buf,
         instances: buf,
         instanceCount: 0,
         vertexCount: 6,
       })
+      expect(ok).toBe(true)
       expect(mocks.mockDrawRectBuffer).not.toHaveBeenCalled()
     })
 
-    it('no-ops when pipeline type mismatch (line -> instances)', () => {
+    it('returns false when pipeline type mismatch (line -> instances)', () => {
       const { renderer } = makeRenderer()
       renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
       const pipeline = renderer.createPipeline({ type: 'line' })
       const buf = renderer.createBuffer('instance', 64)
       renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
-      renderer.drawInstances({
+      const ok = renderer.drawInstances({
         pipeline,
         vertices: buf,
         instances: buf,
         instanceCount: 1,
         vertexCount: 6,
       })
+      expect(ok).toBe(false)
       expect(mocks.mockDrawRectBuffer).not.toHaveBeenCalled()
     })
+
+    it('returns false when drawRectBuffer fails', () => {
+      mocks.mockDrawRectBuffer.mockReturnValueOnce(false)
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 100, height: 100, dpr: 1 })
+      const pipeline = renderer.createPipeline({ type: 'candle' })
+      const buf = renderer.createBuffer('instance', 64)
+      renderer.writeBuffer(buf, new Float32Array([0, 0, 50, 50]))
+      const ok = renderer.drawInstances({
+        pipeline,
+        vertices: buf,
+        instances: buf,
+        instanceCount: 1,
+        vertexCount: 6,
+      })
+      expect(ok).toBe(false)
+    })
   })
 
   describe('drawLines', () => {
@@ -258,7 +278,7 @@ describe('createWebGLRenderer', () => {
       const verts = new Float32Array([10, 20, 30, 40, 50, 60])
       renderer.writeBuffer(vertexBuf, verts)
 
-      renderer.drawLines({
+      const ok = renderer.drawLines({
         pipeline,
         vertices: vertexBuf,
         vertexCount: 3,
@@ -266,6 +286,7 @@ describe('createWebGLRenderer', () => {
         uniforms: { color: '#00ff00', scrollLeft: 10, lineWidth: 1 },
       })
 
+      expect(ok).toBe(true)
       expect(mocks.mockDrawLineStrips).toHaveBeenCalledTimes(1)
       const args = mocks.mockDrawLineStrips.mock.calls[0]
       expect(args[0]).toHaveLength(1)
@@ -275,6 +296,43 @@ describe('createWebGLRenderer', () => {
       expect(args[1]).toBe(10)
     })
 
+    it('batches multiple strips in one drawLineStrips call', () => {
+      const { renderer } = makeRenderer()
+      renderer.beginFrame({ x: 0, y: 0, width: 800, height: 600, dpr: 1 })
+      const pipeline = renderer.createPipeline({ type: 'line' })
+      const ok = renderer.drawLines({
+        pipeline,
+        strips: [
+          {
+            points: [
+              { x: 0, y: 0 },
+              { x: 1, y: 1 },
+            ],
+            color: '#f00',
+            width: 1,
+          },
+          {
+            points: [
+              { x: 0, y: 2 },
+              { x: 1, y: 3 },
+              { x: 2, y: 2 },
+            ],
+            color: '#0f0',
+            width: 2,
+          },
+        ],
+        uniforms: { scrollLeft: 5 },
+      })
+      expect(ok).toBe(true)
+      expect(mocks.mockDrawLineStrips).toHaveBeenCalledTimes(1)
+      const lines = mocks.mockDrawLineStrips.mock.calls[0]![0]
+      expect(lines).toHaveLength(2)
+      expect(lines[0].color).toBe('#f00')
+      expect(lines[1].color).toBe('#0f0')
+      expect(lines[1].width).toBe(2)
+      expect(mocks.mockDrawLineStrips.mock.calls[0]![1]).toBe(5)
+    })
+
     it('delegates to line surface drawFilledBand for fill pipeline', () => {
       const { renderer } = makeRenderer()
       renderer.beginFrame({ x: 0, y: 0, width: 800, height: 600, dpr: 2 })