Add warning when parent styles break next/image

[styfle]

Fixes #27644

[ijjk]

Failing test suites

Commit: 76ed6cd

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

• Image Component Tests > dev mode > should warn when img with layout=fill is inside a container without position relative

Expand output

● Image Component Tests › dev mode › should warn when img with layout=fill is inside a container without position relative

expect(received).toMatch(expected)

Expected pattern: /Image with src (.*)jpg(.*) may not render properly with a parent using position:\"static\". Consider changing the parent style to position:\"relative\"/gm
Received string:  ""

  605 |         .join('\n')
  606 |       expect(await hasRedbox(browser)).toBe(false)
> 607 |       expect(warnings).toMatch(
      |                        ^
  608 |         /Image with src (.*)jpg(.*) may not render properly with a parent using position:\"static\". Consider changing the parent style to position:\"relative\"/gm
  609 |       )
  610 |     })

  at Object.<anonymous> (integration/image-component/default/test/index.test.js:607:24)

[ijjk]

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
buildDuration	15.7s	16.3s	⚠️ +629ms
buildDurationCached	4.1s	4.1s	⚠️ +57ms
nodeModulesSize	61.5 MB	61.5 MB	⚠️ +2.52 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.104	3.101	0
/ avg req/sec	805.39	806.31	+0.92
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.933	1.97	⚠️ +0.04
/error-in-render avg req/sec	1293.31	1268.84	⚠️ -24.47

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
745.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	23.2 kB	23.2 kB	✓
webpack-HASH.js gzip	1.44 kB	1.44 kB	✓
Overall change	67.1 kB	67.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages Overall increase ⚠️

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
_app-HASH.js gzip	979 B	979 B	✓
_error-HASH.js gzip	194 B	194 B	✓
amp-HASH.js gzip	312 B	312 B	✓
css-HASH.js gzip	329 B	329 B	✓
dynamic-HASH.js gzip	2.67 kB	2.67 kB	✓
head-HASH.js gzip	351 B	351 B	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	4.13 kB	4.14 kB	⚠️ +4 B
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	318 B	318 B	✓
script-HASH.js gzip	387 B	387 B	✓
withRouter-HASH.js gzip	320 B	320 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	13 kB	13 kB	⚠️ +4 B

Client Build Manifests

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
_buildManifest.js gzip	492 B	492 B	✓
Overall change	492 B	492 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
index.html gzip	539 B	539 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Diffs

Diff for _buildManifest.js

@@ -17,7 +17,7 @@ self.__BUILD_MANIFEST = {
     "static\u002Fchunks\u002Fpages\u002Fhooks-d386c05297cfdcd36f03.js"
   ],
   "/image": [
-    "static\u002Fchunks\u002Fpages\u002Fimage-39552dae3d3053484035.js"
+    "static\u002Fchunks\u002Fpages\u002Fimage-1681da386f618d2e4e49.js"
   ],
   "/link": ["static\u002Fchunks\u002Fpages\u002Flink-f62bdaa581311495bb85.js"],
   "/routerDirect": [

Diff for image-HASH.js

@@ -322,7 +322,7 @@
       } // See https://stackoverflow.com/q/39777833/266535 for why we use this ref
       // handler instead of the img's onLoad attribute.
 
-      function handleLoading(img, src, placeholder, onLoadingComplete) {
+      function handleLoading(img, src, layout, placeholder, onLoadingComplete) {
         if (!img) {
           return;
         }
@@ -349,6 +349,10 @@
                   naturalHeight: naturalHeight
                 });
               }
+
+              if (false) {
+                var parent, ref, ref1;
+              }
             });
           }
         };
@@ -670,7 +674,13 @@
               className: className,
               ref: function ref(img) {
                 setRef(img);
-                handleLoading(img, srcString, placeholder, onLoadingComplete);
+                handleLoading(
+                  img,
+                  srcString,
+                  layout,
+                  placeholder,
+                  onLoadingComplete
+                );
               },
               style: _objectSpread({}, imgStyle, blurStyle)
             })

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
buildDuration	13.2s	13.6s	⚠️ +325ms
buildDurationCached	5.6s	5.6s	-51ms
nodeModulesSize	61.5 MB	61.5 MB	⚠️ +2.52 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.04	3.062	⚠️ +0.02
/ avg req/sec	822.33	816.33	⚠️ -6
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.797	1.844	⚠️ +0.05
/error-in-render avg req/sec	1391.5	1355.6	⚠️ -35.9

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
16.HASH.js gzip	186 B	186 B	✓
677f882d2ed8..HASH.js gzip	14.1 kB	14.1 kB	✓
framework.HASH.js gzip	41.9 kB	41.9 kB	✓
main-HASH.js gzip	10.6 kB	10.6 kB	✓
webpack-HASH.js gzip	1.19 kB	1.19 kB	✓
Overall change	68 kB	68 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
_app-HASH.js gzip	964 B	964 B	✓
_error-HASH.js gzip	3.8 kB	3.8 kB	✓
amp-HASH.js gzip	552 B	552 B	✓
css-HASH.js gzip	333 B	333 B	✓
dynamic-HASH.js gzip	2.87 kB	2.87 kB	✓
head-HASH.js gzip	3.06 kB	3.06 kB	✓
hooks-HASH.js gzip	924 B	924 B	✓
index-HASH.js gzip	231 B	231 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	298 B	298 B	✓
script-HASH.js gzip	2.98 kB	2.98 kB	✓
withRouter-HASH.js gzip	295 B	295 B	✓
30809af5c834..565.css gzip	125 B	125 B	✓
Overall change	18.1 kB	18.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
_buildManifest.js gzip	500 B	500 B	✓
Overall change	500 B	500 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js next-image-add-warning-parent-element	Change
index.html gzip	585 B	585 B	✓
link.html gzip	597 B	597 B	✓
withRouter.html gzip	578 B	578 B	✓
Overall change	1.76 kB	1.76 kB	✓

Commit: 10edc8e