diff --git a/tests/e2e/parallax.spec.tsx b/tests/e2e/parallax.spec.tsx index eaf8275bb5..98c1f41aae 100644 --- a/tests/e2e/parallax.spec.tsx +++ b/tests/e2e/parallax.spec.tsx @@ -53,6 +53,35 @@ function BaseDemo({ horizontal = false }: DemoProps) { ) } +// Sticky layer wrapped in a component rather than passed as a direct child of +// Parallax — the scenario reported in #2052. +function WrappedSticky() { + return ( + +
Sticky
+
+ ) +} + +function WrappedStickyDemo() { + return ( +
+ + + + +
+ ) +} + function transformOf(testId: string): string { const el = page.getByTestId(testId).element() as HTMLElement return el.style.transform @@ -134,6 +163,28 @@ describe('Parallax - vertical', () => { }) }) +describe('Parallax - sticky layer wrapped in a component (#2052)', () => { + beforeEach(async () => { + await page.viewport(WIDTH, HEIGHT) + render() + }) + + // Skipped: documents a known, unfixed limitation. Parallax decides DOM + // placement by reading `child.props.sticky` while walking its children with + // React.Children.map, which traverses the static element tree and never + // renders components — so a wrapped layer's `sticky` prop is invisible and it + // lands inside the scrolling content, scrolling away between start and end. + // A real fix moves the placement decision into the layer (e.g. createPortal). + // Unskip when #2052 is fixed. + it.skip('keeps the sticky layer a direct child of the container, not the scrolling content', async () => { + const sticky = page.getByTestId('sticky-layer').element() as HTMLElement + // A sticky layer must render as a sibling of the scrolling content div + // (i.e. a direct child of the container), otherwise it scrolls away and + // vanishes between its start and end offsets. + expect(sticky.parentElement?.dataset.testid).toBe('container') + }) +}) + describe('Parallax - horizontal', () => { beforeEach(async () => { await page.viewport(WIDTH, HEIGHT)