fix(platform-server): handle styles with extra ':'s correctly (#15189)

Previously, style values were parsed with a regex that split on /:+/.

This causes errors for CSS such as

div {
  background-url: url(http://server.com/img.png);
}

since the regex would split the background-url line into 3 values instead of 2.

Now, the : character is detected with indexOf, avoiding this error.

A test was added to verify the behavior is correct.
This commit is contained in:
Alex Rickabaugh 2017-03-15 17:13:32 -07:00 committed by Chuck Jazdzewski
parent 6e98757665
commit 013d806b79
2 changed files with 12 additions and 2 deletions

View File

@ -68,6 +68,12 @@ export function main() {
expect(() => getDOM().remove(d)).not.toThrow();
});
it('should parse styles with urls correctly', () => {
const d = getDOM().createElement('div');
getDOM().setStyle(d, 'background-url', 'url(http://test.com/bg.jpg)');
expect(getDOM().getStyle(d, 'background-url')).toBe('url(http://test.com/bg.jpg)');
});
if (getDOM().supportsDOMEvents()) {
describe('getBaseHref', () => {
beforeEach(() => getDOM().resetBaseElement());

View File

@ -427,8 +427,12 @@ export class Parse5DomAdapter extends DomAdapter {
const styleList = styleAttrValue.split(/;+/g);
for (let i = 0; i < styleList.length; i++) {
if (styleList[i].length > 0) {
const elems = styleList[i].split(/:+/g);
(styleMap as any)[elems[0].trim()] = elems[1].trim();
const style = styleList[i] as string;
const colon = style.indexOf(':');
if (colon === -1) {
throw new Error(`Invalid CSS style: ${style}`);
}
(styleMap as any)[style.substr(0, colon).trim()] = style.substr(colon + 1).trim();
}
}
}