bug(Overlay): FlexibleConnectedPositionStrategy withViewportMargin not working

[Twazny]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using overlay with FlexibleConnectedPositionStrategy and withViewportMargin(), overlay ignores provided margin value and still opens in first preffered position, when it should move to second one. Overlay cant be pushed and has no flexible dimmensions set.

Reproduction

https://stackblitz.com/edit/viewport-margin-bug?file=src%2Fapp%2Fapp.component.ts
(Red line shows 100px margin edge)

Steps to reproduce:

1. Create overlay with popup 100px x 100px
2. Locate its origin point 150px from top edge of viewport.
3. Add two positions to FlexibleConnectedPositionStrategy:

           {
            originX: 'end',
            originY: 'top',
            overlayX: 'start',
            overlayY: 'bottom',
          },
          {
            originX: 'end',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
          },

4. Use withViewportMargin(100).
5. Use withFlexibleDimensions(false)
6. Use withPush(false)

Expected Behavior

Since withViewPortMargin(100) was set, and overlay cannot be pushed or shrinked, then it should fallback to second preffered position in which popup opens downwards.

          {
            originX: 'end',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
          },

Actual Behavior

Overlay still opens according to first position which is upward, ignoring viewport margin

Environment

• Angular: 13.1.3
• CDK/Material: 13.1.3
• Browser(s): Chrome 97
• Operating System (e.g. Windows, macOS, Ubuntu): macOS