diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index de508e4cce5c..895e67437b3e 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -458,10 +458,19 @@ export default function Image({
})
const isVisible = !isLazy || isIntersected
- let wrapperStyle: JSX.IntrinsicElements['span']['style'] | undefined
- let sizerStyle: JSX.IntrinsicElements['span']['style'] | undefined
+ const wrapperStyle: JSX.IntrinsicElements['span']['style'] = {
+ all: 'initial',
+ boxSizing: 'border-box',
+ overflow: 'hidden',
+ }
+ const sizerStyle: JSX.IntrinsicElements['span']['style'] = {
+ all: 'initial',
+ boxSizing: 'border-box',
+ display: 'block',
+ }
+ let hasSizer = false
let sizerSvg: string | undefined
- let imgStyle: ImgElementStyle | undefined = {
+ const imgStyle: ImgElementStyle = {
position: 'absolute',
top: 0,
left: 0,
@@ -495,19 +504,12 @@ export default function Image({
: {}
if (layout === 'fill') {
//
- wrapperStyle = {
- display: 'block',
- overflow: 'hidden',
-
- position: 'absolute',
- top: 0,
- left: 0,
- bottom: 0,
- right: 0,
-
- boxSizing: 'border-box',
- margin: 0,
- }
+ wrapperStyle.display = 'block'
+ wrapperStyle.position = 'absolute'
+ wrapperStyle.top = 0
+ wrapperStyle.left = 0
+ wrapperStyle.bottom = 0
+ wrapperStyle.right = 0
} else if (
typeof widthInt !== 'undefined' &&
typeof heightInt !== 'undefined'
@@ -517,41 +519,24 @@ export default function Image({
const paddingTop = isNaN(quotient) ? '100%' : `${quotient * 100}%`
if (layout === 'responsive') {
//
- wrapperStyle = {
- display: 'block',
- overflow: 'hidden',
- position: 'relative',
-
- boxSizing: 'border-box',
- margin: 0,
- }
- sizerStyle = { display: 'block', boxSizing: 'border-box', paddingTop }
+ wrapperStyle.display = 'block'
+ wrapperStyle.position = 'relative'
+ hasSizer = true
+ sizerStyle.paddingTop = paddingTop
} else if (layout === 'intrinsic') {
//
- wrapperStyle = {
- display: 'inline-block',
- maxWidth: '100%',
- overflow: 'hidden',
- position: 'relative',
- boxSizing: 'border-box',
- margin: 0,
- }
- sizerStyle = {
- display: 'block',
- boxSizing: 'border-box',
- maxWidth: '100%',
- }
+ wrapperStyle.display = 'inline-block'
+ wrapperStyle.position = 'relative'
+ wrapperStyle.maxWidth = '100%'
+ hasSizer = true
+ sizerStyle.maxWidth = '100%'
sizerSvg = ``
} else if (layout === 'fixed') {
//
- wrapperStyle = {
- display: 'inline-block',
- overflow: 'hidden',
- boxSizing: 'border-box',
- position: 'relative',
- width: widthInt,
- height: heightInt,
- }
+ wrapperStyle.display = 'inline-block'
+ wrapperStyle.position = 'relative'
+ wrapperStyle.width = widthInt
+ wrapperStyle.height = heightInt
}
} else {
//
@@ -584,11 +569,12 @@ export default function Image({
return (
- {sizerStyle ? (
+ {hasSizer ? (
{sizerSvg ? (
{
+ return (
+
+
Image Style Inheritance
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Page
diff --git a/test/integration/image-component/default/style.module.css b/test/integration/image-component/default/style.module.css
index dd2e06544348..24b10178bfeb 100644
--- a/test/integration/image-component/default/style.module.css
+++ b/test/integration/image-component/default/style.module.css
@@ -1,3 +1,15 @@
.displayFlex {
display: flex;
}
+
+.mainContainer {
+ border-radius: 75px;
+}
+
+.mainContainer span {
+ border-radius: 50px;
+}
+
+.mainContainer img {
+ border-radius: 100px;
+}
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index 15d090ea0f6d..dcc39cdd8c7a 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -699,6 +699,46 @@ function runTests(mode) {
}
})
+ it('should apply style inheritance for img elements but not wrapper elements', async () => {
+ let browser
+ try {
+ browser = await webdriver(appPort, '/style-inheritance')
+
+ await browser.eval(
+ `document.querySelector("footer").scrollIntoView({behavior: "smooth"})`
+ )
+
+ const allImgs = await browser.eval(`
+ function foo() {
+ const imgs = document.querySelectorAll("img[id]");
+ for (let img of imgs) {
+ const br = window.getComputedStyle(img).getPropertyValue("border-radius");
+ if (!br) return 'no-border-radius';
+ if (br !== '100px') return br;
+ }
+ return true;
+ }()
+ `)
+ expect(allImgs).toBe(true)
+
+ const allSpans = await browser.eval(`
+ function foo() {
+ const spans = document.querySelectorAll("span");
+ for (let span of spans) {
+ const br = window.getComputedStyle(span).getPropertyValue("border-radius");
+ if (br && br !== '0px') return br;
+ }
+ return false;
+ }()
+ `)
+ expect(allSpans).toBe(false)
+ } finally {
+ if (browser) {
+ await browser.close()
+ }
+ }
+ })
+
// Tests that use the `unsized` attribute:
if (mode !== 'dev') {
it('should correctly rotate image', async () => {