Fix style reset on image with placeholder=blur (#32680)

This PR is a follow up to PR #32623 to fix the remaining blur styles. These are unlikely to be overridden by the user but this PR is necessary to make `placeholder=empty` (default behavior) and `placeholder=blur` end up with the same inline styles on the loaded image. Related to #18398 (comment)
vercel · Dec 20, 2021 · 738a964 · 738a964
1 parent 725f6b4
commit 738a964
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 9 deletions.
diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
@@ -266,8 +266,9 @@ function handleLoading(
  p.catch(() => {}).then(() => {
  if (placeholder === 'blur') {
  img.style.filter = ''
- img.style.backgroundSize = 'none'
- img.style.backgroundImage = 'none'
+ img.style.backgroundSize = ''
+ img.style.backgroundImage = ''
+ img.style.backgroundPosition = ''
  }
  loadedImageURLs.add(src)
  if (onLoadingComplete) {

diff --git a/test/integration/image-component/default/pages/style-filter.js b/test/integration/image-component/default/pages/style-filter.js
@@ -9,15 +9,15 @@ const Page = () => {
  <h1>Image Style Filter</h1>
 
  <Image
- className={style.opacity50}
+ className={style.overrideImg}
  id="img-plain"
  src="/test.jpg"
  width={400}
  height={400}
  />
 
  <Image
- className={style.opacity50}
+ className={style.overrideImg}
  id="img-blur"
  placeholder="blur"
  src={img}

diff --git a/test/integration/image-component/default/style.module.css b/test/integration/image-component/default/style.module.css
@@ -10,6 +10,9 @@
  border-radius: 139px;
 }
 
-.opacity50 {
+.overrideImg {
  filter: opacity(0.5);
+ background-size: 30%;
+ background-image: url('data:image/png;base64,iVBORw0KGgo=');
+ background-position: 1px 2px;
 }
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
@@ -834,11 +834,31 @@ function runTests(mode) {
  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)')
+ expect(await getComputedStyle(browser, 'img-plain', 'filter')).toBe(
+ 'opacity(0.5)'
+ )
+ expect(
+ await getComputedStyle(browser, 'img-plain', 'background-size')
+ ).toBe('30%')
+ expect(
+ await getComputedStyle(browser, 'img-plain', 'background-image')
+ ).toMatch('iVBORw0KGgo=')
+ expect(
+ await getComputedStyle(browser, 'img-plain', 'background-position')
+ ).toBe('1px 2px')
 
- const blur = await getComputedStyle(browser, 'img-blur', 'filter')
- expect(blur).toBe('opacity(0.5)')
+ expect(await getComputedStyle(browser, 'img-blur', 'filter')).toBe(
+ 'opacity(0.5)'
+ )
+ expect(await getComputedStyle(browser, 'img-blur', 'background-size')).toBe(
+ '30%'
+ )
+ expect(
+ await getComputedStyle(browser, 'img-blur', 'background-image')
+ ).toMatch('iVBORw0KGgo=')
+ expect(
+ await getComputedStyle(browser, 'img-blur', 'background-position')
+ ).toBe('1px 2px')
  })
 
  // Tests that use the `unsized` attribute: