From e4d04a4bb00a526fe769de4017fca81d4aab9e35 Mon Sep 17 00:00:00 2001 From: Alex Castle Date: Tue, 9 Aug 2022 14:19:22 -0700 Subject: [PATCH 1/3] Add position styling to future fill images --- packages/next/client/future/image.tsx | 4 +++ .../image-future/default/pages/fill.js | 7 ++++ .../image-future/default/test/index.test.js | 36 +++++++++++++++++++ 3 files changed, 47 insertions(+) diff --git a/packages/next/client/future/image.tsx b/packages/next/client/future/image.tsx index d4a11ae14605..a6087c4636f2 100644 --- a/packages/next/client/future/image.tsx +++ b/packages/next/client/future/image.tsx @@ -576,6 +576,10 @@ export default function Image({ position: 'absolute', height: '100%', width: '100%', + left: 0, + top: 0, + right: 0, + bottom: 0, } : {}, showAltText || placeholder === 'blur' ? {} : { color: 'transparent' }, diff --git a/test/integration/image-future/default/pages/fill.js b/test/integration/image-future/default/pages/fill.js index 27c0fe8da07f..76da55eee47d 100644 --- a/test/integration/image-future/default/pages/fill.js +++ b/test/integration/image-future/default/pages/fill.js @@ -16,6 +16,13 @@ const Page = () => { > + Non-fill image: + ) } diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index fb800d9a36d8..962fe5aa0ae6 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/test/integration/image-future/default/test/index.test.js @@ -992,6 +992,42 @@ function runTests(mode) { ) ).toBe('100%') }) + it('should add position styles to fill images', async () => { + expect( + await browser.eval(`document.getElementById("fill-image-1").style.left`) + ).toBe('0px') + expect( + await browser.eval(`document.getElementById("fill-image-1").style.top`) + ).toBe('0px') + expect( + await browser.eval( + `document.getElementById("fill-image-1").style.right` + ) + ).toBe('0px') + expect( + await browser.eval( + `document.getElementById("fill-image-1").style.bottom` + ) + ).toBe('0px') + }) + it('should not add fill styles to non-fill images', async () => { + const fillStyles = [ + 'height', + 'width', + 'position', + 'left', + 'top', + 'right', + 'bottom', + ] + for (let fillStyle of fillStyles) { + expect( + await browser.eval( + `document.getElementById("non-fill-image").style.${fillStyle}` + ) + ).toBe('') + } + }) if (mode === 'dev') { it('should not log incorrect warnings', async () => { await waitFor(1000) From a78386fdc4c115351a74222f4197875f5ef53ec2 Mon Sep 17 00:00:00 2001 From: Alex Castle Date: Thu, 11 Aug 2022 10:19:51 -0700 Subject: [PATCH 2/3] Remove redundant styling test from future image --- .../image-future/default/test/index.test.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index 962fe5aa0ae6..9b29ade96779 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/test/integration/image-future/default/test/index.test.js @@ -1010,24 +1010,6 @@ function runTests(mode) { ) ).toBe('0px') }) - it('should not add fill styles to non-fill images', async () => { - const fillStyles = [ - 'height', - 'width', - 'position', - 'left', - 'top', - 'right', - 'bottom', - ] - for (let fillStyle of fillStyles) { - expect( - await browser.eval( - `document.getElementById("non-fill-image").style.${fillStyle}` - ) - ).toBe('') - } - }) if (mode === 'dev') { it('should not log incorrect warnings', async () => { await waitFor(1000) From 947f579e8ab8085240dccb1492e31c62853f0a43 Mon Sep 17 00:00:00 2001 From: Alex Castle Date: Thu, 11 Aug 2022 10:46:00 -0700 Subject: [PATCH 3/3] tweak image fill tests --- .../image-future/default/pages/fill.js | 7 ------- .../image-future/default/test/index.test.js | 17 ++++------------- 2 files changed, 4 insertions(+), 20 deletions(-) diff --git a/test/integration/image-future/default/pages/fill.js b/test/integration/image-future/default/pages/fill.js index 76da55eee47d..27c0fe8da07f 100644 --- a/test/integration/image-future/default/pages/fill.js +++ b/test/integration/image-future/default/pages/fill.js @@ -16,13 +16,6 @@ const Page = () => { > - Non-fill image: - ) } diff --git a/test/integration/image-future/default/test/index.test.js b/test/integration/image-future/default/test/index.test.js index 9b29ade96779..ac449b73bb46 100644 --- a/test/integration/image-future/default/test/index.test.js +++ b/test/integration/image-future/default/test/index.test.js @@ -993,22 +993,13 @@ function runTests(mode) { ).toBe('100%') }) it('should add position styles to fill images', async () => { - expect( - await browser.eval(`document.getElementById("fill-image-1").style.left`) - ).toBe('0px') - expect( - await browser.eval(`document.getElementById("fill-image-1").style.top`) - ).toBe('0px') - expect( - await browser.eval( - `document.getElementById("fill-image-1").style.right` - ) - ).toBe('0px') expect( await browser.eval( - `document.getElementById("fill-image-1").style.bottom` + `document.getElementById("fill-image-1").getAttribute('style')` ) - ).toBe('0px') + ).toBe( + 'position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent' + ) }) if (mode === 'dev') { it('should not log incorrect warnings', async () => {