diff --git a/test/integration/next-image-new/default/pages/blurry-placeholder.js b/test/integration/next-image-new/default/pages/blurry-placeholder.js
deleted file mode 100644
index 30583ad0a20a2..0000000000000
--- a/test/integration/next-image-new/default/pages/blurry-placeholder.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react'
-import Image from 'next/image'
-
-export default function Page() {
- return (
-
-
Blurry Placeholder
-
-
-
-
-
-
-
- )
-}
diff --git a/test/integration/next-image-new/default/test/index.test.ts b/test/integration/next-image-new/default/test/index.test.ts
index 65892992a95c0..9e4ff54778a7c 100644
--- a/test/integration/next-image-new/default/test/index.test.ts
+++ b/test/integration/next-image-new/default/test/index.test.ts
@@ -599,8 +599,8 @@ function runTests(mode) {
'lazy'
)
expect(await browser.elementById('blur1').getAttribute('sizes')).toBeNull()
- expect(await browser.elementById('blur1').getAttribute('style')).toBe(
- 'color: transparent;'
+ expect(await browser.elementById('blur1').getAttribute('style')).toMatch(
+ 'color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;'
)
expect(await browser.elementById('blur1').getAttribute('height')).toBe(
'400'
@@ -646,8 +646,8 @@ function runTests(mode) {
expect(await browser.elementById('blur2').getAttribute('loading')).toBe(
'lazy'
)
- expect(await browser.elementById('blur2').getAttribute('style')).toBe(
- 'color: transparent;'
+ expect(await browser.elementById('blur2').getAttribute('style')).toMatch(
+ 'color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat'
)
expect(await browser.elementById('blur2').getAttribute('height')).toBe(
'400'
@@ -1084,15 +1084,6 @@ function runTests(mode) {
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')
})
describe('Fill-mode tests', () => {
let browser
@@ -1187,55 +1178,6 @@ function runTests(mode) {
})
}
- it('should have blurry placeholder when enabled', async () => {
- const html = await renderViaHTTP(appPort, '/blurry-placeholder')
- const $html = cheerio.load(html)
-
- $html('noscript > img').attr('id', 'unused')
-
- expect($html('#blurry-placeholder-raw')[0].attribs.style).toContain(
- `color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8P4nhDwAGuAKPn6cicwAAAABJRU5ErkJggg=='/%3E%3C/svg%3E")`
- )
-
- expect($html('#blurry-placeholder-with-lazy')[0].attribs.style).toContain(
- `color:transparent;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO0/8/wBwAE/wI85bEJ6gAAAABJRU5ErkJggg=='/%3E%3C/svg%3E")`
- )
- })
-
- it('should remove blurry placeholder after image loads', async () => {
- const browser = await webdriver(appPort, '/blurry-placeholder')
- await check(
- async () =>
- await getComputedStyle(
- browser,
- 'blurry-placeholder-raw',
- 'background-image'
- ),
- 'none'
- )
- expect(
- await getComputedStyle(
- browser,
- 'blurry-placeholder-with-lazy',
- 'background-image'
- )
- ).toBe(
- `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20'/%3E%3C/filter%3E%3Cimage preserveAspectRatio='none' filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mO0/8/wBwAE/wI85bEJ6gAAAABJRU5ErkJggg=='/%3E%3C/svg%3E")`
- )
-
- await browser.eval('document.getElementById("spacer").remove()')
-
- await check(
- async () =>
- await getComputedStyle(
- browser,
- 'blurry-placeholder-with-lazy',
- 'background-image'
- ),
- 'none'
- )
- })
-
it('should be valid HTML', async () => {
let browser
try {