From 487dc944f96ac88a2f46dc262d70f7a9418c10c6 Mon Sep 17 00:00:00 2001
From: Alex Castle <atcastle@gmail.com>
Date: Thu, 20 Oct 2022 10:46:09 -0700
Subject: [PATCH] fix(common): Don't warn about image distortion is fill mode
 is enabled (#47824)

The image distortion warning (when rendered aspect ratio is noticeably different than intrinsic) doesn't make sense with fill mode, where the user may want the image to stretch, crop or letterbox.

PR Close #47824
---
 .../src/directives/ng_optimized_image/ng_optimized_image.ts   | 4 +++-
 .../image-directive/e2e/image-distortion/image-distortion.ts  | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
index de5057706b3288..e7e57482d1b7ff 100644
--- a/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
+++ b/packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
@@ -367,9 +367,11 @@ export class NgOptimizedImage implements OnInit, OnChanges, OnDestroy {
         assertEmptyWidthAndHeight(this);
       } else {
         assertNonEmptyWidthAndHeight(this);
+        // Only check for distorted images when not in fill mode, where
+        // images may be intentionally stretched, cropped or letterboxed.
+        assertNoImageDistortion(this, this.imgElement, this.renderer);
       }
       assertValidLoadingInput(this);
-      assertNoImageDistortion(this, this.imgElement, this.renderer);
       if (!this.ngSrcset) {
         assertNoComplexSizes(this);
       }
diff --git a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
index ef34535742d1bf..b7d26615915020 100644
--- a/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
+++ b/packages/core/test/bundling/image-directive/e2e/image-distortion/image-distortion.ts
@@ -36,6 +36,10 @@ import {Component} from '@angular/core';
      <!-- Aspect-ratio: 1.0652173913 -->
      <img ngSrc="/e2e/b.png" width="245" height="230">
      <br>
+     <!-- Fill mode disables aspect ratio warning -->
+     <!-- Aspect-ratio: 0.1 -->
+     <img ngSrc="/e2e/b.png" width="24" height="240" disableOptimizedSrcset fill>
+     <br>
      <!-- Supplied aspect ratio is correct & image has 0x0 rendered size -->
      <img ngSrc="/e2e/a.png" width="25" height="25" style="display: none">
      <br>