diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts index 3e31edf5193..dfb3b9131c6 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts @@ -1187,6 +1187,109 @@ describe('FlexibleConnectedPositionStrategy', () => { window.scroll(0, 0); document.body.removeChild(veryLargeElement); }); + it('should set the proper styles when the `bottom` value is exactly zero', () => { + originElement.style.position = 'fixed'; + originElement.style.bottom = '0'; + originElement.style.left = '200px'; + + positionStrategy + .withFlexibleWidth() + .withFlexibleHeight() + .withPositions([{ + overlayY: 'bottom', + overlayX: 'start', + originY: 'bottom', + originX: 'start' + }]); + + attachOverlay({positionStrategy}); + + const boundingBox = overlayContainer + .getContainerElement() + .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement; + + // Ensure that `0px` is set explicitly, rather than the + // property being left blank due to zero being falsy. + expect(boundingBox.style.bottom).toBe('0px'); + }); + + it('should set the proper styles when the `top` value is exactly zero', () => { + originElement.style.position = 'fixed'; + originElement.style.top = '0'; + originElement.style.left = '200px'; + + positionStrategy + .withFlexibleWidth() + .withFlexibleHeight() + .withPositions([{ + overlayY: 'top', + overlayX: 'start', + originY: 'top', + originX: 'start' + }]); + + attachOverlay({positionStrategy}); + + const boundingBox = overlayContainer + .getContainerElement() + .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement; + + // Ensure that `0px` is set explicitly, rather than the + // property being left blank due to zero being falsy. + expect(boundingBox.style.top).toBe('0px'); + }); + + it('should set the proper styles when the `left` value is exactly zero', () => { + originElement.style.position = 'fixed'; + originElement.style.left = '0'; + originElement.style.top = '200px'; + + positionStrategy + .withFlexibleWidth() + .withFlexibleHeight() + .withPositions([{ + overlayY: 'top', + overlayX: 'start', + originY: 'top', + originX: 'start' + }]); + + attachOverlay({positionStrategy}); + + const boundingBox = overlayContainer + .getContainerElement() + .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement; + + // Ensure that `0px` is set explicitly, rather than the + // property being left blank due to zero being falsy. + expect(boundingBox.style.left).toBe('0px'); + }); + + it('should set the proper styles when the `right` value is exactly zero', () => { + originElement.style.position = 'fixed'; + originElement.style.right = '0'; + originElement.style.top = '200px'; + + positionStrategy + .withFlexibleWidth() + .withFlexibleHeight() + .withPositions([{ + overlayY: 'top', + overlayX: 'end', + originY: 'top', + originX: 'end' + }]); + + attachOverlay({positionStrategy}); + + const boundingBox = overlayContainer + .getContainerElement() + .querySelector('.cdk-overlay-connected-position-bounding-box') as HTMLElement; + + // Ensure that `0px` is set explicitly, rather than the + // property being left blank due to zero being falsy. + expect(boundingBox.style.right).toBe('0px'); + }); }); diff --git a/src/cdk/overlay/position/flexible-connected-position-strategy.ts b/src/cdk/overlay/position/flexible-connected-position-strategy.ts index e1aa0bb9d83..9a6513c66cc 100644 --- a/src/cdk/overlay/position/flexible-connected-position-strategy.ts +++ b/src/cdk/overlay/position/flexible-connected-position-strategy.ts @@ -642,8 +642,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { styles.height = '100%'; } else { styles.height = `${boundingBoxRect.height}px`; - styles.top = boundingBoxRect.top ? `${boundingBoxRect.top}px` : ''; - styles.bottom = boundingBoxRect.bottom ? `${boundingBoxRect.bottom}px` : ''; + styles.top = boundingBoxRect.top != null ? `${boundingBoxRect.top}px` : ''; + styles.bottom = boundingBoxRect.bottom != null ? `${boundingBoxRect.bottom}px` : ''; } if (!this._hasFlexibleWidth || this._isPushed) { @@ -652,8 +652,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy { styles.width = '100%'; } else { styles.width = `${boundingBoxRect.width}px`; - styles.left = boundingBoxRect.left ? `${boundingBoxRect.left}px` : ''; - styles.right = boundingBoxRect.right ? `${boundingBoxRect.right}px` : ''; + styles.left = boundingBoxRect.left != null ? `${boundingBoxRect.left}px` : ''; + styles.right = boundingBoxRect.right != null ? `${boundingBoxRect.right}px` : ''; } const maxHeight = this._overlayRef.getConfig().maxHeight;