From 6acc952c0518928342119e3bd5755ba8e01b9980 Mon Sep 17 00:00:00 2001 From: Ivan Radonov Date: Sun, 10 Nov 2024 11:43:08 +0200 Subject: [PATCH] preserve original url in style --- .../CSSStyleDeclarationValueParser.ts | 12 +++++++++--- packages/happy-dom/test/css/CSSParser.test.ts | 6 +++--- .../test/css/declaration/CSSStyleDeclaration.test.ts | 6 +++--- 3 files changed, 15 insertions(+), 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 index 2975f417a..39ef62f95 100644 --- 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 index 262f8a68e..6f8faeb76 100644 --- 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((cssRules[1]).parentStyleSheet).toBe(cssStyleSheet); expect((cssRules[1]).selectorText).toBe('.container'); expect((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((cssRules[1]).style.length).toBe(6); expect((cssRules[1]).style.parentRule).toBe(cssRules[1]); @@ -57,10 +57,10 @@ describe('CSSParser', () => { expect((cssRules[1]).style.overflow).toBe('hidden'); expect((cssRules[1]).style.getPropertyValue('--css-variable')).toBe('1px'); expect((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((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 index 757885e78..468de77cd 100644 --- a/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts +++ b/packages/happy-dom/test/css/declaration/CSSStyleDeclaration.test.ts @@ -2019,11 +2019,11 @@ 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', @@ -2031,7 +2031,7 @@ describe('CSSStyleDeclaration', () => { ); expect(declaration.backgroundImage).toBe( - 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=")' + 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=)' ); }); });