From 013d806b7919bdf3dd8d4a65e615a387fc20df44 Mon Sep 17 00:00:00 2001 From: Alex Rickabaugh Date: Wed, 15 Mar 2017 17:13:32 -0700 Subject: [PATCH] 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. --- packages/core/test/dom/dom_adapter_spec.ts | 6 ++++++ packages/platform-server/src/parse5_adapter.ts | 8 ++++++-- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/core/test/dom/dom_adapter_spec.ts b/packages/core/test/dom/dom_adapter_spec.ts index 14b62b01ee..d0149d9afd 100644 --- a/packages/core/test/dom/dom_adapter_spec.ts +++ b/packages/core/test/dom/dom_adapter_spec.ts @@ -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()); diff --git a/packages/platform-server/src/parse5_adapter.ts b/packages/platform-server/src/parse5_adapter.ts index 8b7f673f76..db4f7d65fd 100644 --- a/packages/platform-server/src/parse5_adapter.ts +++ b/packages/platform-server/src/parse5_adapter.ts @@ -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(); } } }