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)