Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(common): consider density descriptors with multiple digits as valid (#47230)

Browse source 
Valid density descriptors used in the NgOptimizedImage can contain multiple
digits (ex. 1.25x, 25x). This change fixes the issue where density descriptors
with multiple digits (ex. 25x) where considered invalid.

Please note that a valid density descriptor might still be rejected by the
directive's validation logic if the supplied value is too big.

PR Close #47230
This commit is contained in:
Pawel Kozlowski 2022-08-23 14:21:59 +02:00 committed by Alex Rickabaugh
parent d34ae8472a
commit 4fdbd85d26
2 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/common/src/directives/ng_optimized_image/ng_optimized_image.ts
View file

@ -32,9 +32,9 @@ const VALID_WIDTH_DESCRIPTOR_SRCSET = /^((\s*\d+w\s*(,|$)){1,})$/;
/**
* RegExpr to determine whether a src in a srcset is using density descriptors.
* Should match something like: "1x, 2x". Also supports decimals like "1.5x".
* Should match something like: "1x, 2x, 50x". Also supports decimals like "1.5x, 1.50x".
*/
const VALID_DENSITY_DESCRIPTOR_SRCSET = /^((\s*\d(\.\d+)?x\s*(,|$)){1,})$/;
const VALID_DENSITY_DESCRIPTOR_SRCSET = /^((\s*\d+(\.\d+)?x\s*(,|$)){1,})$/;
/**
* Srcset values with a density descriptor higher than this value will actively
@ -506,7 +506,7 @@ function assertUnderDensityCap(dir: NgOptimizedImage, value: string) {
`${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` +
`${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` +
`greater than ${RECOMMENDED_SRCSET_DENSITY_CAP}x - which makes them unnecessary for ` +
`most use cases. Images that will be pinch-zoomed are typically the primary use case for` +
`most use cases. Images that will be pinch-zoomed are typically the primary use case for ` +
`${ABSOLUTE_SRCSET_DENSITY_CAP}x images. Please remove the high density descriptor and try again.`);
}
}

31
packages/common/test/directives/ng_optimized_image_spec.ts
View file

@ -367,7 +367,36 @@ describe('Image directive', () => {
`${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` +
`greater than ${
RECOMMENDED_SRCSET_DENSITY_CAP}x - which makes them unnecessary for ` +
`most use cases. Images that will be pinch-zoomed are typically the primary use case for` +
`most use cases. Images that will be pinch-zoomed are typically the primary use case for ` +
`${ABSOLUTE_SRCSET_DENSITY_CAP}x images. Please remove the high density descriptor and try again.`);
});
it('should throw if rawSrcset exceeds the density cap with multiple digits', () => {
const imageLoader = (config: ImageLoaderConfig) => {
const width = config.width ? `-${config.width}` : ``;
return window.location.origin + `/path/${config.src}${width}.png`;
};
setupTestingModule({imageLoader});
const template = `
<img rawSrc="img" rawSrcset="1x, 200x" width="100" height="50">
`;
expect(() => {
const fixture = createTestComponent(template);
fixture.detectChanges();
})
.toThrowError(
`NG0${
RuntimeErrorCode
.INVALID_INPUT}: The NgOptimizedImage directive (activated on an <img> element with the \`rawSrc="img"\`) ` +
`has detected that the \`rawSrcset\` contains an unsupported image density:` +
`\`1x, 200x\`. NgOptimizedImage generally recommends a max image density of ` +
`${RECOMMENDED_SRCSET_DENSITY_CAP}x but supports image densities up to ` +
`${ABSOLUTE_SRCSET_DENSITY_CAP}x. The human eye cannot distinguish between image densities ` +
`greater than ${
RECOMMENDED_SRCSET_DENSITY_CAP}x - which makes them unnecessary for ` +
`most use cases. Images that will be pinch-zoomed are typically the primary use case for ` +
`${ABSOLUTE_SRCSET_DENSITY_CAP}x images. Please remove the high density descriptor and try again.`);
});