diff --git a/packages/core/test/dom/dom_adapter_spec.ts b/packages/core/test/dom/dom_adapter_spec.ts index 03a666963a9bf..c2b06accc8a78 100644 --- a/packages/core/test/dom/dom_adapter_spec.ts +++ b/packages/core/test/dom/dom_adapter_spec.ts @@ -74,6 +74,12 @@ import {el, stringifyElement} from '@angular/platform-browser/testing/src/browse expect(getDOM().getStyle(d, 'background-url')).toBe('url(http://test.com/bg.jpg)'); }); + it('should parse camel-case styles correctly', () => { + const d = getDOM().createElement('div'); + getDOM().setStyle(d, 'marginRight', '10px'); + expect(getDOM().getStyle(d, 'margin-right')).toBe('10px'); + }); + if (getDOM().supportsDOMEvents()) { describe('getBaseHref', () => { beforeEach(() => getDOM().resetBaseElement()); diff --git a/packages/platform-server/src/domino_adapter.ts b/packages/platform-server/src/domino_adapter.ts index 0f09146528a4b..15d0484b28fa7 100644 --- a/packages/platform-server/src/domino_adapter.ts +++ b/packages/platform-server/src/domino_adapter.ts @@ -135,48 +135,20 @@ export class DominoAdapter extends BrowserDomAdapter { return href; } - /** @internal */ - _readStyleAttribute(element: any) { - const styleMap = {}; - const styleAttribute = element.getAttribute('style'); - if (styleAttribute) { - const styleList = styleAttribute.split(/;+/g); - for (let i = 0; i < styleList.length; i++) { - if (styleList[i].length > 0) { - 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(); - } - } - } - return styleMap; - } - /** @internal */ - _writeStyleAttribute(element: any, styleMap: any) { - let styleAttrValue = ''; - for (const key in styleMap) { - const newValue = styleMap[key]; - if (newValue) { - styleAttrValue += key + ':' + styleMap[key] + ';'; - } - } - element.setAttribute('style', styleAttrValue); - } setStyle(element: any, styleName: string, styleValue?: string|null) { - const styleMap = this._readStyleAttribute(element); - (styleMap as any)[styleName] = styleValue; - this._writeStyleAttribute(element, styleMap); + styleName = styleName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase(); + element.style[styleName] = styleValue; + } + removeStyle(element: any, styleName: string) { + // IE requires '' instead of null + // see https://github.com/angular/angular/issues/7916 + element.style[styleName] = ''; } - removeStyle(element: any, styleName: string) { this.setStyle(element, styleName, null); } getStyle(element: any, styleName: string): string { - const styleMap = this._readStyleAttribute(element); - return styleMap.hasOwnProperty(styleName) ? (styleMap as any)[styleName] : ''; + return element.style[styleName] || element.style.getPropertyValue(styleName); } hasStyle(element: any, styleName: string, styleValue?: string): boolean { - const value = this.getStyle(element, styleName) || ''; + const value = this.getStyle(element, styleName); return styleValue ? value == styleValue : value.length > 0; } @@ -206,4 +178,4 @@ export class DominoAdapter extends BrowserDomAdapter { supportsCookies(): boolean { return false; } getCookie(name: string): string { throw _notImplemented('getCookie'); } setCookie(name: string, value: string) { throw _notImplemented('setCookie'); } -} \ No newline at end of file +}