fix(common): support density descriptors with 2+ decimals (#47197)

This commit fixes a bug where `rawSrcset` in the image directive would allow density descriptors like `1.5x` but not like `1.25x`. Now descriptors with 2+ digits after the decimal point should work. PR Close #47197
angular · Aug 22, 2022 · b3879db · b3879db
1 parent 634e6c7
commit b3879db
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
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
@@ -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".
+ * Should match something like: "1x, 2x". Also supports decimals like "1.5x".
  */
-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

diff --git a/packages/common/test/directives/ng_optimized_image_spec.ts b/packages/common/test/directives/ng_optimized_image_spec.ts
@@ -966,7 +966,7 @@ describe('Image directive', () => {
         setupTestingModule({imageLoader});
 
         const template = `
-           <img rawSrc="img.png" rawSrcset="1x, 2.5x, 3x" width="100" height="50">
+           <img rawSrc="img.png" rawSrcset="1.75x, 2.5x, 3x" width="100" height="50">
          `;
         const fixture = createTestComponent(template);
         fixture.detectChanges();
@@ -976,7 +976,7 @@ describe('Image directive', () => {
         expect(img.src).toBe(`${IMG_BASE_URL}/img.png`);
         expect(img.srcset)
             .toBe(
-                `${IMG_BASE_URL}/img.png?w=100 1x, ` +
+                `${IMG_BASE_URL}/img.png?w=175 1.75x, ` +
                 `${IMG_BASE_URL}/img.png?w=250 2.5x, ` +
                 `${IMG_BASE_URL}/img.png?w=300 3x`);
       });