Fix Polymer#5693: CSS url parameter issue when it includes quotes

jpradelle · Oct 7, 2021 · c9f36f2 · c9f36f2
1 parent 10220c9
commit c9f36f2
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/lib/utils/resolve-url.js b/lib/utils/resolve-url.js
@@ -77,6 +77,10 @@ export function resolveUrl(url, baseURI) {
  */
 export function resolveCss(cssText, baseURI) {
   return cssText.replace(CSS_URL_RX, function(m, pre, url, post) {
+    // No resolution for data: urls
+    if (url.match(/^["']?data:/)) {
+      return pre + url + post;
+    }
     return pre + '\'' +
       resolveUrl(url.replace(/["']/g, ''), baseURI) +
       '\'' + post;

diff --git a/test/unit/resolveurl.html b/test/unit/resolveurl.html
@@ -30,6 +30,9 @@
         :host {
           background: url('foo.png');
         }
+        .inline-csv {
+          background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><circle cx='5' cy='5' r='4'/></svg>");
+        }
       </style>
       <img id="root" src$="[[rootPath]]foo.png">
       <img id="import" src$="[[importPath]]foo.png">
@@ -125,6 +128,7 @@
     var matchImport = /defineImport\//i;
     var style = el.shadowRoot.querySelector('style') || document.querySelector('style[scope=x-late]');
     assert.match(style.textContent, matchImport);
+    assert.match(style.textContent, /url\("data:image\/svg\+xml;utf8,<svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='10' height='10'><circle cx='5' cy='5' r='4'\/><\/svg>"\)/);
     assert.match(el.$.import.getAttribute('src'), matchImport);
     assert.match(el.$.root.getAttribute('src'), matchRoot);
     document.body.removeChild(el);