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:
parent
d3827a0017
commit
40ba009e25
|
@ -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)');
|
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()) {
|
if (getDOM().supportsDOMEvents()) {
|
||||||
describe('getBaseHref', () => {
|
describe('getBaseHref', () => {
|
||||||
beforeEach(() => getDOM().resetBaseElement());
|
beforeEach(() => getDOM().resetBaseElement());
|
||||||
|
|
|
@ -135,48 +135,20 @@ export class DominoAdapter extends BrowserDomAdapter {
|
||||||
return href;
|
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) {
|
setStyle(element: any, styleName: string, styleValue?: string|null) {
|
||||||
const styleMap = this._readStyleAttribute(element);
|
styleName = styleName.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
|
||||||
(styleMap as any)[styleName] = styleValue;
|
element.style[styleName] = styleValue;
|
||||||
this._writeStyleAttribute(element, styleMap);
|
}
|
||||||
|
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 {
|
getStyle(element: any, styleName: string): string {
|
||||||
const styleMap = this._readStyleAttribute(element);
|
return element.style[styleName] || element.style.getPropertyValue(styleName);
|
||||||
return styleMap.hasOwnProperty(styleName) ? (styleMap as any)[styleName] : '';
|
|
||||||
}
|
}
|
||||||
hasStyle(element: any, styleName: string, styleValue?: string): boolean {
|
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;
|
return styleValue ? value == styleValue : value.length > 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -206,4 +178,4 @@ export class DominoAdapter extends BrowserDomAdapter {
|
||||||
supportsCookies(): boolean { return false; }
|
supportsCookies(): boolean { return false; }
|
||||||
getCookie(name: string): string { throw _notImplemented('getCookie'); }
|
getCookie(name: string): string { throw _notImplemented('getCookie'); }
|
||||||
setCookie(name: string, value: string) { throw _notImplemented('setCookie'); }
|
setCookie(name: string, value: string) { throw _notImplemented('setCookie'); }
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue