fix(next/image): inherit parent visibility (vercel#20542)

This PR is an alternative to vercel#20247 which contains tests for the expected behavior.

---

Fixes vercel#20198
Closes vercel#20247

packages/next/client/image.tsx

@@ -254,7 +254,7 @@ export default function Image({
   let sizerStyle: JSX.IntrinsicElements['div']['style'] | undefined
   let sizerSvg: string | undefined
   let imgStyle: ImgElementStyle | undefined = {
-    visibility: isVisible ? 'visible' : 'hidden',
+    visibility: isVisible ? 'inherit' : 'hidden',
 
     position: 'absolute',
     top: 0,

test/integration/image-component/default/pages/hidden-parent.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import React from 'react'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+      <div style={{ visibility: 'hidden' }}>
+        <Image
+          id="hidden-image"
+          src="/test.jpg"
+          width="400"
+          height="400"
+        ></Image>
+      </div>
+      <p id="stubtext">This is the hidden parent page</p>
+    </div>
+  )
+}
+
+export default Page

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

@@ -1,19 +1,19 @@
 /* eslint-env jest */
 
-import { join } from 'path'
+import fs from 'fs-extra'
 import {
-  killApp,
+  check,
   findPort,
+  getRedboxHeader,
+  hasRedbox,
+  killApp,
   launchApp,
-  nextStart,
   nextBuild,
-  check,
-  hasRedbox,
-  getRedboxHeader,
+  nextStart,
   waitFor,
 } from 'next-test-utils'
 import webdriver from 'next-webdriver'
-import fs from 'fs-extra'
+import { join } from 'path'
 
 jest.setTimeout(1000 * 30)
 
@@ -42,7 +42,28 @@ async function getComputed(browser, id, prop) {
     return val
   }
   if (typeof val === 'string') {
-    return parseInt(val, 10)
+    const v = parseInt(val, 10)
+    if (isNaN(v)) {
+      return val
+    }
+    return v
+  }
+  return null
+}
+
+async function getComputedStyle(browser, id, prop) {
+  const val = await browser.eval(
+    `window.getComputedStyle(document.getElementById('${id}')).${prop}`
+  )
+  if (typeof val === 'number') {
+    return val
+  }
+  if (typeof val === 'string') {
+    const v = parseInt(val, 10)
+    if (isNaN(v)) {
+      return val
+    }
+    return v
   }
   return null
 }
@@ -418,6 +439,44 @@ function runTests(mode) {
     })
   }
 
+  it('should correctly inherit the visibilty of the parent component', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/hidden-parent')
+
+      const id = 'hidden-image'
+
+      // Wait for image to load:
+      await check(async () => {
+        const result = await browser.eval(
+          `document.getElementById(${JSON.stringify(id)}).naturalWidth`
+        )
+
+        if (result < 1) {
+          throw new Error('Image not ready')
+        }
+
+        return 'result-correct'
+      }, /result-correct/)
+
+      await waitFor(1000)
+
+      const desiredVisibilty = await getComputed(
+        browser,
+        id,
+        'style.visibility'
+      )
+      expect(desiredVisibilty).toBe('inherit')
+
+      const actualVisibility = await getComputedStyle(browser, id, 'visibility')
+      expect(actualVisibility).toBe('hidden')
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
+
   // Tests that use the `unsized` attribute:
   if (mode !== 'dev') {
     it('should correctly rotate image', async () => {