fix: handle complex background image css property

adobe · Jun 4, 2024 · 551289b · 551289b
1 parent 9bf404b
commit 551289b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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