From 71af9e7a0c3d56681eee67fad01fe34df21e0c03 Mon Sep 17 00:00:00 2001
From: Beau Collins <bcollins@snapchat.com>
Date: Fri, 21 Aug 2026 10:33:36 -0700
Subject: [PATCH] Add integration_test case: scroll clips overflowing content

A <scroll> with a fixed height must clip and scroll content taller than its
bounds. Under the new web renderer the scroll box grows to its content height
(600px here instead of 200px), so it does not clip and pushes following siblings
off-canvas.

This case renders a fixed-height scroll over tall content plus a sentinel below
it; the web-vs-native snapshot diff catches the missing clip.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/IntegrationTestCases.tsx              | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/apps/integration_test/src/valdi/integration_test_app/src/IntegrationTestCases.tsx b/apps/integration_test/src/valdi/integration_test_app/src/IntegrationTestCases.tsx
index bf1943cea..caa2f171f 100644
--- a/apps/integration_test/src/valdi/integration_test_app/src/IntegrationTestCases.tsx
+++ b/apps/integration_test/src/valdi/integration_test_app/src/IntegrationTestCases.tsx
@@ -4813,6 +4813,31 @@ export const INTEGRATION_TEST_CASES: readonly IntegrationTestCase[] = [
       }
     },
   },
+  {
+    // A scroll with content taller than its fixed height must clip (and scroll),
+    // not grow to its content height and push following siblings out of bounds.
+    id: 'scroll-overflow-clipping',
+    name: 'Scroll clips overflowing content',
+    description:
+      'Scroll with fixed height 200 containing 600px of content; the content must be clipped to the scroll bounds, and the sentinel below must stay on-canvas.',
+    element: 'scroll',
+    render: (ctx: IntegrationTestRenderContext) => {
+      <view key={ctx.caseId} ref={ctx.rootRef} width={WIDTH} height={HEIGHT} backgroundColor={CARD} padding={16}>
+        <scroll height={200} width="100%" backgroundColor="#FFFFFF" border="1 solid #CBD5E1">
+          <view height={600} backgroundColor="#DBEAFE" padding={12}>
+            <label value="Top of tall content — should be visible." numberOfLines={0} color="#1E3A8A" font="system 14" />
+          </view>
+        </scroll>
+        <label
+          value="Sentinel below the scroll — must not be pushed off by spillover."
+          numberOfLines={0}
+          color="#334155"
+          font="system 14"
+          width="100%"
+        />
+      </view>;
+    },
+  },
 ];
 
 export type IntegrationCoverageLedgerElement = NativeTemplateElementName | 'slot';