fix(material/progress-spinner): fix setting diameter programmatically

Author: wagnermaciel

src/material/progress-spinner/progress-spinner.spec.ts

@@ -266,7 +266,7 @@ describe('MDC-based MatProgressSpinner', () => {
     expect(fixture.nativeElement.querySelector('svg').getAttribute('focusable')).toBe('false');
   });
 
-  it('should handle the number inputs being passed in as strings', () => {
+  fit('should handle the number inputs being passed in as strings', () => {
     const fixture = TestBed.createComponent(ProgressSpinnerWithStringValues);
     const spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
     const svgElement = spinner.nativeElement.querySelector('svg');
@@ -277,8 +277,10 @@ describe('MDC-based MatProgressSpinner', () => {
     expect(spinner.componentInstance.strokeWidth).toBe(11);
     expect(spinner.componentInstance.value).toBe(25);
 
-    expect(spinner.nativeElement.style.width).toBe('37px');
-    expect(spinner.nativeElement.style.height).toBe('37px');
+    const {width, height} = spinner.nativeElement.getBoundingClientRect();
+
+    expect(width).toBe(37);
+    expect(height).toBe(37);
 
     expect(svgElement.clientWidth).toBe(37);
     expect(svgElement.clientHeight).toBe(37);
@@ -290,8 +292,9 @@ describe('MDC-based MatProgressSpinner', () => {
     let spinner = fixture.debugElement.query(By.directive(MatProgressSpinner))!;
     spinner.componentInstance.diameter = 32;
     fixture.detectChanges();
-    expect(spinner.nativeElement.style.width).toBe('32px');
-    expect(spinner.nativeElement.style.height).toBe('32px');
+    const {width, height} = spinner.nativeElement.getBoundingClientRect();
+    expect(width).toBe(32);
+    expect(height).toBe(32);
   });
 
   it('should be able to set a default diameter', () => {

src/material/progress-spinner/progress-spinner.ts

@@ -80,8 +80,8 @@ const BASE_STROKE_WIDTH = 10;
     'tabindex': '-1',
     '[class._mat-animation-noopable]': `_noopAnimations`,
     '[class.mdc-circular-progress--indeterminate]': 'mode === "indeterminate"',
-    '[style.width.px]': 'diameter',
-    '[style.height.px]': 'diameter',
+    '[style.--mdc-circular-progress-size]': 'diameter + "px"',
+    '[style.--mdc-circular-progress-active-indicator-width]': 'diameter + "px"',
     '[attr.aria-valuemin]': '0',
     '[attr.aria-valuemax]': '100',
     '[attr.aria-valuenow]': 'mode === "determinate" ? value : null',