From 04dddd783da3235aa9ed523d2856adf86b792b5f Mon Sep 17 00:00:00 2001
From: Erika <3019731+Princesseuh@users.noreply.github.com>
Date: Tue, 14 Mar 2023 15:02:27 +0100
Subject: [PATCH] Fix local images having the wrong width and height when both
 dimensions were provided (#6547)

* fix(images): Fix Image providing the wrong width and height if both attributes were provided on local images

* chore: changeset
---
 .changeset/dirty-flies-hunt.md                |  5 +++++
 packages/astro/src/assets/services/service.ts |  7 ++++---
 packages/astro/test/core-image.test.js        | 20 ++++++++++++++++++-
 .../fixtures/core-image/src/pages/index.astro | 12 +++++++++++
 4 files changed, 40 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dirty-flies-hunt.md

diff --git a/.changeset/dirty-flies-hunt.md b/.changeset/dirty-flies-hunt.md
new file mode 100644
index 000000000000..a20478055603
--- /dev/null
+++ b/.changeset/dirty-flies-hunt.md
@@ -0,0 +1,5 @@
+---
+'astro': patch
+---
+
+Fix images having the wrong width and height when using the new astro:assets features if both dimensions were provided
diff --git a/packages/astro/src/assets/services/service.ts b/packages/astro/src/assets/services/service.ts
index 11f1a370768b..1af8360da05e 100644
--- a/packages/astro/src/assets/services/service.ts
+++ b/packages/astro/src/assets/services/service.ts
@@ -100,13 +100,14 @@ export const baseService: Omit<LocalImageService, 'transform'> = {
 		let targetHeight = options.height;
 		if (isESMImportedImage(options.src)) {
 			const aspectRatio = options.src.width / options.src.height;
-
-			// If we have a desired height and no width, calculate the target width automatically
 			if (targetHeight && !targetWidth) {
+				// If we have a height but no width, use height to calculate the width
 				targetWidth = Math.round(targetHeight * aspectRatio);
 			} else if (targetWidth && !targetHeight) {
+				// If we have a width but no height, use width to calculate the height
 				targetHeight = Math.round(targetWidth / aspectRatio);
-			} else {
+			} else if (!targetWidth && !targetHeight) {
+				// If we have neither width or height, use the original image's dimensions
 				targetWidth = options.src.width;
 				targetHeight = options.src.height;
 			}
diff --git a/packages/astro/test/core-image.test.js b/packages/astro/test/core-image.test.js
index e0af4f1aab97..2eb905d94b89 100644
--- a/packages/astro/test/core-image.test.js
+++ b/packages/astro/test/core-image.test.js
@@ -61,12 +61,30 @@ describe('astro:image', () => {
 				expect(!!$img.attr('decoding')).to.equal(true);
 			});
 
-			it('has width and height', () => {
+			it('has width and height - no dimensions set', () => {
 				let $img = $('#local img');
 				expect($img.attr('width')).to.equal('207');
 				expect($img.attr('height')).to.equal('243');
 			});
 
+			it('has proper width and height - only width', () => {
+				let $img = $('#local-width img');
+				expect($img.attr('width')).to.equal('350');
+				expect($img.attr('height')).to.equal('411');
+			});
+
+			it('has proper width and height - only height', () => {
+				let $img = $('#local-height img');
+				expect($img.attr('width')).to.equal('170');
+				expect($img.attr('height')).to.equal('200');
+			});
+
+			it('has proper width and height - has both width and height', () => {
+				let $img = $('#local-both img');
+				expect($img.attr('width')).to.equal('300');
+				expect($img.attr('height')).to.equal('400');
+			});
+
 			it('includes the provided alt', () => {
 				let $img = $('#local img');
 				expect($img.attr('alt')).to.equal('a penguin');
diff --git a/packages/astro/test/fixtures/core-image/src/pages/index.astro b/packages/astro/test/fixtures/core-image/src/pages/index.astro
index 51382e1bff3d..565aa5ab1f07 100644
--- a/packages/astro/test/fixtures/core-image/src/pages/index.astro
+++ b/packages/astro/test/fixtures/core-image/src/pages/index.astro
@@ -11,6 +11,18 @@ import myImage from "../assets/penguin1.jpg";
 		<Image src={myImage} alt="a penguin" />
 	</div>
 
+	<div id="local-width">
+		<Image src={myImage} alt="a penguin" width={350} />
+	</div>
+
+	<div id="local-height">
+		<Image src={myImage} alt="a penguin" height={200} />
+	</div>
+
+		<div id="local-both">
+		<Image src={myImage} alt="a penguin" width={300} height={400} />
+	</div>
+
 	<div id="remote">
 		<Image src="https://avatars.githubusercontent.com/u/622227?s=64" alt="fred" width="48" height="48" />
 	</div>