From 5967ab45ae8445c4a57c56613cecd549a54b6e1b Mon Sep 17 00:00:00 2001
From: yinm <yinm.cminor9@gmail.com>
Date: Fri, 13 Sep 2024 00:04:04 +0900
Subject: [PATCH] feat: [#1147] Adds support for the aspect-ratio property

---
 .../css/declaration/CSSStyleDeclaration.ts    |  8 +++++
 .../CSSStyleDeclarationPropertyManager.ts     |  3 ++
 .../CSSStyleDeclarationPropertySetParser.ts   | 34 +++++++++++++++++++
 3 files changed, 45 insertions(+)

diff --git a/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts b/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
index c394d72bf..1bd302f49 100644
--- a/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
+++ b/packages/happy-dom/src/css/declaration/CSSStyleDeclaration.ts
@@ -4740,4 +4740,12 @@ export default class CSSStyleDeclaration extends AbstractCSSStyleDeclaration {
 	public set containerName(value: string) {
 		this.setProperty('container-name', value);
 	}
+
+	public get aspectRatio(): string {
+		return this.getPropertyValue('aspect-ratio');
+	}
+
+	public set aspectRatio(value: string) {
+		this.setProperty('aspect-ratio', value);
+	}
 }
diff --git a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts
index ce1a969c8..bab47d96e 100644
--- a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts
+++ b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts
@@ -509,6 +509,9 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'visibility':
 				properties = CSSStyleDeclarationPropertySetParser.getVisibility(value, important);
 				break;
+			case 'aspect-ratio':
+				properties = CSSStyleDeclarationPropertySetParser.getAspectRatio(value, important);
+				break;
 
 			default:
 				const trimmedValue = value.trim();
diff --git a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts
index 39d9f7b04..8911f8a25 100644
--- a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts
+++ b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts
@@ -3256,4 +3256,38 @@ export default class CSSStyleDeclarationPropertySetParser {
 		}
 		return null;
 	}
+
+	/**
+	 * Returns aspect ratio.
+	 *
+	 * @param value Value.
+	 * @param important Important.
+	 * @returns Property
+	 */
+	public static getAspectRatio(
+		value: string,
+		important: boolean
+	): {
+		[key: string]: ICSSStyleDeclarationPropertyValue;
+	} {
+		const variable = CSSStyleDeclarationValueParser.getVariable(value);
+		if (variable) {
+			return { 'aspect-ratio': { value: variable, important } };
+		}
+
+		const lowerValue = value.toLowerCase();
+		if (CSSStyleDeclarationValueParser.getGlobal(lowerValue)) {
+			return { 'aspect-ratio': { value: lowerValue, important } };
+		}
+
+		const parts = value.split('/');
+		if (parts.length === 1 && !Number.isNaN(Number(parts[0]))) {
+			return { 'aspect-ratio': { value, important } };
+		}
+		if (parts.length === 2 && !Number.isNaN(Number(parts[0])) && !Number.isNaN(Number(parts[1]))) {
+			return { 'aspect-ratio': { value, important } };
+		}
+
+		return null;
+	}
 }