Add tests and solve another edge case

vercel · Oct 22, 2020 · 6c11e4f · 6c11e4f
1 parent ef79ffc
commit 6c11e4f
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 19 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -224,15 +224,18 @@ export default function Image({
 
   let divStyle: React.CSSProperties | undefined
   let imgStyle: React.CSSProperties | undefined
+  let wrapperStyle: React.CSSProperties | undefined
   if (typeof height === 'number' && typeof width === 'number' && !unsized) {
     // <Image src="i.png" width=100 height=100 />
     const quotient = height / width
     const ratio = isNaN(quotient) ? 1 : quotient * 100
+    wrapperStyle = {
+      maxWidth: '100%',
+      width,
+    }
     divStyle = {
       position: 'relative',
       paddingBottom: `${ratio}%`,
-      maxWidth: '100%',
-      width,
     }
     imgStyle = {
       height: '100%',
@@ -264,23 +267,25 @@ export default function Image({
   }
 
   return (
-    <div style={divStyle}>
-      {shouldPreload
-        ? generatePreload({
-            src,
-            widths: configSizes,
-            unoptimized,
-            sizes,
-          })
-        : ''}
-      <img
-        {...rest}
-        {...imgAttributes}
-        className={className}
-        sizes={sizes}
-        ref={thisEl}
-        style={imgStyle}
-      />
+    <div style={wrapperStyle}>
+      <div style={divStyle}>
+        {shouldPreload
+          ? generatePreload({
+              src,
+              widths: configSizes,
+              unoptimized,
+              sizes,
+            })
+          : ''}
+        <img
+          {...rest}
+          {...imgAttributes}
+          className={className}
+          sizes={sizes}
+          ref={thisEl}
+          style={imgStyle}
+        />
+      </div>
     </div>
   )
 }

diff --git a/test/integration/image-component/default/pages/flex.js b/test/integration/image-component/default/pages/flex.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <p>Hello World</p>
+      <Image id="basic-image" src="/test.jpg" width={400} height={400}></Image>
+      <p id="stubtext">This is the index page</p>
+      <style jsx>{`
+        div {
+          display: flex;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Page
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -52,6 +52,27 @@ function runTests() {
       }
     }
   })
+
+  it('should work when using flexbox', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/flex')
+      await check(async () => {
+        const result = await browser.eval(
+          `document.getElementById('basic-image').width`
+        )
+        if (result === 0) {
+          throw new Error('Incorrectly loaded image')
+        }
+
+        return 'result-correct'
+      }, /result-correct/)
+    } finally {
+      if (browser) {
+        await browser.close()
+      }
+    }
+  })
 }
 
 describe('Image Component Tests', () => {