fix(common): skip checking whether SVGs are oversized (#57966)

arturovt · alxhub · commit 8f2b0ede5962 · 2024-09-30T13:28:46.000-07:00
Prior to this commit, the `ImagePerformanceWarning` class was checking all `img` elements in the DOM to determine whether they were oversized after the DOM loading was complete. We should not check SVGs because they are vector-based and can scale infinitely without losing quality. Closes #57941 PR Close #57966
diff --git a/packages/core/src/image_performance_warning.ts b/packages/core/src/image_performance_warning.ts
@@ -140,6 +140,28 @@ export class ImagePerformanceWarning implements OnDestroy {
     if (!this.window) {
       return false;
     }
+
+    // The `isOversized` check may not be applicable or may require adjustments
+    // for several types of image formats or scenarios. Currently, we specify only
+    // `svg`, but this may also include `gif` since their quality isn’t tied to
+    // dimensions in the same way as raster images.
+    const nonOversizedImageExtentions = [
+      // SVG images are vector-based, which means they can scale
+      // to any size without losing quality.
+      '.svg',
+    ];
+
+    // Convert it to lowercase because this may have uppercase
+    // extensions, such as `IMAGE.SVG`.
+    // We fallback to an empty string because `src` may be `undefined`
+    // if it is explicitly set to `null` by some third-party code
+    // (e.g., `image.src = null`).
+    const imageSource = (image.src || '').toLowerCase();
+
+    if (nonOversizedImageExtentions.some((extension) => imageSource.endsWith(extension))) {
+      return false;
+    }
+
     const computedStyle = this.window.getComputedStyle(image);
     let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
     let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
@@ -153,6 +175,8 @@ export class ImagePerformanceWarning implements OnDestroy {
     }
 
     if (boxSizing === 'border-box') {
+      // If the image `box-sizing` is set to `border-box`, we adjust the rendered
+      // dimensions by subtracting padding values.
       const paddingTop = computedStyle.getPropertyValue('padding-top');
       const paddingRight = computedStyle.getPropertyValue('padding-right');
       const paddingBottom = computedStyle.getPropertyValue('padding-bottom');
diff --git a/packages/core/test/bundling/image-directive/BUILD.bazel b/packages/core/test/bundling/image-directive/BUILD.bazel
@@ -10,6 +10,7 @@ ng_module(
         "e2e/image-distortion/image-distortion.ts",
         "e2e/image-perf-warnings-lazy/image-perf-warnings-lazy.ts",
         "e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.ts",
+        "e2e/image-perf-warnings-oversized/svg-no-perf-oversized-warnings.ts",
         "e2e/lcp-check/lcp-check.ts",
         "e2e/oversized-image/oversized-image.ts",
         "e2e/preconnect-check/preconnect-check.ts",
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/image-perf-warnings-oversized.e2e-spec.ts
@@ -24,4 +24,16 @@ describe('Image performance warnings', () => {
     const expectedMessageRegex = /has intrinsic file dimensions much larger than/;
     expect(expectedMessageRegex.test(logs[0].message)).toBeTruthy();
   });
+
+  // https://github.com/angular/angular/issues/57941
+  it('should NOT warn if rendered SVG image size is much smaller that intrinsic size', async () => {
+    await browser.get('/e2e/svg-no-perf-oversized-warnings');
+    // Wait for load event
+    await new Promise((resolve) => setTimeout(resolve, 600));
+
+    const logs = await collectBrowserLogs(logging.Level.WARNING);
+    // Please note that prior to shipping the fix, it was logging a warning
+    // for the SVG image (see the attached issue above).
+    expect(logs.length).toEqual(0);
+  });
 });
diff --git a/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/svg-no-perf-oversized-warnings.ts b/packages/core/test/bundling/image-directive/e2e/image-perf-warnings-oversized/svg-no-perf-oversized-warnings.ts
@@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'svg-no-perf-oversized-warnings',
+  standalone: true,
+  template: `
+      <!-- Image is rendered too small  -->
+      <div style="width: 200px; height: 200px">
+         <img src="/e2e/logo-1500w.svg" width="100" height="100">
+       </div>
+      `,
+})
+export class SvgNoOversizedPerfWarningsComponent {}
diff --git a/packages/core/test/bundling/image-directive/e2e/logo-1500w.svg b/packages/core/test/bundling/image-directive/e2e/logo-1500w.svg
diff --git a/packages/core/test/bundling/image-directive/index.ts b/packages/core/test/bundling/image-directive/index.ts
