preserve original url in style

capricorn86 · Nov 10, 2024 · 6acc952 · 6acc952
1 parent f3c9b9a
commit 6acc952
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueParser.ts b/packages/happy-dom/src/css/declaration/property-manager/CSSStyleDeclarationValueParser.ts
@@ -384,11 +384,13 @@ export default class CSSStyleDeclarationValueParser {
 
 		let url = result[1].trim();
 
-		if ((url[0] === '"' || url[0] === "'") && url[0] !== url[url.length - 1]) {
+		const hasQuotes = url[0] === '"' || url[0] === "'";
+
+		if (hasQuotes && url[0] !== url[url.length - 1]) {
 			return null;
 		}
 
-		if (url[0] === '"' || url[0] === "'") {
+		if (hasQuotes) {
 			url = url.substring(1, url.length - 1);
 		}
 
@@ -408,7 +410,11 @@ export default class CSSStyleDeclarationValueParser {
 			}
 		}
 
-		return `url("${url}")`;
+		if (hasQuotes) {
+			url = `"${url}"`;
+		}
+
+		return `url(${url})`;
 	}
 
 	/**

diff --git a/packages/happy-dom/test/css/CSSParser.test.ts b/packages/happy-dom/test/css/CSSParser.test.ts
@@ -41,7 +41,7 @@ describe('CSSParser', () => {
 			expect((<CSSStyleRule>cssRules[1]).parentStyleSheet).toBe(cssStyleSheet);
 			expect((<CSSStyleRule>cssRules[1]).selectorText).toBe('.container');
 			expect((<CSSStyleRule>cssRules[1]).cssText).toBe(
-				'.container { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; --css-variable: 1px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url("test.jpg"); }'
+				'.container { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; --css-variable: 1px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url(test.jpg); }'
 			);
 			expect((<CSSStyleRule>cssRules[1]).style.length).toBe(6);
 			expect((<CSSStyleRule>cssRules[1]).style.parentRule).toBe(cssRules[1]);
@@ -57,10 +57,10 @@ describe('CSSParser', () => {
 			expect((<CSSStyleRule>cssRules[1]).style.overflow).toBe('hidden');
 			expect((<CSSStyleRule>cssRules[1]).style.getPropertyValue('--css-variable')).toBe('1px');
 			expect((<CSSStyleRule>cssRules[1]).style.backgroundImage).toBe(
-				'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url("test.jpg")'
+				'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url(test.jpg)'
 			);
 			expect((<CSSStyleRule>cssRules[1]).style.cssText).toBe(
-				'flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; --css-variable: 1px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url("test.jpg");'
+				'flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; --css-variable: 1px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII="), url(test.jpg);'
 			);
 
 			// CSSMediaRule

diff --git a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts
@@ -2019,19 +2019,19 @@ describe('CSSStyleDeclaration', () => {
 
 			element.setAttribute('style', 'background-image: url(test.jpg)');
 
-			expect(declaration.backgroundImage).toBe('url("test.jpg")');
+			expect(declaration.backgroundImage).toBe('url(test.jpg)');
 
 			element.setAttribute('style', 'background-image: url(test.jpg),  url(test2.jpg)');
 
-			expect(declaration.backgroundImage).toBe('url("test.jpg"), url("test2.jpg")');
+			expect(declaration.backgroundImage).toBe('url(test.jpg), url(test2.jpg)');
 
 			element.setAttribute(
 				'style',
 				'background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=)'
 			);
 
 			expect(declaration.backgroundImage).toBe(
-				'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=")'
+				'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=)'
 			);
 		});
 	});