Merge pull request #805 from fuelled/master

[Bug]: Render when slides are wider than view size
davidjerleke · Apr 9, 2024 · ea446b3 · ea446b3
2 parents 1588dea + 6a77cb2
commit ea446b3
Show file tree

Hide file tree

Showing 7 changed files with 537 additions and 5 deletions.
diff --git a/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-ltr.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-ltr.fixture.ts
@@ -163,3 +163,86 @@ export const FIXTURE_SLIDES_TO_SCROLL_LTR_2: TestElementDimensionsType = {
     value: 20
   }
 }
+
+/*
+Fixture 3
+
+- Horizontal
+- LTR
+- No slide margins
+- Slides are wider than viewport
+*/
+export const FIXTURE_SLIDES_TO_SCROLL_LTR_3: TestElementDimensionsType = {
+  containerOffset: {
+    offsetWidth: 250,
+    offsetHeight: 190,
+    offsetTop: 0,
+    offsetLeft: 0
+  },
+  slideOffsets: [
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 500
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 1000
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 1250
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 1500
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 1750
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 2000
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 2500
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 3000
+    },
+    {
+      offsetWidth: 501,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 3500
+    }
+  ],
+  endMargin: {
+    property: 'marginRight',
+    value: 0
+  }
+}
diff --git a/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-rtl.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-rtl.fixture.ts
@@ -163,3 +163,86 @@ export const FIXTURE_SLIDES_TO_SCROLL_RTL_2: TestElementDimensionsType = {
     value: 20
   }
 }
+
+/*
+Fixture 3
+
+- Horizontal
+- RTL
+- No slide margins
+- Slides are wider than viewport
+*/
+export const FIXTURE_SLIDES_TO_SCROLL_RTL_3: TestElementDimensionsType = {
+  containerOffset: {
+    offsetWidth: 250,
+    offsetHeight: 190,
+    offsetTop: 0,
+    offsetLeft: 0
+  },
+  slideOffsets: [
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 500
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -250
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -500
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -750
+    },
+    {
+      offsetWidth: 250,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -1000
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -1500
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -2000
+    },
+    {
+      offsetWidth: 500,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -2500
+    },
+    {
+      offsetWidth: 501,
+      offsetHeight: 0,
+      offsetTop: 0,
+      offsetLeft: -3001
+    }
+  ],
+  endMargin: {
+    property: 'marginLeft',
+    value: 0
+  }
+}
diff --git a/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-vertical.fixture.ts b/packages/embla-carousel/src/__tests__/fixtures/slidesToScroll-vertical.fixture.ts
@@ -161,3 +161,85 @@ export const FIXTURE_SLIDES_TO_SCROLL_Y_2: TestElementDimensionsType = {
     value: 20
   }
 }
+
+/*
+Fixture 3
+
+- Vertical
+- No slide margins
+- Slides are taller than viewport
+*/
+export const FIXTURE_SLIDES_TO_SCROLL_Y_3: TestElementDimensionsType = {
+  containerOffset: {
+    offsetWidth: 1000,
+    offsetHeight: 250,
+    offsetTop: 0,
+    offsetLeft: 0
+  },
+  slideOffsets: [
+    {
+      offsetWidth: 1000,
+      offsetHeight: 500,
+      offsetTop: 0,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 500,
+      offsetTop: 500,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 250,
+      offsetTop: 1000,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 250,
+      offsetTop: 1250,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 250,
+      offsetTop: 1500,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 250,
+      offsetTop: 1750,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 500,
+      offsetTop: 2000,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 500,
+      offsetTop: 2500,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 500,
+      offsetTop: 3000,
+      offsetLeft: 0
+    },
+    {
+      offsetWidth: 1000,
+      offsetHeight: 501,
+      offsetTop: 3500,
+      offsetLeft: 0
+    }
+  ],
+  endMargin: {
+    property: 'marginBottom',
+    value: 0
+  }
+}
diff --git a/packages/embla-carousel/src/__tests__/slidesToScroll-ltr.test.ts b/packages/embla-carousel/src/__tests__/slidesToScroll-ltr.test.ts
@@ -3,7 +3,8 @@ import { defaultOptions } from '../components/Options'
 import { mockTestElements } from './mocks'
 import {
   FIXTURE_SLIDES_TO_SCROLL_LTR_1,
-  FIXTURE_SLIDES_TO_SCROLL_LTR_2
+  FIXTURE_SLIDES_TO_SCROLL_LTR_2,
+  FIXTURE_SLIDES_TO_SCROLL_LTR_3
 } from './fixtures/slidesToScroll-ltr.fixture'
 
 const FIRST_SNAP_INDEX = 0
@@ -126,6 +127,97 @@ describe('➡️  SlidesToScroll - Horizontal LTR', () => {
     })
   })
 
+  describe('"auto" is correct for slides WITHOUT MARGINS and:', () => {
+    describe('edge cases when slide width is greater than viewport and:', () => {
+      const emblaApi = EmblaCarousel(
+        mockTestElements(FIXTURE_SLIDES_TO_SCROLL_LTR_3)
+      )
+
+      beforeEach(() => {
+        emblaApi.reInit({ ...defaultOptions, slidesToScroll: 'auto' })
+      })
+
+      test('LOOP:FALSE', () => {
+        const engine = emblaApi.internalEngine()
+        const expectedScrollSnaps = [
+          0, -625, -1000, -1250, -1500, -1750, -2125, -2625, -3125, -3751
+        ]
+
+        expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+        expect(engine.location.get()).toBe(
+          expectedScrollSnaps[FIRST_SNAP_INDEX]
+        )
+
+        expect(engine.slideRegistry).toEqual([
+          [0],
+          [1],
+          [2],
+          [3],
+          [4],
+          [5],
+          [6],
+          [7],
+          [8],
+          [9]
+        ])
+      })
+
+      test('LOOP:FALSE and CONTAINSCROLL:FALSE', () => {
+        emblaApi.reInit({ containScroll: false })
+
+        const engine = emblaApi.internalEngine()
+        const expectedScrollSnaps = [
+          -125, -625, -1000, -1250, -1500, -1750, -2125, -2625, -3125, -3625.5
+        ]
+
+        expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+        expect(engine.location.get()).toBe(
+          expectedScrollSnaps[FIRST_SNAP_INDEX]
+        )
+
+        expect(engine.slideRegistry).toEqual([
+          [0],
+          [1],
+          [2],
+          [3],
+          [4],
+          [5],
+          [6],
+          [7],
+          [8],
+          [9]
+        ])
+      })
+
+      test('LOOP:TRUE', () => {
+        emblaApi.reInit({ loop: true })
+
+        const engine = emblaApi.internalEngine()
+        const expectedScrollSnaps = [
+          -125, -625, -1000, -1250, -1500, -1750, -2125, -2625, -3125, -3625.5
+        ]
+
+        expect(engine.scrollSnaps).toEqual(expectedScrollSnaps)
+        expect(engine.location.get()).toBe(
+          expectedScrollSnaps[FIRST_SNAP_INDEX]
+        )
+
+        expect(engine.slideRegistry).toEqual([
+          [0],
+          [1],
+          [2],
+          [3],
+          [4],
+          [5],
+          [6],
+          [7],
+          [8],
+          [9]
+        ])
+      })
+    })
+  })
+
   describe('"Custom number 2" is correct for slides WITHOUT MARGINS and:', () => {
     const emblaApi = EmblaCarousel(
       mockTestElements(FIXTURE_SLIDES_TO_SCROLL_LTR_1)