diff --git a/docs/api-reference/next/image.md b/docs/api-reference/next/image.md index 565103e497c8c..82e4830c8f28d 100644 --- a/docs/api-reference/next/image.md +++ b/docs/api-reference/next/image.md @@ -14,18 +14,18 @@ description: Enable Image Optimization with the built-in Image component.
Version History -| Version | Changes | -| --------- | ----------------------------------------------------------------------------------------------------- | -| `v12.2.0` | Experimental `remotePatterns` and experimental `unoptimized` configuration added. | -| `v12.1.1` | `style` prop added. Experimental[\*](#experimental-raw-layout-mode) support for `layout="raw"` added. | -| `v12.1.0` | `dangerouslyAllowSVG` and `contentSecurityPolicy` configuration added. | -| `v12.0.9` | `lazyRoot` prop added. | -| `v12.0.0` | `formats` configuration added.
AVIF support added.
Wrapper `
` changed to ``. | -| `v11.1.0` | `onLoadingComplete` and `lazyBoundary` props added. | -| `v11.0.0` | `src` prop support for static import.
`placeholder` prop added.
`blurDataURL` prop added. | -| `v10.0.5` | `loader` prop added. | -| `v10.0.1` | `layout` prop added. | -| `v10.0.0` | `next/image` introduced. | +| Version | Changes | +| --------- | --------------------------------------------------------------------------------------------------------- | +| `v12.2.0` | Experimental `remotePatterns` and experimental `unoptimized` configuration added. `layout="raw"` removed. | +| `v12.1.1` | `style` prop added. Experimental[\*](#experimental-raw-layout-mode) support for `layout="raw"` added. | +| `v12.1.0` | `dangerouslyAllowSVG` and `contentSecurityPolicy` configuration added. | +| `v12.0.9` | `lazyRoot` prop added. | +| `v12.0.0` | `formats` configuration added.
AVIF support added.
Wrapper `
` changed to ``. | +| `v11.1.0` | `onLoadingComplete` and `lazyBoundary` props added. | +| `v11.0.0` | `src` prop support for static import.
`placeholder` prop added.
`blurDataURL` prop added. | +| `v10.0.5` | `loader` prop added. | +| `v10.0.1` | `layout` prop added. | +| `v10.0.0` | `next/image` introduced. |
@@ -51,7 +51,7 @@ When using an external URL, you must add it to The `width` property can represent either the _rendered_ width or _original_ width in pixels, depending on the [`layout`](#layout) and [`sizes`](#sizes) properties. -When using `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"`, the `width` property represents the _rendered_ width in pixels, so it will affect how large the image appears. +When using `layout="intrinsic"` or `layout="fixed"` the `width` property represents the _rendered_ width in pixels, so it will affect how large the image appears. When using `layout="responsive"`, `layout="fill"`, the `width` property represents the _original_ width in pixels, so it will only affect the aspect ratio. @@ -61,7 +61,7 @@ The `width` property is required, except for [statically imported images](/docs/ The `height` property can represent either the _rendered_ height or _original_ height in pixels, depending on the [`layout`](#layout) and [`sizes`](#sizes) properties. -When using `layout="intrinsic"`, `layout="fixed"`, or `layout="raw"`, the `height` property represents the _rendered_ height in pixels, so it will affect how large the image appears. +When using `layout="intrinsic"` or `layout="fixed"` the `height` property represents the _rendered_ height in pixels, so it will affect how large the image appears. When using `layout="responsive"`, `layout="fill"`, the `height` property represents the _original_ height in pixels, so it will only affect the aspect ratio. @@ -75,13 +75,12 @@ The `` component accepts a number of additional properties beyond those The layout behavior of the image as the viewport changes size. -| `layout` | Behavior | `srcSet` | `sizes` | Has wrapper and sizer | -| ---------------------------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------- | --------------------- | -| `intrinsic` (default) | Scale *down* to fit width of container, up to image size | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes | -| `fixed` | Sized to `width` and `height` exactly | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes | -| `responsive` | Scale to fit width of container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes | -| `fill` | Grow in both X and Y axes to fill container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes | -| `raw`[\*](#experimental-raw-layout-mode) | Raw `` without styles and native lazy loading | Behaves like `responsive` if the image has the `sizes` prop, and like `fixed` if it does not | optional | no | +| `layout` | Behavior | `srcSet` | `sizes` | Has wrapper and sizer | +| --------------------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- | --------------------- | +| `intrinsic` (default) | Scale *down* to fit width of container, up to image size | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes | +| `fixed` | Sized to `width` and `height` exactly | `1x`, `2x` (based on [imageSizes](#image-sizes)) | N/A | yes | +| `responsive` | Scale to fit width of container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes | +| `fill` | Grow in both X and Y axes to fill container | `640w`, `750w`, ... `2048w`, `3840w` (based on [imageSizes](#image-sizes) and [deviceSizes](#device-sizes)) | `100vw` | yes | - [Demo the `intrinsic` layout (default)](https://image-component.nextjs.gallery/layout-intrinsic) - When `intrinsic`, the image will scale the dimensions down for smaller viewports, but maintain the original dimensions for larger viewports. @@ -134,7 +133,7 @@ const MyImage = (props) => { A string that provides information about how wide the image will be at different breakpoints. Defaults to `100vw` (the full width of the screen) when using `layout="responsive"` or `layout="fill"`. -If you are using `layout="fill"`, `layout="responsive"`, or `layout="raw"`[\*](#experimental-raw-layout-mode) it's important to assign `sizes` for any image that takes up less than the full viewport width. +If you are using `layout="fill"` or `layout="responsive"` it's important to assign `sizes` for any image that takes up less than the full viewport width. For example, when the parent element will constrain the image to always be less than half the viewport width, use `sizes="50vw"`. Without `sizes`, the image will be sent at twice the necessary resolution, decreasing performance. @@ -179,7 +178,7 @@ In some cases, you may need more advanced usage. The `` component optio Allows [passing CSS styles](https://reactjs.org/docs/dom-elements.html#style) to the underlying image element. -Note that all `layout` modes other than `"raw"`[\*](#experimental-raw-layout-mode) apply their own styles to the image element, and these automatic styles take precedence over the `style` prop. +Note that all `layout` modes apply their own styles to the image element, and these automatic styles take precedence over the `style` prop. Also keep in mind that the required `width` and `height` props can interact with your styling. If you use styling to modify an image's `width`, you must set the `height="auto"` style as well, or your image will be distorted. @@ -554,17 +553,7 @@ module.exports = { ### Experimental "raw" layout mode -The image component currently supports an additional `layout="raw"` mode, which renders the image without wrappers or styling. This layout mode is currently an experimental feature, while user feedback is gathered. As there is the possibility of breaking changes to the `layout="raw"` interface, the feature is locked behind an experimental feature flag. If you would like to use the `raw` layout mode, you must add the following to your `next.config.js`: - -```js -module.exports = { - experimental: { - images: { - layoutRaw: true, - }, - }, -} -``` +The `layout="raw"` experiment has been moved to a new module. Please use [`next/future/image`](/docs/api-reference/next/future/image.md) instead. ### Animated Images diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx index eb473ff41f32c..a80db3fc71529 100644 --- a/packages/next/client/image.tsx +++ b/packages/next/client/image.tsx @@ -18,11 +18,8 @@ import { ImageConfigContext } from '../shared/lib/image-config-context' import { warnOnce } from '../shared/lib/utils' import { normalizePathTrailingSlash } from './normalize-trailing-slash' -const { - experimentalLayoutRaw = false, - experimentalRemotePatterns = [], - experimentalUnoptimized, -} = (process.env.__NEXT_IMAGE_OPTS as any) || {} +const { experimentalRemotePatterns = [], experimentalUnoptimized } = + (process.env.__NEXT_IMAGE_OPTS as any) || {} const configEnv = process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete const loadedImageURLs = new Set() const allImgs = new Map< @@ -74,7 +71,6 @@ const VALID_LAYOUT_VALUES = [ 'fixed', 'intrinsic', 'responsive', - 'raw', undefined, ] as const type LayoutValue = typeof VALID_LAYOUT_VALUES[number] @@ -175,10 +171,7 @@ function getWidths( layout: LayoutValue, sizes: string | undefined ): { widths: number[]; kind: 'w' | 'x' } { - if ( - sizes && - (layout === 'fill' || layout === 'responsive' || layout === 'raw') - ) { + if (sizes && (layout === 'fill' || layout === 'responsive')) { // Find all the "vw" percent sizes used in the sizes prop const viewportWidthRe = /(^|\s)(1?\d?\d)vw/g const percentSizes = [] @@ -333,19 +326,6 @@ function handleLoading( onLoadingCompleteRef.current({ naturalWidth, naturalHeight }) } if (process.env.NODE_ENV !== 'production') { - if (layout === 'raw') { - const heightModified = - img.height.toString() !== img.getAttribute('height') - const widthModified = img.width.toString() !== img.getAttribute('width') - if ( - (heightModified && !widthModified) || - (!heightModified && widthModified) - ) { - warnOnce( - `Image with src "${src}" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.` - ) - } - } if (img.parentElement?.parentElement) { const parent = getComputedStyle(img.parentElement.parentElement) if (!parent.position) { @@ -460,11 +440,7 @@ export default function Image({ unoptimized = true isLazy = false } - if ( - typeof window !== 'undefined' && - loadedImageURLs.has(src) && - layout !== 'raw' - ) { + if (typeof window !== 'undefined' && loadedImageURLs.has(src)) { isLazy = false } if (experimentalUnoptimized) { @@ -478,7 +454,7 @@ export default function Image({ rootMargin: lazyBoundary || '200px', disabled: !isLazy, }) - const isVisible = !isLazy || isIntersected || layout === 'raw' + const isVisible = !isLazy || isIntersected const wrapperStyle: JSX.IntrinsicElements['span']['style'] = { boxSizing: 'border-box', @@ -529,9 +505,6 @@ export default function Image({ objectPosition, } - if (process.env.NODE_ENV !== 'production' && layout !== 'raw' && style) { - } - if (process.env.NODE_ENV !== 'production') { if (!src) { throw new Error( @@ -541,17 +514,18 @@ export default function Image({ ) } if (!VALID_LAYOUT_VALUES.includes(layout)) { + if ((layout as any) === 'raw') { + throw new Error( + `The layout="raw" experiment has been moved to a new module. Please import \`next/future/image\` instead.` + ) + } throw new Error( `Image with src "${src}" has invalid "layout" property. Provided "${layout}" should be one of ${VALID_LAYOUT_VALUES.map( String ).join(',')}.` ) } - if (layout === 'raw' && !experimentalLayoutRaw) { - throw new Error( - `The "raw" layout is currently experimental and may be subject to breaking changes. To use layout="raw", include \`experimental: { images: { layoutRaw: true } }\` in your next.config.js file.` - ) - } + if ( (typeof widthInt !== 'undefined' && isNaN(widthInt)) || (typeof heightInt !== 'undefined' && isNaN(heightInt)) @@ -577,36 +551,9 @@ export default function Image({ `Image with src "${src}" has both "priority" and "loading='lazy'" properties. Only one should be used.` ) } - if (layout === 'raw') { - if (objectFit) { - throw new Error( - `Image with src "${src}" has "layout='raw'" and "objectFit='${objectFit}'". For raw images, these and other styles should be specified using the "style" attribute.` - ) - } - if (objectPosition) { - throw new Error( - `Image with src "${src}" has "layout='raw'" and "objectPosition='${objectPosition}'". For raw images, these and other styles should be specified using the "style" attribute.` - ) - } - if (lazyRoot) { - throw new Error( - `Image with src "${src}" has "layout='raw'" and "lazyRoot='${lazyRoot}'". For raw images, native lazy loading is used so "lazyRoot" cannot be used.` - ) - } - if (lazyBoundary) { - throw new Error( - `Image with src "${src}" has "layout='raw'" and "lazyBoundary='${lazyBoundary}'". For raw images, native lazy loading is used so "lazyBoundary" cannot be used.` - ) - } - } - if ( - sizes && - layout !== 'fill' && - layout !== 'responsive' && - layout !== 'raw' - ) { + if (sizes && layout !== 'fill' && layout !== 'responsive') { warnOnce( - `Image with src "${src}" has "sizes" property but it will be ignored. Only use "sizes" with "layout='fill'", "layout='responsive'", or "layout='raw'` + `Image with src "${src}" has "sizes" property but it will be ignored. Only use "sizes" with "layout='fill'" or "layout='responsive'"` ) } if (placeholder === 'blur') { @@ -655,7 +602,7 @@ export default function Image({ } } - if (style && layout !== 'raw') { + if (style) { let overwrittenStyles = Object.keys(style).filter( (key) => key in layoutStyle ) @@ -704,21 +651,14 @@ export default function Image({ } } } - const imgStyle = Object.assign({}, style, layout === 'raw' ? {} : layoutStyle) - const svgBlurPlaceholder = `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 ${widthInt} ${heightInt}'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='${blurDataURL}'%3E%3C/image%3E%3C/svg%3E");` + const imgStyle = Object.assign({}, style, layoutStyle) const blurStyle = placeholder === 'blur' && !blurComplete ? { backgroundSize: objectFit || 'cover', backgroundPosition: objectPosition || '0% 0%', - ...(layout === 'raw' && blurDataURL?.startsWith('data:image') - ? { - backgroundImage: svgBlurPlaceholder, - } - : { - filter: 'blur(20px)', - backgroundImage: `url("${blurDataURL}")`, - }), + filter: 'blur(20px)', + backgroundImage: `url("${blurDataURL}")`, } : {} if (layout === 'fill') { @@ -852,9 +792,7 @@ export default function Image({ } return ( <> - {layout === 'raw' ? ( - - ) : ( + { {hasSizer ? ( @@ -880,7 +818,7 @@ export default function Image({ ) : null} - )} + } {priority ? ( // Note how we omit the `href` attribute, as it would only be relevant // for browsers that do not support `imagesrcset`, and in those cases @@ -937,12 +875,9 @@ const ImageElement = ({ { @@ -1005,9 +940,6 @@ const ImageElement = ({ sizes: noscriptSizes, loader, })} - {...(layout === 'raw' - ? { height: heightInt, width: widthInt } - : {})} decoding="async" data-nimg={layout} style={imgStyle} diff --git a/test/integration/image-component/default/pages/blurry-placeholder.js b/test/integration/image-component/default/pages/blurry-placeholder.js index e030fc8ccbb3c..58751c0b9afb3 100644 --- a/test/integration/image-component/default/pages/blurry-placeholder.js +++ b/test/integration/image-component/default/pages/blurry-placeholder.js @@ -15,17 +15,6 @@ export default function Page() { blurDataURL="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23blur)' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlT/wAALCAAKAAoBAREA/8QAMwABAQEAAAAAAAAAAAAAAAAAAAcJEAABAwUAAwAAAAAAAAAAAAAFAAYRAQMEEyEVMlH/2gAIAQEAAD8Az1bLPaxhiuk0QdeCOLDtHixN2dmd2bsc5FPX7VTREX//2Q==' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E" /> - - { - return ( -
- -
- ) -} - -export default Page diff --git a/test/integration/image-component/default/pages/layout-raw-placeholder-blur.js b/test/integration/image-component/default/pages/layout-raw-placeholder-blur.js deleted file mode 100644 index e0d46ca5e32a5..0000000000000 --- a/test/integration/image-component/default/pages/layout-raw-placeholder-blur.js +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react' -import Image from 'next/image' - -import testJPG from '../public/test.jpg' -import testPNG from '../public/test.png' - -const Page = () => { - return ( -
-

Layout Raw with Placeholder Blur

-

Scroll down...

-
- -
- -
Footer
-
- ) -} - -export default Page diff --git a/test/integration/image-component/default/pages/layout-raw.js b/test/integration/image-component/default/pages/layout-raw.js deleted file mode 100644 index 415e2b1d9b4bc..0000000000000 --- a/test/integration/image-component/default/pages/layout-raw.js +++ /dev/null @@ -1,58 +0,0 @@ -import React from 'react' -import Image from 'next/image' - -const Page = () => { - return ( -
-

Layout Raw

-
- -
-
- -
-
- -
-
- -
-
- ) -} - -export default Page diff --git a/test/integration/image-component/default/pages/on-loading-complete.js b/test/integration/image-component/default/pages/on-loading-complete.js index 11418881fdf38..f6faf7df3cf78 100644 --- a/test/integration/image-component/default/pages/on-loading-complete.js +++ b/test/integration/image-component/default/pages/on-loading-complete.js @@ -85,15 +85,6 @@ const Page = () => { setIdToCount={setIdToCount} /> - - diff --git a/test/integration/image-component/default/pages/priority.js b/test/integration/image-component/default/pages/priority.js index 29a03f141871c..741ae056ea023 100644 --- a/test/integration/image-component/default/pages/priority.js +++ b/test/integration/image-component/default/pages/priority.js @@ -35,14 +35,6 @@ const Page = () => { height="700" layout="responsive" /> -

This is the priority page

) diff --git a/test/integration/image-component/default/pages/static-img.js b/test/integration/image-component/default/pages/static-img.js index ba51c7f4c05ff..ee07521ec8ac1 100644 --- a/test/integration/image-component/default/pages/static-img.js +++ b/test/integration/image-component/default/pages/static-img.js @@ -23,12 +23,6 @@ const Page = () => { layout="fixed" placeholder="blur" /> - { style={{ width: '10px', borderRadius: '10px', margin: '15px' }} loading="eager" /> - { height={400} loading="eager" /> -
) } diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js index 2b4122fc6d991..8115d398f1bc5 100644 --- a/test/integration/image-component/default/test/index.test.js +++ b/test/integration/image-component/default/test/index.test.js @@ -135,11 +135,6 @@ function runTests(mode) { imagesrcset: '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w', }, - { - imagesizes: '', - imagesrcset: - '/_next/image?url=%2Ftest.webp&w=1200&q=75 1x, /_next/image?url=%2Ftest.webp&w=3840&q=75 2x', - }, ]) // When priority={true}, we should _not_ set loading="lazy" @@ -155,9 +150,6 @@ function runTests(mode) { expect( await browser.elementById('responsive2').getAttribute('loading') ).toBe(null) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( - null - ) const warnings = (await browser.log('browser')) .map((log) => log.message) @@ -295,10 +287,6 @@ function runTests(mode) { () => browser.eval(`document.getElementById("img8").currentSrc`), /test-rect.jpg/ ) - await check( - () => browser.eval(`document.getElementById("msg9").textContent`), - 'loaded 1 img9 with dimensions 400x400' - ) } finally { if (browser) { await browser.close() @@ -706,151 +694,6 @@ function runTests(mode) { } }) - it('should render no wrappers or sizers and minimal styling with layout-raw', async () => { - let browser - try { - browser = await webdriver(appPort, '/layout-raw') - - const numberOfChildren = await browser.eval( - `document.getElementById('image-container1').children.length` - ) - expect(numberOfChildren).toBe(1) - const childElementType = await browser.eval( - `document.getElementById('image-container1').children[0].nodeName` - ) - expect(childElementType).toBe('IMG') - - expect(await browser.elementById('raw1').getAttribute('style')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('height')).toBe( - '700' - ) - expect(await browser.elementById('raw1').getAttribute('width')).toBe( - '1200' - ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( - `/_next/image?url=%2Fwide.png&w=1200&q=75 1x, /_next/image?url=%2Fwide.png&w=3840&q=75 2x` - ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( - 'eager' - ) - - expect(await browser.elementById('raw2').getAttribute('style')).toBe( - 'padding-left:4rem;width:100%;object-position:30% 30%' - ) - expect(await browser.elementById('raw2').getAttribute('height')).toBe( - '700' - ) - expect(await browser.elementById('raw2').getAttribute('width')).toBe( - '1200' - ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( - `/_next/image?url=%2Fwide.png&w=16&q=75 16w, /_next/image?url=%2Fwide.png&w=32&q=75 32w, /_next/image?url=%2Fwide.png&w=48&q=75 48w, /_next/image?url=%2Fwide.png&w=64&q=75 64w, /_next/image?url=%2Fwide.png&w=96&q=75 96w, /_next/image?url=%2Fwide.png&w=128&q=75 128w, /_next/image?url=%2Fwide.png&w=256&q=75 256w, /_next/image?url=%2Fwide.png&w=384&q=75 384w, /_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w` - ) - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( - 'lazy' - ) - - expect(await browser.elementById('raw3').getAttribute('style')).toBeNull() - expect(await browser.elementById('raw3').getAttribute('srcset')).toBe( - `/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x` - ) - if (mode === 'dev') { - await waitFor(1000) - const warnings = (await browser.log('browser')) - .map((log) => log.message) - .join('\n') - expect(warnings).toMatch( - /Image with src "\/wide.png" has either width or height modified, but not the other./gm - ) - expect(warnings).not.toMatch( - /Image with src "\/test.png" has either width or height modified, but not the other./gm - ) - } - } finally { - if (browser) { - await browser.close() - } - } - }) - - it('should lazy load layout=raw and placeholder=blur', async () => { - const browser = await webdriver(appPort, '/layout-raw-placeholder-blur') - - // raw1 - expect(await browser.elementById('raw1').getAttribute('src')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' - ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' - ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( - 'lazy' - ) - expect(await browser.elementById('raw1').getAttribute('sizes')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('style')).toMatch( - 'background-size:cover;background-position:0% 0%;' - ) - expect(await browser.elementById('raw1').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw1').getAttribute('width')).toBe('400') - await browser.eval( - `document.getElementById("raw1").scrollIntoView({behavior: "smooth"})` - ) - await check( - () => browser.eval(`document.getElementById("raw1").currentSrc`), - /test(.*)jpg/ - ) - expect(await browser.elementById('raw1').getAttribute('src')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' - ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' - ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( - 'lazy' - ) - expect(await browser.elementById('raw1').getAttribute('sizes')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('style')).toMatch('') - expect(await browser.elementById('raw1').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw1').getAttribute('width')).toBe('400') - - // raw2 - expect(await browser.elementById('raw2').getAttribute('src')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75' - ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=384&q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75 3840w' - ) - expect(await browser.elementById('raw2').getAttribute('sizes')).toBe('50vw') - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( - 'lazy' - ) - expect(await browser.elementById('raw2').getAttribute('style')).toMatch( - 'background-size:cover;background-position:0% 0%;' - ) - expect(await browser.elementById('raw2').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw2').getAttribute('width')).toBe('400') - await browser.eval( - `document.getElementById("raw2").scrollIntoView({behavior: "smooth"})` - ) - await check( - () => browser.eval(`document.getElementById("raw2").currentSrc`), - /test(.*)png/ - ) - expect(await browser.elementById('raw2').getAttribute('src')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75' - ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( - '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=384&q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75 3840w' - ) - expect(await browser.elementById('raw2').getAttribute('sizes')).toBe('50vw') - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( - 'lazy' - ) - expect(await browser.elementById('raw2').getAttribute('style')).toBe('') - expect(await browser.elementById('raw2').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw2').getAttribute('width')).toBe('400') - }) - it('should handle the styles prop appropriately', async () => { let browser try { @@ -868,11 +711,7 @@ function runTests(mode) { ).toBe( 'width:0;border-radius:10px;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;display:block;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%' ) - expect( - await browser - .elementById('with-overlapping-styles-raw') - .getAttribute('style') - ).toBe('width:10px;border-radius:10px;margin:15px') + expect( await browser .elementById('without-styles-responsive') @@ -880,9 +719,6 @@ function runTests(mode) { ).toBe( 'position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%' ) - expect( - await browser.elementById('without-styles-raw').getAttribute('style') - ).toBeNull() if (mode === 'dev') { await waitFor(1000) @@ -964,15 +800,6 @@ function runTests(mode) { ) }) - it('should show error when layout=raw and lazyBoundary assigned', async () => { - const browser = await webdriver(appPort, '/invalid-raw-lazy-boundary') - - expect(await hasRedbox(browser)).toBe(true) - expect(await getRedboxHeader(browser)).toContain( - `Image with src "/test.jpg" has "layout='raw'" and "lazyBoundary='500px'". For raw images, native lazy loading is used so "lazyBoundary" cannot be used.` - ) - }) - it('should warn when img with layout=responsive is inside flex container', async () => { const browser = await webdriver(appPort, '/layout-responsive-inside-flex') await browser.eval(`document.getElementById("img").scrollIntoView()`) @@ -1321,10 +1148,6 @@ function runTests(mode) { `background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23blur)' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlT/wAALCAAKAAoBAREA/8QAMwABAQEAAAAAAAAAAAAAAAAAAAcJEAABAwUAAwAAAAAAAAAAAAAFAAYRAQMEEyEVMlH/2gAIAQEAAD8Az1bLPaxhiuk0QdeCOLDtHixN2dmd2bsc5FPX7VTREX//2Q==' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E")` ) - expect($html('#blurry-placeholder-raw')[0].attribs.style).toContain( - `background-size:cover;background-position:0% 0%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 400 400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cfilter id='blur' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='20' edgeMode='duplicate' /%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1' /%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23blur)' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMDAwMDAwQEBAQFBQUFBQcHBgYHBwsICQgJCAsRCwwLCwwLEQ8SDw4PEg8bFRMTFRsfGhkaHyYiIiYwLTA+PlT/wAALCAAKAAoBAREA/8QAMwABAQEAAAAAAAAAAAAAAAAAAAcJEAABAwUAAwAAAAAAAAAAAAAFAAYRAQMEEyEVMlH/2gAIAQEAAD8Az1bLPaxhiuk0QdeCOLDtHixN2dmd2bsc5FPX7VTREX//2Q==' x='0' y='0' height='100%25' width='100%25'/%3E%3C/svg%3E'%3E%3C/image%3E%3C/svg%3E")` - ) - expect($html('#blurry-placeholder')[0].attribs.style).toContain( `background-position:0% 0%` ) @@ -1363,15 +1186,7 @@ function runTests(mode) { ), 'none' ) - await check( - async () => - await getComputedStyle( - browser, - 'blurry-placeholder-raw', - 'background-image' - ), - 'none' - ) + expect( await getComputedStyle( browser, diff --git a/test/integration/image-component/default/test/static.test.js b/test/integration/image-component/default/test/static.test.js index 8d8791e028ac8..e32b96756bd89 100644 --- a/test/integration/image-component/default/test/static.test.js +++ b/test/integration/image-component/default/test/static.test.js @@ -69,11 +69,6 @@ const runTests = () => { `style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAYACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAAmgP/xAAcEAACAQUBAAAAAAAAAAAAAAASFBMAAQMFERX/2gAIAQEAAT8AZ1HjrKZX55JysIc4Ff/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Af//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Af//Z")"` ) }) - it('Should add a blur to a statically imported image in "raw" mode', async () => { - expect(html).toContain( - `style="background-size:cover;background-position:0% 0%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 400 300'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAYACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAAmgP/xAAcEAACAQUBAAAAAAAAAAAAAAASFBMAAQMFERX/2gAIAQEAAT8AZ1HjrKZX55JysIc4Ff/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Af//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Af//Z'%3E%3C/image%3E%3C/svg%3E");` - ) - }) it('Should add a blur placeholder to statically imported png', async () => { expect(html).toContain( `style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%;background-size:cover;background-position:0% 0%;filter:blur(20px);background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAAAAADhZOFXAAAAOklEQVR42iWGsQkAIBDE0iuIdiLOJjiGIzjiL/Meb4okiNYIlLjK3hJMzCQG1/0qmXXOUkjAV+m9wAMe3QiV6Ne8VgAAAABJRU5ErkJggg==")` diff --git a/test/integration/image-future/base-path/pages/static-img.js b/test/integration/image-future/base-path/pages/static-img.js index 6865a263afaa4..d5ce76c128980 100644 --- a/test/integration/image-future/base-path/pages/static-img.js +++ b/test/integration/image-future/base-path/pages/static-img.js @@ -18,7 +18,6 @@ const Page = () => {

