update url parsing logic to match current browsers

[skratchdot]

trafficstars

it would be nice if url parsing worked like latest firefox/chrome.

for instance, running the following snippet in those browsers:

(() => {
  var div = document.createElement('div');
  div.style.backgroundImage = '   url(http://some/url/here1.png)   , URL(2)  ';
  console.log(`backgroundImage:${div.style.backgroundImage};`);
})();

prints:

backgroundImage:url("http://some/url/here1.png"), url("2");

i've searched the code a bit, and think we can achieve this by modifying the following function: https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/parsers.js#L210-L247

we can also add some better unit tests here:

• https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/parsers.test.js#L63-L65
• https://github.com/jsdom/cssstyle/blob/f2db1ebef45c03b51787f5b9d00a3eb843f07787/lib/CSSStyleDeclaration.test.js#L377-L385

if i make the "formatted" string look like url("foo.png") instead of the current url(foo.png), then I could see that breaking people's existing tests (but it would "match" modern browsers more closely). If I just allow trailing/closing whitespace, and multiple urls, then that would be "more" backwards compatible I think.

I can work on this in the next few days and submit a PR. I have quite a few ideas on how to get it to work.

Thanks!

[jsakas]

@skratchdot thanks for the info. The spec calls for support of whitespace, single quotes, or double quotes in the URL field https://www.w3.org/TR/CSS2/syndata.html#uri.

It looks like chrome, ff, safari all return URLs in double quotes. I think if we did the work to support advanced syntax for this property it would make sense to make it match the return format also. That would be a backwards compatible API change and would have to be tagged accordingly.