@aiquants/virtualscroll 1.20.0 → 1.22.1

package/src/ScrollBar.spec.tsx

@@ -1,620 +0,0 @@
-/**
- * Regression tests for ScrollBar pointer/drag robustness fixes.
- *
- * ScrollBar のポインタ/ドラッグ堅牢化修正に関する回帰テスト。
- * - サムドラッグの pointer capture 取得とアンマウント時 document リスナ解除
- * - pointer capture 取得失敗時のフォールバックと pointerup 時のキャプチャ解放
- * - pointerId による別ポインターイベントの弁別
- * - 矢印リピートタイマーの blur/無効化時解除
- * - transform scale 下でのドラッグ量補正 (transform なしでの厳密 scale=1 を含む)
- * - 量子化する親での矢印ボタン/キーボードの残差前進
- * - scrollPosition 範囲外時のサム位置クランプ
- * - タップ自動スクロールの方向転換時の残差リセットと量子化親での境界到達判定
- * - トラックドラッグの終了経路 (hasPointerCapture ガード / lostpointercapture / stale ドラッグ破棄)
- * - 矢印長押し中の viewportSize 変更へのステップ量追従
- */
-import { act, fireEvent, render } from "@testing-library/react"
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
-import { ScrollBar } from "./ScrollBar.tsx"
-
-const CONTENT_SIZE = 1000
-const VIEWPORT_SIZE = 200
-const SCROLL_BAR_WIDTH = 12
-// 上記パラメータから導かれる派生値: trackLength=176, thumbSize=35.2, effectiveTrackLength=140.8, maxScroll=800
-const EFFECTIVE_TRACK_LENGTH = 140.8
-const MAX_SCROLL = CONTENT_SIZE - VIEWPORT_SIZE
-
-const getThumbWrapper = (container: HTMLElement) => container.querySelector(".aqvs-scrollbar-thumb-wrapper") as HTMLElement
-const getArrowButton = (container: HTMLElement, label: string) => container.querySelector(`[aria-label="${label}"]`) as HTMLButtonElement
-
-/**
- * Dispatches a native pointer-typed MouseEvent so that clientX/clientY are delivered
- * (fireEvent's synthetic pointer events do not carry coordinates in jsdom).
- *
- * clientX/clientY を伴うネイティブ pointer イベントを発火する (jsdom では fireEvent の
- * pointer イベントが座標を運ばないため)。jsdom の MouseEvent は pointerId を持たないため、
- * ポインター弁別を実際に判定できるよう pointerId (既定 1) を明示的に付与する。
- * buttons / pointerType は必要なテストのみ明示指定する (省略時は buttons=0, pointerType なし)。
- */
-const dispatchPointer = (target: EventTarget, type: string, init: { clientX?: number; clientY?: number; pointerId?: number; buttons?: number; pointerType?: string } = {}) => {
-    act(() => {
-        const event = new MouseEvent(type, { bubbles: true, cancelable: true, clientX: init.clientX ?? 0, clientY: init.clientY ?? 0, buttons: init.buttons ?? 0 })
-        // ドラッグ状態の pointerId 照合が undefined 同士の常時一致にならないよう必ず数値を持たせる。
-        Object.defineProperty(event, "pointerId", { configurable: true, value: init.pointerId ?? 1 })
-        if (init.pointerType !== undefined) {
-            Object.defineProperty(event, "pointerType", { configurable: true, value: init.pointerType })
-        }
-        target.dispatchEvent(event)
-    })
-}
-
-/**
- * Creates an onScroll mock that quantizes positions to a fixed quantum (row-snap parent).
- *
- * 位置を一定量子 (行スナップ) に丸めて返す onScroll モックを生成。
- */
-const createQuantizingOnScroll = (quantum: number) => {
-    const state = { position: 0 }
-    const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>((next, prev) => {
-        // 親が候補位置を行境界へ floor スナップして返す挙動を再現する。
-        const candidate = typeof next === "function" ? next(prev ?? state.position) : next
-        state.position = Math.floor(candidate / quantum) * quantum
-        return state.position
-    })
-    return { state, onScroll }
-}
-
-describe("ScrollBar サム位置クランプ (レンダー時)", () => {
-    it("scrollPosition が最大値を超えてもサムはトラック内に収まる", () => {
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={MAX_SCROLL * 10} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={() => undefined} />)
-        const top = Number.parseFloat(getThumbWrapper(container).style.top)
-        expect(top).toBeCloseTo(EFFECTIVE_TRACK_LENGTH, 1)
-        expect(top).toBeLessThanOrEqual(EFFECTIVE_TRACK_LENGTH + 0.01)
-    })
-
-    it("負の scrollPosition でもサムはトラック先頭 (0) に留まる", () => {
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={-500} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={() => undefined} />)
-        const top = Number.parseFloat(getThumbWrapper(container).style.top)
-        expect(top).toBe(0)
-    })
-})
-
-describe("ScrollBar サムドラッグ pointer capture / リーク", () => {
-    it("サム押下でポインターキャプチャを取得する", () => {
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={() => undefined} />)
-        const thumb = getThumbWrapper(container)
-        const setPointerCapture = vi.fn()
-        // jsdom は setPointerCapture を実装しないため、要素インスタンスに mock を差し込む。
-        Object.defineProperty(thumb, "setPointerCapture", { configurable: true, value: setPointerCapture })
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0 })
-
-        expect(setPointerCapture).toHaveBeenCalledTimes(1)
-    })
-
-    it("ドラッグ中にアンマウントしても document リスナが残らず onScroll を呼び続けない", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container, unmount } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const thumb = getThumbWrapper(container)
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0 })
-        dispatchPointer(document, "pointermove", { clientY: 40 })
-        const callsWhileMounted = onScroll.mock.calls.length
-        expect(callsWhileMounted).toBeGreaterThan(0)
-
-        unmount()
-
-        dispatchPointer(document, "pointermove", { clientY: 80 })
-        expect(onScroll.mock.calls.length).toBe(callsWhileMounted)
-    })
-})
-
-describe("ScrollBar transform scale 下のドラッグ量補正", () => {
-    /**
-     * scale=0.5 で視覚移動 D を与えた結果が、scale=1 で視覚移動 2D を与えた結果と一致することを確認。
-     * (視覚pxをレイアウトpxへ復元できていれば両者は同じスクロール位置になる。)
-     */
-    it("scale=0.5 での移動 D が scale=1 での移動 2D と同じスクロール位置になる", () => {
-        const capturedFirstArg = (fn: ReturnType<typeof vi.fn>): number => {
-            const lastCall = fn.mock.calls.at(-1)
-            return lastCall?.[0] as number
-        }
-
-        // --- scale = 0.5 ---
-        const onScrollA = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container: containerA, unmount: unmountA } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScrollA} />)
-        const thumbA = getThumbWrapper(containerA)
-        Object.defineProperty(thumbA, "getBoundingClientRect", { configurable: true, value: () => ({ height: 50, width: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0, toJSON: () => ({}) }) })
-        // レイアウト高さ 100px (視覚 50px -> scale=0.5)。getComputedStyle 経路 (inline style) と offset 経路の両方を揃える。
-        thumbA.style.height = "100px"
-        Object.defineProperty(thumbA, "offsetHeight", { configurable: true, value: 100 })
-        dispatchPointer(thumbA, "pointerdown", { clientY: 0 })
-        dispatchPointer(document, "pointermove", { clientY: 10 })
-        const resultScaled = capturedFirstArg(onScrollA)
-        unmountA()
-
-        // --- scale = 1 (jsdom 既定: rect/offset が 0 -> scale=1) ---
-        const onScrollB = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container: containerB } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScrollB} />)
-        const thumbB = getThumbWrapper(containerB)
-        dispatchPointer(thumbB, "pointerdown", { clientY: 0 })
-        dispatchPointer(document, "pointermove", { clientY: 20 })
-        const resultUnscaled = capturedFirstArg(onScrollB)
-
-        expect(resultScaled).toBeGreaterThan(0)
-        expect(resultScaled).toBeCloseTo(resultUnscaled, 3)
-        // scale を無視していれば視覚移動 10 は約 56.8 になるはず。補正により約 113.6 になることを確認。
-        expect(resultScaled).toBeCloseTo((20 / EFFECTIVE_TRACK_LENGTH) * MAX_SCROLL, 1)
-    })
-
-    /**
-     * transform なし環境の再現: 小数 thumbSize (35.2px) に対し offsetHeight は整数丸め (35) を返す。
-     * 整数丸めの offsetHeight を分母にすると scale=35.2/35 と誤算出されドラッグ量が系統的に縮む。
-     * getComputedStyle の小数精度レイアウト値を分母にすれば scale は厳密 1 になる。
-     */
-    it("transform なし (rect=inline style の小数 thumbSize) では scale が厳密 1 でドラッグが 1:1 になる", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const thumb = getThumbWrapper(container)
-        // 実ブラウザ相当: rect は小数 (transform なしなので inline style の 35.2 と一致)、offsetHeight は整数丸め。
-        Object.defineProperty(thumb, "getBoundingClientRect", { configurable: true, value: () => ({ height: 35.2, width: 0, top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0, toJSON: () => ({}) }) })
-        Object.defineProperty(thumb, "offsetHeight", { configurable: true, value: 35 })
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0 })
-        dispatchPointer(document, "pointermove", { clientY: 10 })
-
-        const lastCall = onScroll.mock.calls.at(-1)
-        const result = lastCall?.[0] as number
-        // 視覚移動 10px がそのままレイアウト 10px として扱われること (scale=1 厳密)。
-        // 整数丸め分母 (35) だと 10/(35.2/35)=9.943 -> 約 56.49 となり precision 6 では一致しない。
-        expect(result).toBeCloseTo((10 / EFFECTIVE_TRACK_LENGTH) * MAX_SCROLL, 6)
-    })
-})
-
-describe("ScrollBar 矢印リピートの blur / 無効化時解除", () => {
-    beforeEach(() => {
-        vi.useFakeTimers()
-    })
-
-    afterEach(() => {
-        vi.useRealTimers()
-    })
-
-    it("長押し中に window blur するとリピートが停止する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-
-        act(() => {
-            fireEvent.pointerDown(downButton)
-            vi.advanceTimersByTime(250 + 180)
-        })
-        const callsBeforeBlur = onScroll.mock.calls.length
-        expect(callsBeforeBlur).toBeGreaterThan(1)
-
-        act(() => {
-            window.dispatchEvent(new Event("blur"))
-        })
-        act(() => {
-            vi.advanceTimersByTime(500)
-        })
-
-        expect(onScroll.mock.calls.length).toBe(callsBeforeBlur)
-    })
-
-    it("長押し中に矢印ボタンが無効化 (canUseArrowButtons=false) されるとリピートが停止する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container, rerender } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-
-        act(() => {
-            fireEvent.pointerDown(downButton)
-            vi.advanceTimersByTime(250 + 180)
-        })
-        const callsBeforeDisable = onScroll.mock.calls.length
-        expect(callsBeforeDisable).toBeGreaterThan(1)
-
-        // コンテンツが縮んでスクロール不能になる -> canUseArrowButtons=false -> リピート停止。
-        act(() => {
-            rerender(<ScrollBar contentSize={VIEWPORT_SIZE / 2} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        })
-        act(() => {
-            vi.advanceTimersByTime(500)
-        })
-
-        expect(onScroll.mock.calls.length).toBe(callsBeforeDisable)
-    })
-})
-
-describe("ScrollBar pointer capture フォールバック / 解放 / pointerId 弁別", () => {
-    it("サムの setPointerCapture が throw してもドラッグは継続する (フォールバック)", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const thumb = getThumbWrapper(container)
-        // 非アクティブな pointerId に対する実ブラウザの挙動 (NotFoundError throw) を再現する。
-        Object.defineProperty(thumb, "setPointerCapture", {
-            configurable: true,
-            value: () => {
-                throw new DOMException("invalid pointerId", "NotFoundError")
-            },
-        })
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0 })
-        dispatchPointer(document, "pointermove", { clientY: 40 })
-
-        // キャプチャ取得に失敗しても document リスナ経由でドラッグ追従が機能すること。
-        expect(onScroll.mock.calls.length).toBeGreaterThan(0)
-    })
-
-    it("トラックの setPointerCapture が throw してもドラッグ状態が設定されトラックドラッグは継続する (フォールバック)", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const track = container.querySelector(".aqvs-scrollbar-track") as HTMLElement
-        Object.defineProperty(track, "setPointerCapture", {
-            configurable: true,
-            value: () => {
-                throw new DOMException("invalid pointerId", "NotFoundError")
-            },
-        })
-
-        dispatchPointer(track, "pointerdown", { clientY: 100 })
-        const callsAfterDown = onScroll.mock.calls.length
-        // 初回ジャンプ (押下位置へのスクロール) が発生していること。
-        expect(callsAfterDown).toBeGreaterThan(0)
-
-        // throw 後も trackDragStateRef が設定されており、トラック上の pointermove で追従すること。
-        dispatchPointer(track, "pointermove", { clientY: 120 })
-        expect(onScroll.mock.calls.length).toBeGreaterThan(callsAfterDown)
-    })
-
-    it("サムの pointerup でポインターキャプチャが解放される", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const thumb = getThumbWrapper(container)
-        const releasePointerCapture = vi.fn()
-        Object.defineProperty(thumb, "setPointerCapture", { configurable: true, value: vi.fn() })
-        Object.defineProperty(thumb, "hasPointerCapture", { configurable: true, value: () => true })
-        Object.defineProperty(thumb, "releasePointerCapture", { configurable: true, value: releasePointerCapture })
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0, pointerId: 7 })
-        dispatchPointer(document, "pointerup", { clientY: 0, pointerId: 7 })
-
-        expect(releasePointerCapture).toHaveBeenCalledTimes(1)
-        expect(releasePointerCapture).toHaveBeenCalledWith(7)
-    })
-
-    it("別 pointerId の pointermove/pointerup はドラッグ状態に影響しない (弁別)", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const thumb = getThumbWrapper(container)
-
-        dispatchPointer(thumb, "pointerdown", { clientY: 0, pointerId: 7 })
-
-        // 別ポインター (pointerId=8) の移動は無視されること。
-        dispatchPointer(document, "pointermove", { clientY: 40, pointerId: 8 })
-        expect(onScroll).not.toHaveBeenCalled()
-
-        // 別ポインターの pointerup でドラッグが終了しないこと (その後も id=7 の移動で追従する)。
-        dispatchPointer(document, "pointerup", { clientY: 40, pointerId: 8 })
-        dispatchPointer(document, "pointermove", { clientY: 40, pointerId: 7 })
-        expect(onScroll.mock.calls.length).toBeGreaterThan(0)
-    })
-})
-
-describe("ScrollBar 量子化する親での残差前進 (矢印ボタン/キーボード)", () => {
-    beforeEach(() => {
-        vi.useFakeTimers()
-    })
-
-    afterEach(() => {
-        vi.useRealTimers()
-    })
-
-    // 量子 (50px) > 矢印ステップ (viewport 200 -> step 20) の構成。残差蓄積が無いと永久に前進しない。
-    const QUANTUM = 50
-
-    it("行スナップする親でも矢印ボタン長押しで残差が蓄積して前進する", () => {
-        const { state, onScroll } = createQuantizingOnScroll(QUANTUM)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-
-        act(() => {
-            fireEvent.pointerDown(downButton)
-        })
-        // 押下直後の 1 ステップ (20px) は量子未満で位置は動かない。
-        expect(state.position).toBe(0)
-
-        act(() => {
-            // 長押し 250ms 後にリピート開始、60ms 間隔。3 ステップ目 (累計 60px) で量子 50px を跨いで前進する。
-            vi.advanceTimersByTime(250 + 60 * 2)
-        })
-        expect(state.position).toBe(QUANTUM)
-
-        act(() => {
-            fireEvent.pointerUp(downButton)
-        })
-    })
-
-    it("行スナップする親でもキーボード (Enter/Space) の連続押下で残差が蓄積して前進する", () => {
-        const { state, onScroll } = createQuantizingOnScroll(QUANTUM)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-
-        act(() => {
-            fireEvent.keyDown(downButton, { key: "Enter" })
-            fireEvent.keyDown(downButton, { key: " " })
-        })
-        // 2 押下 (累計 40px) では量子未満で動かない。
-        expect(state.position).toBe(0)
-
-        act(() => {
-            fireEvent.keyDown(downButton, { key: "Enter" })
-        })
-        // 3 押下目 (累計 60px) で量子 50px を跨いで前進する。
-        expect(state.position).toBe(QUANTUM)
-    })
-
-    it("方向転換時は逆向きの残差を持ち越さない", () => {
-        const { state, onScroll } = createQuantizingOnScroll(QUANTUM)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-        const upButton = getArrowButton(container, "Scroll up")
-
-        act(() => {
-            fireEvent.keyDown(downButton, { key: "Enter" })
-            fireEvent.keyDown(downButton, { key: "Enter" })
-        })
-        // 下向き残差 40px が溜まった状態から上向きへ転換すると残差は破棄され、位置 0 のまま。
-        act(() => {
-            fireEvent.keyDown(upButton, { key: "Enter" })
-        })
-        expect(state.position).toBe(0)
-
-        // 転換後は下向きも残差 0 から数え直しになる (3 押下で前進)。
-        act(() => {
-            fireEvent.keyDown(downButton, { key: "Enter" })
-            fireEvent.keyDown(downButton, { key: "Enter" })
-            fireEvent.keyDown(downButton, { key: "Enter" })
-        })
-        expect(state.position).toBe(QUANTUM)
-    })
-})
-
-describe("ScrollBar タップ自動スクロールの残差 (方向転換 / 量子化境界)", () => {
-    // rAF をタイムスタンプ制御可能な手動ハーネスへ差し替える。
-    let rafCallbacks: Map<number, FrameRequestCallback>
-
-    beforeEach(() => {
-        rafCallbacks = new Map()
-        let nextRafId = 1
-        vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback: FrameRequestCallback) => {
-            const id = nextRafId
-            nextRafId += 1
-            rafCallbacks.set(id, callback)
-            return id
-        })
-        vi.spyOn(window, "cancelAnimationFrame").mockImplementation((id: number) => {
-            rafCallbacks.delete(id)
-        })
-    })
-
-    afterEach(() => {
-        vi.restoreAllMocks()
-    })
-
-    /**
-     * Flushes all pending rAF callbacks with the given timestamp.
-     *
-     * 保留中の rAF コールバックを指定タイムスタンプで一括実行する。
-     */
-    const flushFrame = (timestamp: number) => {
-        const callbacks = [...rafCallbacks.values()]
-        rafCallbacks.clear()
-        act(() => {
-            for (const callback of callbacks) {
-                callback(timestamp)
-            }
-        })
-    }
-
-    const getTapCircle = (container: HTMLElement) => container.querySelector('[data-testid="virtual-scroll-tap-circle"]') as HTMLElement
-
-    // minSpeedMultiplier = maxSpeedMultiplier = 0.5 -> speed は距離に依らず viewport 200 * 0.5 = 100px/s 固定。
-    // フレーム間隔 100ms (上限 0.1s) で 1 フレームあたり厳密に 10px の要求になる。
-    const FIXED_SPEED_OPTIONS = { maxSpeedMultiplier: 0.5, minSpeedMultiplier: 0.5 }
-    const QUANTUM = 60
-
-    it("タップ自動スクロールの方向転換時に逆向きの残差を持ち越さない", () => {
-        const { state, onScroll } = createQuantizingOnScroll(QUANTUM)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} tapScrollCircleOptions={FIXED_SPEED_OPTIONS} />)
-        const circle = getTapCircle(container)
-
-        // 円の中心 (jsdom では rect が全て 0 -> 中心 (0,0)) から下方向 100px へドラッグ -> direction=+1。
-        dispatchPointer(circle, "pointerdown", { clientY: 0 })
-        dispatchPointer(circle, "pointermove", { clientY: 100 })
-
-        flushFrame(0)
-        // 11 フレーム (各 +10px 要求、累計 110px) -> 量子 60 で位置 60、下向き残差 50 が残る。
-        for (let frame = 1; frame <= 11; frame += 1) {
-            flushFrame(frame * 100)
-        }
-        expect(state.position).toBe(QUANTUM)
-
-        // ヒステリシス幅 (14px) を超える移動で 1 イベントで上方向 (-1) へ反転する。
-        dispatchPointer(circle, "pointermove", { clientY: -100 })
-        flushFrame(1200)
-
-        // 修正前: 下向き残差 50 の燃焼待ちで位置 60 に固着。修正後: 残差破棄により即座に上へ前進する。
-        expect(state.position).toBe(0)
-    })
-
-    it("量子化で maxScrollPosition ちょうどに到達できない親でも末端で境界到達と判定されループが停止する", () => {
-        // 到達可能最大 = floor(800 / 60) * 60 = 780 (maxScroll 800 に厳密到達できない構成)。
-        const { state, onScroll } = createQuantizingOnScroll(QUANTUM)
-        state.position = 780
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={780} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} tapScrollCircleOptions={FIXED_SPEED_OPTIONS} />)
-        const circle = getTapCircle(container)
-
-        dispatchPointer(circle, "pointerdown", { clientY: 0 })
-        dispatchPointer(circle, "pointermove", { clientY: 100 })
-
-        // 数フレームで要求候補 (780 + 残差) が maxScroll 800 に達し、境界到達としてループが停止する。
-        for (let frame = 0; frame <= 6; frame += 1) {
-            flushFrame(frame * 100)
-        }
-
-        expect(state.position).toBe(780)
-        // 修正前: reachedBoundary が永久に偽のまま rAF が再スケジュールされ続け、残差も無制限に成長する。
-        expect(rafCallbacks.size).toBe(0)
-    })
-})
-
-describe("ScrollBar トラックドラッグの終了経路", () => {
-    const getTrack = (container: HTMLElement) => container.querySelector(".aqvs-scrollbar-track") as HTMLElement
-
-    it("hasPointerCapture 未実装環境 (jsdom) でもトラックの pointerup でドラッグが終了する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const track = getTrack(container)
-        // jsdom の Element は hasPointerCapture を実装しない。存在ガードが無いと TypeError で状態が残留する。
-        expect(typeof track.hasPointerCapture).toBe("undefined")
-
-        dispatchPointer(track, "pointerdown", { clientY: 100 })
-        const callsAfterDown = onScroll.mock.calls.length
-        expect(callsAfterDown).toBeGreaterThan(0)
-
-        dispatchPointer(track, "pointerup", { clientY: 100 })
-
-        // 終了後の pointermove では追従しない (ドラッグ状態が破棄されている)。
-        dispatchPointer(track, "pointermove", { clientY: 130 })
-        expect(onScroll.mock.calls.length).toBe(callsAfterDown)
-    })
-
-    it("hasPointerCapture 未実装環境 (jsdom) でもトラックの pointercancel でドラッグが終了する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const track = getTrack(container)
-
-        dispatchPointer(track, "pointerdown", { clientY: 100 })
-        const callsAfterDown = onScroll.mock.calls.length
-
-        dispatchPointer(track, "pointercancel", { clientY: 100 })
-
-        dispatchPointer(track, "pointermove", { clientY: 130 })
-        expect(onScroll.mock.calls.length).toBe(callsAfterDown)
-    })
-
-    it("トラックドラッグ中に lostpointercapture が発生するとドラッグが終了する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const track = getTrack(container)
-
-        dispatchPointer(track, "pointerdown", { clientY: 100 })
-        const callsAfterDown = onScroll.mock.calls.length
-
-        // 要素削除や OS 割り込みなどブラウザ都合でキャプチャを失った想定。
-        dispatchPointer(track, "lostpointercapture", {})
-
-        dispatchPointer(track, "pointermove", { clientY: 130 })
-        expect(onScroll.mock.calls.length).toBe(callsAfterDown)
-    })
-
-    it("pointerup を取りこぼしても、マウスのボタン非押下 (buttons=0) の pointermove で stale ドラッグを破棄する", () => {
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>(() => undefined)
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const track = getTrack(container)
-
-        dispatchPointer(track, "pointerdown", { clientY: 100 })
-        const callsAfterDown = onScroll.mock.calls.length
-
-        // pointerup はトラック外で発生して取りこぼした想定 (dispatch しない)。
-        // その後のボタン非押下ホバー移動でスクロールしてはならない。
-        dispatchPointer(track, "pointermove", { clientY: 130, pointerType: "mouse", buttons: 0 })
-        expect(onScroll.mock.calls.length).toBe(callsAfterDown)
-
-        // stale 状態は破棄済みなので、以後ボタン押下相当の移動が来ても追従しない。
-        dispatchPointer(track, "pointermove", { clientY: 150, pointerType: "mouse", buttons: 1 })
-        expect(onScroll.mock.calls.length).toBe(callsAfterDown)
-    })
-})
-
-describe("ScrollBar 矢印長押し中の viewportSize 変更", () => {
-    beforeEach(() => {
-        vi.useFakeTimers()
-    })
-
-    afterEach(() => {
-        vi.useRealTimers()
-    })
-
-    it("長押しリピート中に viewportSize が変わるとステップ量が最新値に追従する", () => {
-        let position = 0
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>((next, prev) => {
-            position = typeof next === "function" ? next(prev ?? position) : next
-            return position
-        })
-        const { container, rerender } = render(<ScrollBar contentSize={10000} viewportSize={200} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-
-        act(() => {
-            fireEvent.pointerDown(downButton)
-        })
-        // viewport 200 -> step 20 (押下直後の 1 ステップ)。
-        expect(position).toBe(20)
-
-        act(() => {
-            // 250ms でリピート開始、60ms 間隔の 1 tick 目 -> +20。
-            vi.advanceTimersByTime(250 + 60)
-        })
-        expect(position).toBe(40)
-
-        // 長押し中にビューポートが拡大 (step は 1000/20 = 50 になるはず)。
-        act(() => {
-            rerender(<ScrollBar contentSize={10000} viewportSize={1000} scrollPosition={position} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        })
-        const positionBeforeTick = position
-        act(() => {
-            vi.advanceTimersByTime(60)
-        })
-        // 修正前: setInterval クロージャが押下時点の scrollByStep (step 20) を掴んだまま -> +20。
-        // 修正後: latestMetricsRef 経由で最新の viewportSize を参照 -> +50。
-        expect(position).toBe(positionBeforeTick + 50)
-
-        act(() => {
-            fireEvent.pointerUp(downButton)
-        })
-    })
-})
-
-describe("ScrollBar キーボード到達可能性", () => {
-    it("矢印ボタンは tabIndex=0 でタブ順序に含まれ、Enter/Space でスクロールする", () => {
-        let position = 0
-        const onScroll = vi.fn<(next: number | ((p: number) => number), prev?: number) => number | undefined>((next, prev) => {
-            position = typeof next === "function" ? next(prev ?? position) : next
-            return position
-        })
-        const { container } = render(<ScrollBar contentSize={CONTENT_SIZE} viewportSize={VIEWPORT_SIZE} scrollPosition={0} scrollBarWidth={SCROLL_BAR_WIDTH} onScroll={onScroll} />)
-        const downButton = getArrowButton(container, "Scroll down")
-        const upButton = getArrowButton(container, "Scroll up")
-
-        // キーボードで到達可能 (タブ順序に含まれる) こと。
-        expect(downButton.tabIndex).toBe(0)
-        expect(upButton.tabIndex).toBe(0)
-
-        act(() => {
-            fireEvent.keyDown(downButton, { key: "Enter" })
-        })
-        // viewport 200 -> step 20 だけ前進する。
-        expect(position).toBe(20)
-
-        act(() => {
-            fireEvent.keyDown(downButton, { key: " " })
-        })
-        expect(position).toBe(40)
-
-        act(() => {
-            fireEvent.keyDown(upButton, { key: "Enter" })
-        })
-        expect(position).toBe(20)
-    })
-})