From 6a65dc5d3deebcabde380f103e95758727122a92 Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Fri, 26 Aug 2022 17:03:51 -0400
Subject: [PATCH] Fix `next/future/image` incorrectly warning for `fill` +
 `blur` (#39986)

This warning was incorrectly printed when `fill` and `placeholder="blur"` were used together:

> Image with src "/test.jpg" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.
---
 packages/next/client/future/image.tsx         |  2 +-
 .../image-future/default/pages/fill.js        | 19 +++++++++++++++++++
 .../image-future/default/test/index.test.ts   |  3 +++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx
index f53be503d6d..60f36c27a07 100644
--- a/packages/next/client/future/image.tsx
+++ b/packages/next/client/future/image.tsx
@@ -697,7 +697,7 @@ export default function Image({
     }
 
     if (placeholder === 'blur') {
-      if ((widthInt || 0) * (heightInt || 0) < 1600) {
+      if (widthInt && heightInt && widthInt * heightInt < 1600) {
         warnOnce(
           `Image with src "${src}" is smaller than 40x40. Consider removing the "placeholder='blur'" property to improve performance.`
         )
diff --git a/test/integration/image-future/default/pages/fill.js b/test/integration/image-future/default/pages/fill.js
index 27c0fe8da07..eeee0b5bb24 100644
--- a/test/integration/image-future/default/pages/fill.js
+++ b/test/integration/image-future/default/pages/fill.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import Image from 'next/future/image'
 
+import test from '../public/test.jpg'
+
 const Page = () => {
   return (
     <div>
@@ -16,6 +18,23 @@ const Page = () => {
       >
         <Image id="fill-image-1" src="/wide.png" sizes="300px" fill />
       </div>
+      <div
+        id="image-container-blur"
+        style={{
+          height: '300px',
+          width: '300px',
+          position: 'relative',
+          overflow: 'hidden',
+        }}
+      >
+        <Image
+          id="fill-image-blur"
+          src={test}
+          sizes="300px"
+          placeholder="blur"
+          fill
+        />
+      </div>
     </div>
   )
 }
diff --git a/test/integration/image-future/default/test/index.test.ts b/test/integration/image-future/default/test/index.test.ts
index d10c94adec3..48d111655ea 100644
--- a/test/integration/image-future/default/test/index.test.ts
+++ b/test/integration/image-future/default/test/index.test.ts
@@ -1032,6 +1032,9 @@ function runTests(mode) {
           .map((log) => log.message)
           .join('\n')
         expect(warnings).not.toMatch(/Image with src (.*) has "fill"/gm)
+        expect(warnings).not.toMatch(
+          /Image with src (.*) is smaller than 40x40. Consider removing(.*)/gm
+        )
       })
       it('should log warnings when using fill mode incorrectly', async () => {
         browser = await webdriver(appPort, '/fill-warnings')