fix(overlay): don't reset global overlay alignment when width is 100% and there's a maxWidth (#17842)

A long time ago we introduced some logic that clears the `justifyContent` from a global overlay if it's `width` is set to 100%, in order to ensure that the element is flush against the viewport edge. Some time later we added a `maxWidth` option, but we never accounted for it which means that if an element is set to be `width: 100%; maxWidth: '500px'`, we'll reset the alignment incorrectly. These changes tweak the logic so it only resets if there is no `maxWidth` or if it's set to 100%.

Fixes #17841.

Author: crisbeto

src/cdk/overlay/position/global-position-strategy.spec.ts

@@ -195,7 +195,7 @@ describe('GlobalPositonStrategy', () => {
     attachOverlay({
       positionStrategy: overlay.position()
         .global()
-        .centerHorizontally()
+        .centerHorizontally('10px')
         .width('100%')
     });
 
@@ -206,11 +206,45 @@ describe('GlobalPositonStrategy', () => {
     expect(parentStyle.justifyContent).toBe('flex-start');
   });
 
+  it('should reset the horizontal position and offset when the width is 100% and the ' +
+    'maxWidth is 100%', () => {
+      attachOverlay({
+        maxWidth: '100%',
+        positionStrategy: overlay.position()
+          .global()
+          .centerHorizontally('10px')
+          .width('100%')
+      });
+
+      const elementStyle = overlayRef.overlayElement.style;
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+
+      expect(elementStyle.marginLeft).toBe('0px');
+      expect(parentStyle.justifyContent).toBe('flex-start');
+    });
+
+  it('should not reset the horizontal position and offset when the width is 100% and' +
+    'there is a defined maxWidth', () => {
+      attachOverlay({
+        maxWidth: '500px',
+        positionStrategy: overlay.position()
+          .global()
+          .centerHorizontally('10px')
+          .width('100%')
+      });
+
+      const elementStyle = overlayRef.overlayElement.style;
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+
+      expect(elementStyle.marginLeft).toBe('10px');
+      expect(parentStyle.justifyContent).toBe('center');
+    });
+
   it('should reset the vertical position and offset when the height is 100%', () => {
     attachOverlay({
       positionStrategy: overlay.position()
         .global()
-        .centerVertically()
+        .centerVertically('10px')
         .height('100%')
     });
 
@@ -221,6 +255,40 @@ describe('GlobalPositonStrategy', () => {
     expect(parentStyle.alignItems).toBe('flex-start');
   });
 
+  it('should reset the vertical position and offset when the height is 100% and the ' +
+    'maxHeight is 100%', () => {
+      attachOverlay({
+        maxHeight: '100%',
+        positionStrategy: overlay.position()
+          .global()
+          .centerVertically('10px')
+          .height('100%')
+      });
+
+      const elementStyle = overlayRef.overlayElement.style;
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+
+      expect(elementStyle.marginTop).toBe('0px');
+      expect(parentStyle.alignItems).toBe('flex-start');
+    });
+
+  it('should not reset the vertical position and offset when the height is 100% and ' +
+    'there is a defined maxHeight', () => {
+      attachOverlay({
+        maxHeight: '500px',
+        positionStrategy: overlay.position()
+          .global()
+          .centerVertically('10px')
+          .height('100%')
+      });
+
+      const elementStyle = overlayRef.overlayElement.style;
+      const parentStyle = (overlayRef.overlayElement.parentNode as HTMLElement).style;
+
+      expect(elementStyle.marginTop).toBe('10px');
+      expect(parentStyle.alignItems).toBe('center');
+    });
+
   it('should not throw when attempting to apply after the overlay has been disposed', () => {
     const positionStrategy = overlay.position().global();
 

src/cdk/overlay/position/global-position-strategy.ts

@@ -164,14 +164,19 @@ export class GlobalPositionStrategy implements PositionStrategy {
     const styles = this._overlayRef.overlayElement.style;
     const parentStyles = this._overlayRef.hostElement.style;
     const config = this._overlayRef.getConfig();
+    const {width, height, maxWidth, maxHeight} = config;
+    const shouldBeFlushHorizontally = (width === '100%' || width === '100vw') &&
+                                      (!maxWidth || maxWidth === '100%' || maxWidth === '100vw');
+    const shouldBeFlushVertically = (height === '100%' || height === '100vh') &&
+                                    (!maxHeight || maxHeight === '100%' || maxHeight === '100vh');
 
     styles.position = this._cssPosition;
-    styles.marginLeft = config.width === '100%' ? '0' : this._leftOffset;
-    styles.marginTop = config.height === '100%' ? '0' : this._topOffset;
+    styles.marginLeft = shouldBeFlushHorizontally ? '0' : this._leftOffset;
+    styles.marginTop = shouldBeFlushVertically ? '0' : this._topOffset;
     styles.marginBottom = this._bottomOffset;
     styles.marginRight = this._rightOffset;
 
-    if (config.width === '100%') {
+    if (shouldBeFlushHorizontally) {
       parentStyles.justifyContent = 'flex-start';
     } else if (this._justifyContent === 'center') {
       parentStyles.justifyContent = 'center';
@@ -189,7 +194,7 @@ export class GlobalPositionStrategy implements PositionStrategy {
       parentStyles.justifyContent = this._justifyContent;
     }
 
-    parentStyles.alignItems = config.height === '100%' ? 'flex-start' : this._alignItems;
+    parentStyles.alignItems = shouldBeFlushVertically ? 'flex-start' : this._alignItems;
   }
 
   /**