From 13a5eb22288c9ca69589ee121fa6c4eaa3d3d497 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Thu, 11 Aug 2022 11:16:05 -0700
Subject: [PATCH] Add position styling to future fill images (#39438)

This PR adds default style properties to a fill-mode image using `next/future/image` of 0 for all positions. This should replicate the existing `layout="fill"` behavior better, and make it easier to migrate.

Tests are also added for fill styling.
---
 packages/next/client/future/image.tsx                    | 4 ++++
 test/integration/image-future/default/test/index.test.js | 9 +++++++++
 2 files changed, 13 insertions(+)

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
index 57e07805dd5f..ae2bee4f4359 100644
--- a/packages/next/client/future/image.tsx
+++ b/packages/next/client/future/image.tsx
@@ -576,6 +576,10 @@ export default function Image({
           position: 'absolute',
           height: '100%',
           width: '100%',
+          left: 0,
+          top: 0,
+          right: 0,
+          bottom: 0,
         }
       : {},
     showAltText || placeholder === 'blur' ? {} : { color: 'transparent' },
diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js
index 1a9715f4f40c..95570ddbd14c 100644
--- a/test/integration/image-future/default/test/index.test.js
+++ b/test/integration/image-future/default/test/index.test.js
@@ -992,6 +992,15 @@ function runTests(mode) {
         )
       ).toBe('100%')
     })
+    it('should add position styles to fill images', async () => {
+      expect(
+        await browser.eval(
+          `document.getElementById("fill-image-1").getAttribute('style')`
+        )
+      ).toBe(
+        'position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent'
+      )
+    })
     if (mode === 'dev') {
       it('should not log incorrect warnings', async () => {
         await waitFor(1000)