Correctly parse quoted background URL values. #13

cburgmer · May 25, 2017 · 9418169 · 9418169
1 parent c8d84e4
commit 9418169
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/backgroundValueParser.js b/src/backgroundValueParser.js
@@ -12,7 +12,7 @@ var trimCSSWhitespace = function (url) {
 
 // TODO exporting this for the sake of unit testing. Should rather test the background value parser explicitly.
 exports.extractCssUrl = function (cssUrl) {
-    var urlRegex = /^url\(([^\)]+)\)/,
+    var urlRegex = /^url\(("[^"]+"|'[^']+'|[^\)]+)\)/,
         quotedUrl;
 
     if (!urlRegex.test(cssUrl)) {

diff --git a/test/specs/BackgroundValueParserSpec.js b/test/specs/BackgroundValueParserSpec.js
@@ -50,6 +50,16 @@ describe("Background value parser", function () {
             expect(url).toEqual("data:image/png;base64,soMEfAkebASE64=");
         });
 
+        it("should handle a data URI with closing bracket when quoted with double quotes", function () {
+            var url = backgroundValueParser.extractCssUrl('url("data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20height%3D%2210%22%20width%3D%2210%22%20style%3D%22transform%3A%20rotate(45deg)%3B%20fill%3A%20%2300f%22%2F%3E%3C%2Fsvg%3E")');
+            expect(url).toEqual('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20height%3D%2210%22%20width%3D%2210%22%20style%3D%22transform%3A%20rotate(45deg)%3B%20fill%3A%20%2300f%22%2F%3E%3C%2Fsvg%3E');
+        });
+
+        it("should handle a data URI with closing bracket when quoted with single quotes", function () {
+            var url = backgroundValueParser.extractCssUrl("url('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20height%3D%2210%22%20width%3D%2210%22%20style%3D%22transform%3A%20rotate(45deg)%3B%20fill%3A%20%2300f%22%2F%3E%3C%2Fsvg%3E')");
+            expect(url).toEqual('data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Crect%20height%3D%2210%22%20width%3D%2210%22%20style%3D%22transform%3A%20rotate(45deg)%3B%20fill%3A%20%2300f%22%2F%3E%3C%2Fsvg%3E');
+        });
+
         it("should throw an exception on invalid CSS URL", function () {
             expect(function () {
                 backgroundValueParser.extractCssUrl('invalid_stuff');