From c0352b9038ee8b857a382cb7a672da5afd9455db Mon Sep 17 00:00:00 2001
From: Beau Collins <bcollins@snapchat.com>
Date: Fri, 21 Aug 2026 10:33:11 -0700
Subject: [PATCH] Add integration_test case: image intrinsic height drives
 container

An <image width="100%"> with no explicit height must give its auto-height
container an intrinsic height from the decoded aspect ratio. Under the new web
renderer the inner image is position:absolute and contributes no height, so the
container collapses to ~0 and the image renders invisible while still decoding.

This case renders the minimal repro (image in an auto-height card) and records
decode/asset observations; the web-vs-native snapshot diff catches the collapse.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/IntegrationTestCases.tsx              | 23 +++++++++++++++++++
 1 file changed, 23 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..5086f3241 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,29 @@ export const INTEGRATION_TEST_CASES: readonly IntegrationTestCase[] = [
       }
     },
   },
+  {
+    // An image sized width:100% with no explicit height must give its
+    // (auto-height) container an intrinsic height from the image aspect ratio.
+    // Web must not collapse the container to 0 height.
+    id: 'image-intrinsic-height-container',
+    name: 'Image intrinsic height drives container',
+    description:
+      'Image with width:100% and no explicit height inside an auto-height container; the container must take the image height, not collapse to zero.',
+    element: 'image',
+    render: (ctx: IntegrationTestRenderContext) => {
+      <view key={ctx.caseId} ref={ctx.rootRef} width={WIDTH} height={HEIGHT} backgroundColor={CARD} padding={16}>
+        <view backgroundColor="#FFFFFF" border="1 solid #CBD5E1" padding={12}>
+          <image
+            src={res.image}
+            width="100%"
+            objectFit="contain"
+            onImageDecoded={(w, h) => ctx.record(`intrinsic image decoded:${w}x${h}`)}
+            onAssetLoad={(success, error) => ctx.record(`intrinsic image asset:${success}:${error ?? ''}`)}
+          />
+        </view>
+      </view>;
+    },
+  },
 ];
 
 export type IntegrationCoverageLedgerElement = NativeTemplateElementName | 'slot';