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

Revert "fix(animations): allow computeStyle to work on elements created in Node (#35810)" (#35847) 

This reverts commit 17cf04ebea6a7d2857881c13140af4ba0ffb6990;
breaking internal tests.

PR Close #35847
This commit is contained in:
Andrew Scott 2020-03-03 16:00:42 -08:00
parent 603ab40e85
commit 3ce5be7715
2 changed files with 7 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/animations/browser/src/render/shared.ts
View File

@ -248,12 +248,12 @@ export function hypenatePropsObject(object: {[key: string]: any}): {[key: string
* for that.
*/
export function computeStyle(element: HTMLElement, prop: string): string {
const styles = window.getComputedStyle(element);
const gcs = window.getComputedStyle(element);
// this is casted to any because the `CSSStyleDeclaration` type is a fixed
// set of properties and `prop` is a dynamic reference to a property within
// the `CSSStyleDeclaration` list.
let value = getComputedValue(styles, prop as keyof CSSStyleDeclaration);
let value = gcs[prop as any];
// Firefox returns empty string values for `margin` and `padding` properties
// when extracted using getComputedStyle (see similar issue here:
@ -261,30 +261,13 @@ export function computeStyle(element: HTMLElement, prop: string): string {
// we want to emulate the value that is returned by creating the top,
// right, bottom and left properties as individual style lookups.
if (value.length === 0 && (prop === 'margin' || prop === 'padding')) {
const t = getComputedValue(styles, (prop + 'Top') as 'marginTop' | 'paddingTop');
const r = getComputedValue(styles, (prop + 'Right') as 'marginRight' | 'paddingRight');
const b = getComputedValue(styles, (prop + 'Bottom') as 'marginBottom' | 'paddingBottom');
const l = getComputedValue(styles, (prop + 'Left') as 'marginLeft' | 'paddingLeft');
// reconstruct the padding/margin value as `top right bottom left`
// we `trim()` the value because if all of the values above are
// empty string values then we would like the return value to
// also be an empty string.
value = `${t} ${r} ${b} ${l}`.trim();
const propTop = (prop + 'Top') as 'marginTop' | 'paddingTop';
const propRight = (prop + 'Right') as 'marginRight' | 'paddingRight';
const propBottom = (prop + 'Bottom') as 'marginBottom' | 'paddingBottom';
const propLeft = (prop + 'Left') as 'marginLeft' | 'paddingLeft';
value = `${gcs[propTop]} ${gcs[propRight]} ${gcs[propBottom]} ${gcs[propLeft]}`;
}
return value;
}
/**
* Reads and returns the provided property style from the provided styles collection.
*
* This function is useful because it will return an empty string in the
* event that the value obtained from the styles collection is a non-string
* value (which is usually the case if the `styles` object is mocked out).
*/
function getComputedValue<K extends keyof CSSStyleDeclaration>(
styles: CSSStyleDeclaration, prop: K): string {
const value = styles[prop];
return typeof value === 'string' ? value : '';
}

9
packages/animations/browser/test/render/shared_spec.ts
View File

@ -11,15 +11,6 @@ describe('shared animations code', () => {
if (isNode) return;
describe('computeStyle', () => {
it('should return an empty string if the inner computed style value is not a string', () => {
const gcsSpy = spyOn(window, 'getComputedStyle').and.returnValue(() => null);
const elementLike = buildActualElement();
expect(computeStyle(elementLike, 'width')).toEqual('');
expect(computeStyle(elementLike, 'padding')).toEqual('');
expect(computeStyle(elementLike, 'margin')).toEqual('');
gcsSpy.and.callThrough();
});
it('should compute the margin style into the form top,right,bottom,left', () => {
const div = buildActualElement();