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

kara · alxhub · commit 32caa8b66908 · 2022-08-23T16:12:41.000-07:00
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 PR Close #47232
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`);
       });
