fix: progress bar when value is missing in firefox and safari (#34684)

Author: marchbox

change/@fluentui-web-components-0a49c8c8-8b69-4f58-9b89-0a49aa649199.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: progress bar when value is missing in firefox and safari",
+  "packageName": "@fluentui/web-components",
+  "email": "machi@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/src/progress-bar/progress-bar.base.ts

@@ -113,7 +113,7 @@ export class BaseProgressBar extends FASTElement {
       return;
     }
 
-    if (Number.isNaN(this.value)) {
+    if (typeof this.value !== 'number') {
       this.indicator.style.removeProperty('width');
       return;
     }

packages/web-components/src/progress-bar/progress-bar.spec.ts

@@ -41,6 +41,16 @@ test.describe('Progress Bar', () => {
     await expect(element).toHaveJSProperty('elementInternals.ariaValueMax', '50');
   });
 
+  test('should set indicator width to be 1/3 of the container width if `value` is missing', async ({ fastPage }) => {
+    const { element } = fastPage;
+    await element.evaluate(node => {
+      node.style.setProperty('width', '100px');
+    });
+    const indicator = element.locator('.indicator');
+
+    await expect(indicator).toHaveCSS('width', '33px');
+  });
+
   test('should set indicator width to match the `value` property as a percentage between 0 and 100 when `min` and `max` are unset', async ({
     fastPage,
   }) => {