Fix next/image incorrectly warning for position: absolute parent (#…

…34551)

- Fixes #33007 
- Fixes #31340

packages/next/client/image.tsx

@@ -280,7 +280,8 @@ function handleLoading(
             } else if (
               layout === 'fill' &&
               parent.position !== 'relative' &&
-              parent.position !== 'fixed'
+              parent.position !== 'fixed' &&
+              parent.position !== 'absolute'
             ) {
               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.`

test/integration/image-component/default/pages/layout-fill-inside-nonrelative.js

@@ -2,6 +2,7 @@ import React from 'react'
 import Image from 'next/image'
 import jpg from '../public/test.jpg'
 import png from '../public/test.png'
+import avif from '../public/test.avif'
 import webp from '../public/test.webp'
 
 const Page = () => {
@@ -14,6 +15,9 @@ const Page = () => {
       <div style={{ position: 'fixed', width: '200px', height: '200px' }}>
         <Image id="fixed" layout="fill" priority src={png} />
       </div>
+      <div style={{ position: 'absolute', width: '200px', height: '200px' }}>
+        <Image id="absolute" layout="fill" priority src={avif} />
+      </div>
       <div style={{ position: 'relative', width: '200px', height: '200px' }}>
         <Image id="relative" layout="fill" priority src={webp} />
       </div>

test/integration/image-component/default/test/index.test.js

@@ -669,6 +669,9 @@ function runTests(mode) {
       expect(warnings).not.toMatch(
         /Image with src (.*)png(.*) may not render properly/gm
       )
+      expect(warnings).not.toMatch(
+        /Image with src (.*)avif(.*) may not render properly/gm
+      )
       expect(warnings).not.toMatch(
         /Image with src (.*)webp(.*) may not render properly/gm
       )