diff --git a/packages/snap/src/snap.ts b/packages/snap/src/snap.ts index 45b9d7d2..a6f404c2 100644 --- a/packages/snap/src/snap.ts +++ b/packages/snap/src/snap.ts @@ -175,7 +175,7 @@ export class Snap { align.forEach((align) => { if (align === 'start') { - value = rect.top + value = isHorizontal ? rect.left : rect.top } else if (align === 'center') { value = isHorizontal ? rect.left + rect.width / 2 - this.viewport.width / 2 diff --git a/packages/snap/tests/align.test.js b/packages/snap/tests/align.test.js new file mode 100644 index 00000000..e7dc4f78 --- /dev/null +++ b/packages/snap/tests/align.test.js @@ -0,0 +1,82 @@ +import { afterAll, beforeAll, describe, expect, test } from 'bun:test' +import { Snap } from '../src/snap' + +const original = { + window: globalThis.window, + document: globalThis.document, + ResizeObserver: globalThis.ResizeObserver, + getComputedStyle: globalThis.getComputedStyle, +} + +beforeAll(() => { + globalThis.window = { + innerWidth: 800, + innerHeight: 600, + scrollX: 0, + scrollY: 0, + addEventListener() { + /* No event or observer side effects in this unit test. */ + }, + removeEventListener() { + /* No event or observer side effects in this unit test. */ + }, + } + globalThis.document = { body: {} } + globalThis.ResizeObserver = class { + observe() { + /* No event or observer side effects in this unit test. */ + } + disconnect() { + /* No event or observer side effects in this unit test. */ + } + } + globalThis.getComputedStyle = () => ({ position: 'static' }) +}) + +afterAll(() => { + Object.assign(globalThis, original) +}) + +describe('element snap alignment', () => { + for (const isHorizontal of [false, true]) { + for (const [align, horizontal, vertical] of [ + ['start', 640, 20], + ['center', 340, -180], + ['end', 40, -380], + ]) { + test(`${isHorizontal ? 'horizontal' : 'vertical'} ${align}`, () => { + let target + const lenis = { + isHorizontal, + on() { + /* No event or observer side effects in this unit test. */ + }, + off() { + /* No event or observer side effects in this unit test. */ + }, + scrollTo(value) { + target = value + }, + } + const snap = new Snap(lenis) + snap.addElement( + { + getBoundingClientRect: () => ({ left: 640, top: 20 }), + offsetWidth: 200, + offsetHeight: 200, + offsetParent: null, + scrollLeft: 0, + scrollTop: 0, + }, + { align } + ) + try { + snap.goTo(0) + expect(target).toBe(isHorizontal ? horizontal : vertical) + } finally { + snap.destroy() + } + }) + } + } +})