From 551289b6ab40bec5eb5101c642759cbc47e8e0e6 Mon Sep 17 00:00:00 2001
From: david catalan <catalan@adobe.com>
Date: Tue, 4 Jun 2024 17:39:04 +0200
Subject: [PATCH] fix: handle complex background image css property

---
 src/utils/DOMUtils.js       | 4 ++--
 test/utils/DOMUtils.spec.js | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/utils/DOMUtils.js b/src/utils/DOMUtils.js
index d59bd73..c384497 100644
--- a/src/utils/DOMUtils.js
+++ b/src/utils/DOMUtils.js
@@ -261,9 +261,9 @@ export default class DOMUtils {
         const prop = split.shift();
         const value = split.join(':').trim();
         if (prop === 'background-image') {
-          const trimmedValue = value.replace(/\s/g, '');
+          const sanitizedValue = value.replace(/\s/g, '').split(',').shift();
           const elStyle = element.style;
-          elStyle.backgroundImage = trimmedValue;
+          elStyle.backgroundImage = sanitizedValue;
         }
       });
       const url = element.style.backgroundImage;
diff --git a/test/utils/DOMUtils.spec.js b/test/utils/DOMUtils.spec.js
index f38e393..75c339a 100644
--- a/test/utils/DOMUtils.spec.js
+++ b/test/utils/DOMUtils.spec.js
@@ -423,6 +423,10 @@ describe('DOMUtils#getImgFromBackground', () => {
     test(createElement('p', {}, { 'background-image': 'url(http://localhost:3001/image.jpg)' }, 'Some content'), '<img src="http://localhost:3001/image.jpg">');
   });
 
+  it('with complex background-image style', () => {
+    test(createElement('p', { style: 'background-image:url("https://www.server.com/image.jpg"), linear-gradient(transparent, transparent);' }, {}, 'Some content'), '<img src="https://www.server.com/image.jpg">');
+  });
+
   // `createElement` uses JSDOM to create the test-DOM
   // the workaround in DOMUtils#getImgFromBackground exists _precisely_
   // because of a potential bug in JSDOM due to which it doesn't