From e012cc08eeef65622a178d852d041b04c317d1df Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Wed, 27 Oct 2021 12:04:19 -0400
Subject: [PATCH] Relax warning for `next/image` parent element

---
 packages/next/client/image.tsx                |  6 +++++-
 .../pages/layout-fill-inside-nonrelative.js   | 20 +++++++++++++++----
 .../default/test/index.test.js                | 20 +++++++++++++------
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 4f98605f4bed9..590193562b4c5 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -283,7 +283,11 @@ function handleLoading(
               console.warn(
                 `Image with src "${src}" may not render properly as a child of a flex container. Consider wrapping the image with a div to configure the width.`
               )
-            } else if (layout === 'fill' && parent.position !== 'relative') {
+            } else if (
+              layout === 'fill' &&
+              parent.position !== 'relative' &&
+              parent.position !== 'fixed'
+            ) {
               console.warn(
                 `Image with src "${src}" may not render properly with a parent using position:"${parent.position}". Consider changing the parent style to position:"relative" with a width and height.`
               )
diff --git a/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js b/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
index b446248761640..855c370058fef 100644
--- a/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
+++ b/test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js
@@ -1,12 +1,24 @@
 import React from 'react'
 import Image from 'next/image'
-import img from '../public/test.jpg'
+import jpg from '../public/test.jpg'
+import png from '../public/test.png'
+import webp from '../public/test.webp'
 
 const Page = () => {
   return (
-    <div style={{ position: 'static' }}>
-      <Image id="img" layout="fill" src={img} />
-    </div>
+    <>
+      <h1>Layout fill inside non-relative parent</h1>
+      <div style={{ position: 'static', width: '200px', height: '200px' }}>
+        <Image id="static" layout="fill" priority src={jpg} />
+      </div>
+      <div style={{ position: 'fixed', width: '200px', height: '200px' }}>
+        <Image id="fixed" layout="fill" priority src={png} />
+      </div>
+      <div style={{ position: 'relative', width: '200px', height: '200px' }}>
+        <Image id="relative" layout="fill" priority src={webp} />
+      </div>
+      <footer>footer here</footer>
+    </>
   )
 }
 
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 4998da538db15..efa0eabf77641 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -620,12 +620,20 @@ function runTests(mode) {
         appPort,
         '/layout-fill-inside-nonrelative'
       )
-      await browser.eval(`document.getElementById("img").scrollIntoView()`)
-      await check(async () => {
-        return (await browser.log('browser'))
-          .map((log) => log.message)
-          .join('\n')
-      }, /Image with src (.*)jpg(.*) may not render properly with a parent using position:"static". Consider changing the parent style to position:"relative"/gm)
+      await browser.eval(`document.querySelector("footer").scrollIntoView()`)
+      await waitFor(1000)
+      const warnings = (await browser.log('browser'))
+        .map((log) => log.message)
+        .join('\n')
+      expect(warnings).toMatch(
+        /Image with src (.*)jpg(.*) may not render properly with a parent using position:"static". Consider changing the parent style to position:"relative"/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)png(.*) may not render properly/gm
+      )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)webp(.*) may not render properly/gm
+      )
       expect(await hasRedbox(browser)).toBe(false)
     })