Fix NgOptimizedImage distortion check for padded images

[MatthiasKunnen]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines: https://github.com/angular/angular/blob/main/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• Documentation content changes
• angular.io application / infrastructure changes
• Other... Please describe:

What is the current behavior?

NgOptimizedImage reports distortion of an image by comparing the intrinsic aspect ratio to the rendered aspect ratio, however, for padded images, the rendered aspect ratio is calculated incorrectly. This results in non-distorted images being reported as distorted and vice-versa. This is due to the rendered aspect ratio being calculated from the clientWidth and clientHeight which includes the padding of the element.

Issue Number: N/A

What is the new behavior?

clientWidth and clientHeight have been replaced by getComputedStyle(img).getPropertyValue('width') (and height equivalent) and depending on the box-sizing, the padding is subtracted prior to ratio calculation. This always results in the correct ratio.

An advantage of using computed width over clientWidth (and same for height) is that computed width returns a decimal, in contrast to the integer for clientWidth, which allows for greater accuracy in determining the ratio of the rendered image which prevents false positive distortion checks. It might even be possible to lower the ASPECT_RATIO_TOLERANCE (currently set to 0.1) and reduce the amount of false negatives.

Play around with the calculations here: https://stackblitz.com/edit/angular-image-ratio-playground?file=src/main.ts. Scenarios are defined in main.ts and rendered showing the results of the various ways to calculate the ratio and whether the particular calculation is correct.

Does this PR introduce a breaking change?

• Yes
• No

Other information

Test added for rounding errors

I've added a test that checks for a false positive distortion check that occurs when using integers for the dimensions. This is fixed by using the computed dimensions which are returned as decimals. While this is, in my opinion, a useful addition, I could remove it if it is not desired.

Updating playground code in angular codebase

I could update the playground at packages/core/test/bundling/image-directive/playground.ts with the setup of my stackblitz if desired. This would probably be another PR though.

Extract to separate function

Perhaps the image dimensions extraction would be better in a utils lib, or exported for reuse elsewhere. If so, please let me know and I'll update it.

[AndrewKushnir]

// cc @atcastle

[atcastle]

Looks good to me. The Stackblitz is very clear and shows how this will help prevent some false positives on the distortion check. In general I'm less worried about false negatives--the main point of the check is to alert people of a common error where the (required) height and width properties can cause distortion, not to prevent people from doing weird stuff with CSS and making their images look squashed or stretched or whatever. In the future, it might be worth looking into ways to heuristically disable this check, to avoid inconveniencing people who are intentionally distorting their images.

The PR's great though--thanks!

[pkozlowski-opensource]

This PR was merged into the repository by commit 5a37928.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}