From 266ef1bac1a2e4a3279bd83e496f45ab0ca2e5df Mon Sep 17 00:00:00 2001 From: Yasuhiro Yamamoto Date: Sat, 28 Dec 2024 10:58:34 +0900 Subject: [PATCH] Bug fix for #899. Co-authored-by: Yasuhiro Yamamoto Co-authored-by: David Jerleke --- .../src/__tests__/containScroll-ltr.test.ts | 17 ++++++- .../src/__tests__/containScroll-rtl.test.ts | 17 ++++++- .../__tests__/containScroll-vertical.test.ts | 17 ++++++- .../fixtures/containScroll-ltr.fixture.ts | 46 +++++++++++++++++++ .../fixtures/containScroll-rtl.fixture.ts | 46 +++++++++++++++++++ .../containScroll-vertical.fixture.ts | 45 ++++++++++++++++++ .../src/components/ScrollContain.ts | 2 +- 7 files changed, 186 insertions(+), 4 deletions(-) diff --git a/packages/embla-carousel/src/__tests__/containScroll-ltr.test.ts b/packages/embla-carousel/src/__tests__/containScroll-ltr.test.ts index 529336eb9..890f788ad 100644 --- a/packages/embla-carousel/src/__tests__/containScroll-ltr.test.ts +++ b/packages/embla-carousel/src/__tests__/containScroll-ltr.test.ts @@ -7,7 +7,8 @@ import { FIXTURE_CONTAIN_SCROLL_LTR_4, FIXTURE_CONTAIN_SCROLL_LTR_5, FIXTURE_CONTAIN_SCROLL_LTR_6, - FIXTURE_CONTAIN_SCROLL_LTR_7 + FIXTURE_CONTAIN_SCROLL_LTR_7, + FIXTURE_CONTAIN_SCROLL_LTR_8 } from './fixtures/containScroll-ltr.fixture' const FIRST_SNAP_INDEX = 0 @@ -250,6 +251,20 @@ describe('➡️ ContainScroll - Horizontal LTR', () => { expect(engine.slideRegistry).toEqual([[0, 1], [2], [3], [4, 5]]) }) + + test('Unexpected 1 pixel snaps are NOT present at the end of the carousel', () => { + const emblaApi = EmblaCarousel( + mockTestElements(FIXTURE_CONTAIN_SCROLL_LTR_8), + { align: 'start' } + ) + + const engine = emblaApi.internalEngine() + const expectedScrollSnaps = [0, -400, -800] + expect(engine.scrollSnaps).toEqual(expectedScrollSnaps) + expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX]) + + expect(engine.slideRegistry).toEqual([[0], [1], [2, 3]]) + }) }) describe('"keepSnaps" is correct for slides WITHOUT MARGINS and ALIGN is:', () => { diff --git a/packages/embla-carousel/src/__tests__/containScroll-rtl.test.ts b/packages/embla-carousel/src/__tests__/containScroll-rtl.test.ts index fbf33298e..12aeeed04 100644 --- a/packages/embla-carousel/src/__tests__/containScroll-rtl.test.ts +++ b/packages/embla-carousel/src/__tests__/containScroll-rtl.test.ts @@ -7,7 +7,8 @@ import { FIXTURE_CONTAIN_SCROLL_RTL_4, FIXTURE_CONTAIN_SCROLL_RTL_5, FIXTURE_CONTAIN_SCROLL_RTL_6, - FIXTURE_CONTAIN_SCROLL_RTL_7 + FIXTURE_CONTAIN_SCROLL_RTL_7, + FIXTURE_CONTAIN_SCROLL_RTL_8 } from './fixtures/containScroll-rtl.fixture' const FIRST_SNAP_INDEX = 0 @@ -255,6 +256,20 @@ describe('➡️ ContainScroll - Horizontal RTL', () => { expect(engine.slideRegistry).toEqual([[0, 1], [2], [3], [4, 5]]) }) + + test('Unexpected 1 pixel snaps are NOT present at the end of the carousel', () => { + const emblaApi = EmblaCarousel( + mockTestElements(FIXTURE_CONTAIN_SCROLL_RTL_8), + { direction: 'rtl', align: 'start' } + ) + + const engine = emblaApi.internalEngine() + const expectedScrollSnaps = [0, -399, -799] + expect(engine.scrollSnaps).toEqual(expectedScrollSnaps) + expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX]) + + expect(engine.slideRegistry).toEqual([[0], [1], [2, 3]]) + }) }) describe('"keepSnaps" is correct for slides WITHOUT MARGINS and ALIGN is:', () => { diff --git a/packages/embla-carousel/src/__tests__/containScroll-vertical.test.ts b/packages/embla-carousel/src/__tests__/containScroll-vertical.test.ts index e49e32f4a..1c920d1ae 100644 --- a/packages/embla-carousel/src/__tests__/containScroll-vertical.test.ts +++ b/packages/embla-carousel/src/__tests__/containScroll-vertical.test.ts @@ -7,7 +7,8 @@ import { FIXTURE_CONTAIN_SCROLL_Y_4, FIXTURE_CONTAIN_SCROLL_Y_5, FIXTURE_CONTAIN_SCROLL_Y_6, - FIXTURE_CONTAIN_SCROLL_Y_7 + FIXTURE_CONTAIN_SCROLL_Y_7, + FIXTURE_CONTAIN_SCROLL_Y_8 } from './fixtures/containScroll-vertical.fixture' const FIRST_SNAP_INDEX = 0 @@ -253,6 +254,20 @@ describe('➡️ ContainScroll - Vertical', () => { expect(engine.slideRegistry).toEqual([[0, 1], [2], [3], [4, 5]]) }) + + test('Unexpected 1 pixel snaps are NOT present at the end of the carousel', () => { + const emblaApi = EmblaCarousel( + mockTestElements(FIXTURE_CONTAIN_SCROLL_Y_8), + { axis: 'y', align: 'start' } + ) + + const engine = emblaApi.internalEngine() + const expectedScrollSnaps = [0, -400, -800] + expect(engine.scrollSnaps).toEqual(expectedScrollSnaps) + expect(engine.location.get()).toBe(expectedScrollSnaps[FIRST_SNAP_INDEX]) + + expect(engine.slideRegistry).toEqual([[0], [1], [2, 3]]) + }) }) describe('"keepSnaps" is correct for slides WITHOUT MARGINS and ALIGN is:', () => { diff --git a/packages/embla-carousel/src/__tests__/fixtures/containScroll-ltr.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/containScroll-ltr.fixture.ts index d800ef822..d87956bd4 100644 --- a/packages/embla-carousel/src/__tests__/fixtures/containScroll-ltr.fixture.ts +++ b/packages/embla-carousel/src/__tests__/fixtures/containScroll-ltr.fixture.ts @@ -405,3 +405,49 @@ export const FIXTURE_CONTAIN_SCROLL_LTR_7: TestElementDimensionsType = { value: 0 } } + +/* +Fixture 8 + +- Horizontal +- LTR +- No slide margins +*/ +export const FIXTURE_CONTAIN_SCROLL_LTR_8: TestElementDimensionsType = { + containerOffset: { + offsetWidth: 799, + offsetHeight: 190, + offsetTop: 176, + offsetLeft: 0 + }, + slideOffsets: [ + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 0 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 400 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 799 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 1199 + } + ], + endMargin: { + property: 'marginRight', + value: 0 + } +} diff --git a/packages/embla-carousel/src/__tests__/fixtures/containScroll-rtl.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/containScroll-rtl.fixture.ts index bb56f07a0..b6be265c9 100644 --- a/packages/embla-carousel/src/__tests__/fixtures/containScroll-rtl.fixture.ts +++ b/packages/embla-carousel/src/__tests__/fixtures/containScroll-rtl.fixture.ts @@ -405,3 +405,49 @@ export const FIXTURE_CONTAIN_SCROLL_RTL_7: TestElementDimensionsType = { value: 0 } } + +/* +Fixture 8 + +- Horizontal +- RTL +- No slide margins +*/ +export const FIXTURE_CONTAIN_SCROLL_RTL_8: TestElementDimensionsType = { + containerOffset: { + offsetWidth: 799, + offsetHeight: 190, + offsetTop: 176, + offsetLeft: 0 + }, + slideOffsets: [ + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 400 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: 0 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: -399 + }, + { + offsetWidth: 400, + offsetHeight: 190, + offsetTop: 0, + offsetLeft: -799 + } + ], + endMargin: { + property: 'marginLeft', + value: 0 + } +} diff --git a/packages/embla-carousel/src/__tests__/fixtures/containScroll-vertical.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/containScroll-vertical.fixture.ts index a43f7dd05..d340b36b5 100644 --- a/packages/embla-carousel/src/__tests__/fixtures/containScroll-vertical.fixture.ts +++ b/packages/embla-carousel/src/__tests__/fixtures/containScroll-vertical.fixture.ts @@ -398,3 +398,48 @@ export const FIXTURE_CONTAIN_SCROLL_Y_7: TestElementDimensionsType = { value: 0 } } + +/* +Fixture 8 + +- Vertical +- No slide margins +*/ +export const FIXTURE_CONTAIN_SCROLL_Y_8: TestElementDimensionsType = { + containerOffset: { + offsetWidth: 799, + offsetHeight: 799, + offsetTop: 0, + offsetLeft: 0 + }, + slideOffsets: [ + { + offsetWidth: 799, + offsetHeight: 400, + offsetTop: 0, + offsetLeft: 0 + }, + { + offsetWidth: 799, + offsetHeight: 400, + offsetTop: 400, + offsetLeft: 0 + }, + { + offsetWidth: 799, + offsetHeight: 400, + offsetTop: 799, + offsetLeft: 0 + }, + { + offsetWidth: 799, + offsetHeight: 400, + offsetTop: 1199, + offsetLeft: 0 + } + ], + endMargin: { + property: 'marginBottom', + value: 0 + } +} diff --git a/packages/embla-carousel/src/components/ScrollContain.ts b/packages/embla-carousel/src/components/ScrollContain.ts index 63af915f9..00ecacc4d 100644 --- a/packages/embla-carousel/src/components/ScrollContain.ts +++ b/packages/embla-carousel/src/components/ScrollContain.ts @@ -21,7 +21,7 @@ export function ScrollContain( const snapsContained = measureContained() function usePixelTolerance(bound: number, snap: number): boolean { - return deltaAbs(bound, snap) < 1 + return deltaAbs(bound, snap) <= 1 } function findScrollContainLimit(): LimitType {