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 {