Repository: vercel/next.js
Pull request: [test] Unflake static image test

[flakiness metric](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40git.repository.id%3A%22github.com%2Fvercel%2Fnext.js%22%20%40test.name%3A%22Static%20Image%20Component%20Tests%20development%20mode%20Should%20allow%20an%20image%20with%20a%20static%20src%20to%20omit%20height%20and%20width%22%20%40test.type%3A%22turbopack%22%20%40test.status%3A%22fail%22&agg_m=count&agg_m_source=base&agg_t=count&currentTab=overview&eventStack=&fromUser=false&index=citest&start=1759057503838&end=1759662303838&paused=false)

I suspect that the test `Should allow an image with a static src to omit height and width` is frequently failing with `waiting for locator('#basic-static') to be visible` because the image is covered by one of the images with a `fill` prop, which are rendered later in the page. This means that the image is not actually visible, even though it is in the DOM. Playwright then fails to find it. However, I wasn't able to reproduce this locally.

The fix is to wrap the `fill` images in a relatively positioned div with a set height, so that they don't cover the other images.

**Before:**

<img width="490" height="894" alt="before" src="https://github.com/user-attachments/assets/7632dc67-a649-42b7-8b62-a9a216632ec2" />

**After:**

<img width="490" height="894" alt="after" src="https://github.com/user-attachments/assets/2d369e4d-ef08-47cc-bdc4-04ab94afcceb" />



Changed files:
filename: test/integration/next-image-new/default/pages/static-img.js
patch: @@ -25,6 +25,16 @@ export const getStaticProps = () => ({
   props: { testImgProp },
 })
 
+function FillContainer({ children }) {
+  // Optimized to accept the square test images. Subtracting 16px to account for
+  // the default 8px body margin.
+  return (
+    <div style={{ position: 'relative', height: 'calc(100vw - 16px)' }}>
+      {children}
+    </div>
+  )
+}
+
 const Page = ({ testImgProp }) => {
   return (
     <div>
@@ -74,23 +84,41 @@ const Page = ({ testImgProp }) => {
       <Image id="static-bmp" src={testBMP} />
       <Image id="static-ico" src={testICO} />
       <br />
-      <Image id="static-svg-fill" src={testSVG} fill />
-      <Image id="static-gif-fill" src={testGIF} fill />
-      <Image id="static-bmp-fill" src={testBMP} fill />
-      <Image id="static-ico-fill" src={testICO} fill />
+      <FillContainer>
+        <Image id="static-svg-fill" src={testSVG} fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="static-gif-fill" src={testGIF} fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="static-bmp-fill" src={testBMP} fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="static-ico-fill" src={testICO} fill />
+      </FillContainer>
       <br />
-      <Image id="blur-png-fill" src={testPNG} placeholder="blur" fill />
-      <Image id="blur-jpg-fill" src={testJPG} placeholder="blur" fill />
-      <Image id="blur-webp-fill" src={testWEBP} placeholder="blur" fill />
-      <Image id="blur-avif-fill" src={testAVIF} placeholder="blur" fill />
+      <FillContainer>
+        <Image id="blur-png-fill" src={testPNG} placeholder="blur" fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="blur-jpg-fill" src={testJPG} placeholder="blur" fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="blur-webp-fill" src={testWEBP} placeholder="blur" fill />
+      </FillContainer>
+      <FillContainer>
+        <Image id="blur-avif-fill" src={testAVIF} placeholder="blur" fill />
+      </FillContainer>
       <br />
-      <Image
-        id="blurdataurl-fill"
-        src="/test.jpg"
-        placeholder="blur"
-        blurDataURL={blurDataURL}
-        fill
-      />
+      <FillContainer>
+        <Image
+          id="blurdataurl-fill"
+          src="/test.jpg"
+          placeholder="blur"
+          blurDataURL={blurDataURL}
+          fill
+        />
+      </FillContainer>
       <Image
         id="blurdataurl-ratio"
         src="/test.png"