Static Image

- diff --git a/test/integration/image-future/base-path/test/static.test.js b/test/integration/image-future/base-path/test/static.test.js index 67a99e6e13666..fa5d6b54295ce 100644 --- a/test/integration/image-future/base-path/test/static.test.js +++ b/test/integration/image-future/base-path/test/static.test.js @@ -63,7 +63,7 @@ const runTests = () => { it('Should allow provided width and height to override intrinsic', async () => { expect(html).toContain('width="150" height="150"') }) - it('Should add a blur to a statically imported image in "raw" mode', async () => { + it('Should add a blur to a statically imported image', async () => { expect(html).toContain( `style="background-size:cover;background-position:0% 0%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 400 300'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='50'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' href='data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoKCgoKCgsMDAsPEA4QDxYUExMUFiIYGhgaGCIzICUgICUgMy03LCksNy1RQDg4QFFeT0pPXnFlZXGPiI+7u/sBCgoKCgoKCwwMCw8QDhAPFhQTExQWIhgaGBoYIjMgJSAgJSAzLTcsKSw3LVFAODhAUV5PSk9ecWVlcY+Ij7u7+//CABEIAAYACAMBIgACEQEDEQH/xAAnAAEBAAAAAAAAAAAAAAAAAAAABwEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAAAmgP/xAAcEAACAQUBAAAAAAAAAAAAAAASFBMAAQMFERX/2gAIAQEAAT8AZ1HjrKZX55JysIc4Ff/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQIBAT8Af//EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAIAQMBAT8Af//Z'%3E%3C/image%3E%3C/svg%3E");` ) diff --git a/test/integration/image-future/default/pages/layout-raw-placeholder-blur.js b/test/integration/image-future/default/pages/placeholder-blur.js similarity index 68% rename from test/integration/image-future/default/pages/layout-raw-placeholder-blur.js rename to test/integration/image-future/default/pages/placeholder-blur.js index 5ce94676731a2..246ce055e6f69 100644 --- a/test/integration/image-future/default/pages/layout-raw-placeholder-blur.js +++ b/test/integration/image-future/default/pages/placeholder-blur.js @@ -7,12 +7,12 @@ import testPNG from '../public/test.png' const Page = () => { return (
-

Layout Raw with Placeholder Blur

+

Placeholder Blur

Scroll down...

- +
- +
Footer
) diff --git a/test/integration/image-future/default/pages/priority.js b/test/integration/image-future/default/pages/priority.js index e73327d727c38..b851d4f0ebe61 100644 --- a/test/integration/image-future/default/pages/priority.js +++ b/test/integration/image-future/default/pages/priority.js @@ -35,7 +35,6 @@ const Page = () => { height="700" sizes="100vw" /> -

This is the priority page

) diff --git a/test/integration/image-future/default/pages/static-img.js b/test/integration/image-future/default/pages/static-img.js index 6865a263afaa4..d5ce76c128980 100644 --- a/test/integration/image-future/default/pages/static-img.js +++ b/test/integration/image-future/default/pages/static-img.js @@ -18,7 +18,6 @@ const Page = () => {

Static Image

- diff --git a/test/integration/image-future/default/pages/style-prop.js b/test/integration/image-future/default/pages/style-prop.js index 7daa8638fef52..1a7e2150d8fe1 100644 --- a/test/integration/image-future/default/pages/style-prop.js +++ b/test/integration/image-future/default/pages/style-prop.js @@ -14,7 +14,7 @@ const Page = () => { loading="eager" /> { loading="eager" /> - - { return (
-

Layout Raw

+

Wrapper Div

+ />
{ objectPosition: '30% 30%', }} sizes="50vh" - > + />
+ />
+ />
) diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index 881d053d5d349..2e0375dfb5ca1 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/test/integration/image-future/default/test/index.test.js @@ -135,11 +135,6 @@ function runTests(mode) { imagesrcset: '/_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w', }, - { - imagesizes: '', - imagesrcset: - '/_next/image?url=%2Ftest.webp&w=1200&q=75 1x, /_next/image?url=%2Ftest.webp&w=3840&q=75 2x', - }, ]) // When priority={true}, we should _not_ set loading="lazy" @@ -155,9 +150,6 @@ function runTests(mode) { expect( await browser.elementById('responsive2').getAttribute('loading') ).toBe(null) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( - null - ) const warnings = (await browser.log('browser')) .map((log) => log.message) @@ -447,10 +439,10 @@ function runTests(mode) { ) }) - it('should render no wrappers or sizers and minimal styling with layout-raw', async () => { + it('should render no wrappers or sizers', async () => { let browser try { - browser = await webdriver(appPort, '/layout-raw') + browser = await webdriver(appPort, '/wrapper-div') const numberOfChildren = await browser.eval( `document.getElementById('image-container1').children.length` @@ -461,38 +453,38 @@ function runTests(mode) { ) expect(childElementType).toBe('IMG') - expect(await browser.elementById('raw1').getAttribute('style')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('height')).toBe( + expect(await browser.elementById('img1').getAttribute('style')).toBeNull() + expect(await browser.elementById('img1').getAttribute('height')).toBe( '700' ) - expect(await browser.elementById('raw1').getAttribute('width')).toBe( + expect(await browser.elementById('img1').getAttribute('width')).toBe( '1200' ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( + expect(await browser.elementById('img1').getAttribute('srcset')).toBe( `/_next/image?url=%2Fwide.png&w=1200&q=75 1x, /_next/image?url=%2Fwide.png&w=3840&q=75 2x` ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( + expect(await browser.elementById('img1').getAttribute('loading')).toBe( 'eager' ) - expect(await browser.elementById('raw2').getAttribute('style')).toBe( + expect(await browser.elementById('img2').getAttribute('style')).toBe( 'padding-left:4rem;width:100%;object-position:30% 30%' ) - expect(await browser.elementById('raw2').getAttribute('height')).toBe( + expect(await browser.elementById('img2').getAttribute('height')).toBe( '700' ) - expect(await browser.elementById('raw2').getAttribute('width')).toBe( + expect(await browser.elementById('img2').getAttribute('width')).toBe( '1200' ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( + expect(await browser.elementById('img2').getAttribute('srcset')).toBe( `/_next/image?url=%2Fwide.png&w=16&q=75 16w, /_next/image?url=%2Fwide.png&w=32&q=75 32w, /_next/image?url=%2Fwide.png&w=48&q=75 48w, /_next/image?url=%2Fwide.png&w=64&q=75 64w, /_next/image?url=%2Fwide.png&w=96&q=75 96w, /_next/image?url=%2Fwide.png&w=128&q=75 128w, /_next/image?url=%2Fwide.png&w=256&q=75 256w, /_next/image?url=%2Fwide.png&w=384&q=75 384w, /_next/image?url=%2Fwide.png&w=640&q=75 640w, /_next/image?url=%2Fwide.png&w=750&q=75 750w, /_next/image?url=%2Fwide.png&w=828&q=75 828w, /_next/image?url=%2Fwide.png&w=1080&q=75 1080w, /_next/image?url=%2Fwide.png&w=1200&q=75 1200w, /_next/image?url=%2Fwide.png&w=1920&q=75 1920w, /_next/image?url=%2Fwide.png&w=2048&q=75 2048w, /_next/image?url=%2Fwide.png&w=3840&q=75 3840w` ) - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( + expect(await browser.elementById('img2').getAttribute('loading')).toBe( 'lazy' ) - expect(await browser.elementById('raw3').getAttribute('style')).toBeNull() - expect(await browser.elementById('raw3').getAttribute('srcset')).toBe( + expect(await browser.elementById('img3').getAttribute('style')).toBeNull() + expect(await browser.elementById('img3').getAttribute('srcset')).toBe( `/_next/image?url=%2Ftest.png&w=640&q=75 1x, /_next/image?url=%2Ftest.png&w=828&q=75 2x` ) if (mode === 'dev') { @@ -514,82 +506,94 @@ function runTests(mode) { } }) - it('should lazy load layout=raw and placeholder=blur', async () => { - const browser = await webdriver(appPort, '/layout-raw-placeholder-blur') + it('should lazy load with placeholder=blur', async () => { + const browser = await webdriver(appPort, '/placeholder-blur') - // raw1 - expect(await browser.elementById('raw1').getAttribute('src')).toBe( + // blur1 + expect(await browser.elementById('blur1').getAttribute('src')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( + expect(await browser.elementById('blur1').getAttribute('srcset')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( + expect(await browser.elementById('blur1').getAttribute('loading')).toBe( 'lazy' ) - expect(await browser.elementById('raw1').getAttribute('sizes')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('style')).toMatch( + expect(await browser.elementById('blur1').getAttribute('sizes')).toBeNull() + expect(await browser.elementById('blur1').getAttribute('style')).toMatch( 'background-size:cover;background-position:0% 0%;' ) - expect(await browser.elementById('raw1').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw1').getAttribute('width')).toBe('400') + expect(await browser.elementById('blur1').getAttribute('height')).toBe( + '400' + ) + expect(await browser.elementById('blur1').getAttribute('width')).toBe('400') await browser.eval( - `document.getElementById("raw1").scrollIntoView({behavior: "smooth"})` + `document.getElementById("blur1").scrollIntoView({behavior: "smooth"})` ) await check( - () => browser.eval(`document.getElementById("raw1").currentSrc`), + () => browser.eval(`document.getElementById("blur1").currentSrc`), /test(.*)jpg/ ) - expect(await browser.elementById('raw1').getAttribute('src')).toBe( + expect(await browser.elementById('blur1').getAttribute('src')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75' ) - expect(await browser.elementById('raw1').getAttribute('srcset')).toBe( + expect(await browser.elementById('blur1').getAttribute('srcset')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=640&q=75 1x, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.fab2915d.jpg&w=828&q=75 2x' ) - expect(await browser.elementById('raw1').getAttribute('loading')).toBe( + expect(await browser.elementById('blur1').getAttribute('loading')).toBe( 'lazy' ) - expect(await browser.elementById('raw1').getAttribute('sizes')).toBeNull() - expect(await browser.elementById('raw1').getAttribute('style')).toMatch('') - expect(await browser.elementById('raw1').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw1').getAttribute('width')).toBe('400') + expect(await browser.elementById('blur1').getAttribute('sizes')).toBeNull() + expect(await browser.elementById('blur1').getAttribute('style')).toMatch('') + expect(await browser.elementById('blur1').getAttribute('height')).toBe( + '400' + ) + expect(await browser.elementById('blur1').getAttribute('width')).toBe('400') - // raw2 - expect(await browser.elementById('raw2').getAttribute('src')).toBe( + // blur2 + expect(await browser.elementById('blur2').getAttribute('src')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75' ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( + expect(await browser.elementById('blur2').getAttribute('srcset')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=384&q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75 3840w' ) - expect(await browser.elementById('raw2').getAttribute('sizes')).toBe('50vw') - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( + expect(await browser.elementById('blur2').getAttribute('sizes')).toBe( + '50vw' + ) + expect(await browser.elementById('blur2').getAttribute('loading')).toBe( 'lazy' ) - expect(await browser.elementById('raw2').getAttribute('style')).toMatch( + expect(await browser.elementById('blur2').getAttribute('style')).toMatch( 'background-size:cover;background-position:0% 0%;' ) - expect(await browser.elementById('raw2').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw2').getAttribute('width')).toBe('400') + expect(await browser.elementById('blur2').getAttribute('height')).toBe( + '400' + ) + expect(await browser.elementById('blur2').getAttribute('width')).toBe('400') await browser.eval( - `document.getElementById("raw2").scrollIntoView({behavior: "smooth"})` + `document.getElementById("blur2").scrollIntoView({behavior: "smooth"})` ) await check( - () => browser.eval(`document.getElementById("raw2").currentSrc`), + () => browser.eval(`document.getElementById("blur2").currentSrc`), /test(.*)png/ ) - expect(await browser.elementById('raw2').getAttribute('src')).toBe( + expect(await browser.elementById('blur2').getAttribute('src')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75' ) - expect(await browser.elementById('raw2').getAttribute('srcset')).toBe( + expect(await browser.elementById('blur2').getAttribute('srcset')).toBe( '/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=384&q=75 384w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=640&q=75 640w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=750&q=75 750w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=828&q=75 828w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1080&q=75 1080w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1200&q=75 1200w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=1920&q=75 1920w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=2048&q=75 2048w, /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Ftest.3f1a293b.png&w=3840&q=75 3840w' ) - expect(await browser.elementById('raw2').getAttribute('sizes')).toBe('50vw') - expect(await browser.elementById('raw2').getAttribute('loading')).toBe( + expect(await browser.elementById('blur2').getAttribute('sizes')).toBe( + '50vw' + ) + expect(await browser.elementById('blur2').getAttribute('loading')).toBe( 'lazy' ) - expect(await browser.elementById('raw2').getAttribute('style')).toBe('') - expect(await browser.elementById('raw2').getAttribute('height')).toBe('400') - expect(await browser.elementById('raw2').getAttribute('width')).toBe('400') + expect(await browser.elementById('blur2').getAttribute('style')).toBe('') + expect(await browser.elementById('blur2').getAttribute('height')).toBe( + '400' + ) + expect(await browser.elementById('blur2').getAttribute('width')).toBe('400') }) it('should handle the styles prop appropriately', async () => { @@ -599,22 +603,10 @@ function runTests(mode) { 'border-radius:10px;padding:10px' ) expect( - await browser - .elementById('with-overlapping-styles-intrinsic') - .getAttribute('style') + await browser.elementById('with-overlapping-styles').getAttribute('style') ).toBe('width:10px;border-radius:10px;margin:15px') expect( - await browser - .elementById('with-overlapping-styles-raw') - .getAttribute('style') - ).toBe('width:10px;border-radius:10px;margin:15px') - expect( - await browser - .elementById('without-styles-responsive') - .getAttribute('style') - ).toBeNull() - expect( - await browser.elementById('without-styles-raw').getAttribute('style') + await browser.elementById('without-styles').getAttribute('style') ).toBeNull() })