fix(common): fix incorrectly reported distortion for padded images (#…

…49889)

The original code uses clientWidth and clientHeight which returns the
width and height of the element including the padding. This results in
the aspect ratio being determined incorrectly and the image distortion
warning triggering. The new code uses getComputedStyle which returns
the width and height without padding.

Another advantage of using getComputedStyle is that, unlike clientWidth
and clientHeight, the number returned is a decimal which provides
greater accuracy. This could allow for lowering the ASPECT_RATIO_TOLERANCE.

PR Close #49889

packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts

@@ -793,8 +793,20 @@ function assertNoImageDistortion(
     dir: NgOptimizedImage, img: HTMLImageElement, renderer: Renderer2) {
   const removeListenerFn = renderer.listen(img, 'load', () => {
     removeListenerFn();
-    const renderedWidth = img.clientWidth;
-    const renderedHeight = img.clientHeight;
+    const computedStyle = window.getComputedStyle(img);
+    let renderedWidth = parseFloat(computedStyle.getPropertyValue('width'));
+    let renderedHeight = parseFloat(computedStyle.getPropertyValue('height'));
+    const boxSizing = computedStyle.getPropertyValue('box-sizing');
+
+    if (boxSizing === 'border-box') {
+      const paddingTop = computedStyle.getPropertyValue('padding-top');
+      const paddingRight = computedStyle.getPropertyValue('padding-right');
+      const paddingBottom = computedStyle.getPropertyValue('padding-bottom');
+      const paddingLeft = computedStyle.getPropertyValue('padding-left');
+      renderedWidth -= parseFloat(paddingRight) + parseFloat(paddingLeft);
+      renderedHeight -= parseFloat(paddingTop) + parseFloat(paddingBottom);
+    }
+
     const renderedAspectRatio = renderedWidth / renderedHeight;
     const nonZeroRenderedDimensions = renderedWidth !== 0 && renderedHeight !== 0;