Skip to content

Commit

Permalink
Fix style.filter on image with placeholder=blur (vercel#32623)
Browse files Browse the repository at this point in the history
  • Loading branch information
styfle authored and natew committed Feb 16, 2022
1 parent 268f9e1 commit 8384487
Show file tree
Hide file tree
Showing 4 changed files with 49 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/next/client/image.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ function handleLoading(
const p = 'decode' in img ? img.decode() : Promise.resolve()
p.catch(() => {}).then(() => {
if (placeholder === 'blur') {
img.style.filter = 'none'
img.style.filter = ''
img.style.backgroundSize = 'none'
img.style.backgroundImage = 'none'
}
Expand Down
31 changes: 31 additions & 0 deletions test/integration/image-component/default/pages/style-filter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import React from 'react'
import Image from 'next/image'
import style from '../style.module.css'
import img from '../public/test.jpg'

const Page = () => {
return (
<div>
<h1>Image Style Filter</h1>

<Image
className={style.opacity50}
id="img-plain"
src="/test.jpg"
width={400}
height={400}
/>

<Image
className={style.opacity50}
id="img-blur"
placeholder="blur"
src={img}
/>

<footer>Footer</footer>
</div>
)
}

export default Page
4 changes: 4 additions & 0 deletions test/integration/image-component/default/style.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,7 @@
.mainContainer img {
border-radius: 139px;
}

.opacity50 {
filter: opacity(0.5);
}
13 changes: 13 additions & 0 deletions test/integration/image-component/default/test/index.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -828,6 +828,19 @@ function runTests(mode) {
}
})

it('should apply filter style after image loads', async () => {
const browser = await webdriver(appPort, '/style-filter')
await check(() => getSrc(browser, 'img-plain'), /^\/_next\/image/)
await check(() => getSrc(browser, 'img-blur'), /^\/_next\/image/)
await waitFor(1000)

const plain = await getComputedStyle(browser, 'img-plain', 'filter')
expect(plain).toBe('opacity(0.5)')

const blur = await getComputedStyle(browser, 'img-blur', 'filter')
expect(blur).toBe('opacity(0.5)')
})

// Tests that use the `unsized` attribute:
if (mode !== 'dev') {
it('should correctly rotate image', async () => {
Expand Down

0 comments on commit 8384487

Please sign in to comment.