feat: [#1147] Adds support for the aspect-ratio property

capricorn86 · Sep 12, 2024 · 5967ab4 · 5967ab4
1 parent afd256b
commit 5967ab4
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git 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/...ages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertyManager.ts b/...ages/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/...es/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationPropertySetParser.ts b/...es/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;
+	}
 }