#344@trivial: Continues on CSSStyleDeclaration.

capricorn86 · Sep 19, 2022 · ca6c2aa · ca6c2aa
1 parent 4ebf7b7
commit ca6c2aa
Show file tree

Hide file tree

Showing 5 changed files with 703 additions and 107 deletions.
diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyGetParser.ts
@@ -384,21 +384,13 @@ export default class CSSStyleDeclarationPropertyGetParser {
 			values.push(properties['background-image'].value);
 		}
 
-		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-repeat'].value)) {
-			values.push(properties['background-repeat'].value);
-		}
-
-		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-attachment'].value)) {
-			values.push(properties['background-attachment'].value);
-		}
-
 		if (
 			!CSSStyleDeclarationValueParser.getInitial(properties['background-position-x'].value) &&
 			!CSSStyleDeclarationValueParser.getInitial(properties['background-position-y'].value) &&
-			!CSSStyleDeclarationValueParser.getInitial(properties['background-position-size'].value)
+			!CSSStyleDeclarationValueParser.getInitial(properties['background-size'].value)
 		) {
 			values.push(
-				`${properties['background-position-x'].value} ${properties['background-position-y'].value} / ${properties['background-position-size'].value}`
+				`${properties['background-position-x'].value} ${properties['background-position-y'].value} / ${properties['background-size'].value}`
 			);
 		} else if (
 			!CSSStyleDeclarationValueParser.getInitial(properties['background-position-x'].value) &&
@@ -409,6 +401,22 @@ export default class CSSStyleDeclarationPropertyGetParser {
 			);
 		}
 
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-repeat'].value)) {
+			values.push(properties['background-repeat'].value);
+		}
+
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-attachment'].value)) {
+			values.push(properties['background-attachment'].value);
+		}
+
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-origin'].value)) {
+			values.push(properties['background-origin'].value);
+		}
+
+		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-clip'].value)) {
+			values.push(properties['background-clip'].value);
+		}
+
 		if (!CSSStyleDeclarationValueParser.getInitial(properties['background-color'].value)) {
 			values.push(properties['background-color'].value);
 		}
@@ -452,9 +460,17 @@ export default class CSSStyleDeclarationPropertyGetParser {
 			};
 		}
 
+		const positionX = properties['background-position-x'].value.replace(/ *, */g, ',').split(',');
+		const positionY = properties['background-position-y'].value.replace(/ *, */g, ',').split(',');
+		const parts = [];
+
+		for (let i = 0; i < positionX.length; i++) {
+			parts.push(`${positionX[i]} ${positionY[i]}`);
+		}
+
 		return {
 			important,
-			value: `${properties['background-position-x'].value} ${properties['background-position-y'].value}`
+			value: parts.join(', ')
 		};
 	}
 

diff --git a/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts b/packages/happy-dom/src/css/declaration/utilities/CSSStyleDeclarationPropertyManager.ts
@@ -388,30 +388,30 @@ export default class CSSStyleDeclarationPropertyManager {
 			case 'padding-top':
 				properties = CSSStyleDeclarationPropertySetParser.getPaddingTop(value, important);
 				break;
+			case 'padding-right':
+				properties = CSSStyleDeclarationPropertySetParser.getPaddingRight(value, important);
+				break;
 			case 'padding-bottom':
 				properties = CSSStyleDeclarationPropertySetParser.getPaddingBottom(value, important);
 				break;
 			case 'padding-left':
 				properties = CSSStyleDeclarationPropertySetParser.getPaddingLeft(value, important);
 				break;
-			case 'padding-right':
-				properties = CSSStyleDeclarationPropertySetParser.getPaddingRight(value, important);
-				break;
 			case 'margin':
 				properties = CSSStyleDeclarationPropertySetParser.getMargin(value, important);
 				break;
 			case 'margin-top':
 				properties = CSSStyleDeclarationPropertySetParser.getMarginTop(value, important);
 				break;
+			case 'margin-right':
+				properties = CSSStyleDeclarationPropertySetParser.getMarginRight(value, important);
+				break;
 			case 'margin-bottom':
 				properties = CSSStyleDeclarationPropertySetParser.getMarginBottom(value, important);
 				break;
 			case 'margin-left':
 				properties = CSSStyleDeclarationPropertySetParser.getMarginLeft(value, important);
 				break;
-			case 'margin-right':
-				properties = CSSStyleDeclarationPropertySetParser.getMarginRight(value, important);
-				break;
 			case 'background':
 				properties = CSSStyleDeclarationPropertySetParser.getBackground(value, important);
 				break;