honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(platform-server): generate correct stylings for camel case names (#22263) 

* Add correct mapping from camel case to kebab case for CSS style
names
* Remove internal CSS methods in favor of native Domino APIs

Fixes #19235

PR Close #22263
This commit is contained in:
Adam Plumer 2018-02-23 14:33:19 -05:00 committed by Alex Eagle
parent d3827a0017
commit 40ba009e25
2 changed files with 16 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/core/test/dom/dom_adapter_spec.ts
View File

@ -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());

46
packages/platform-server/src/domino_adapter.ts
View File

@ -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;
}