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

Author: wagnermaciel

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

@@ -123,10 +123,12 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.diameter = 32;
     fixture.detectChanges();
 
-    expect(parseInt(spinner.style.width))
+    const {width, height} = spinner.getBoundingClientRect();
+
+    expect(width)
       .withContext('Expected the custom diameter to be applied to the host element width.')
       .toBe(32);
-    expect(parseInt(spinner.style.height))
+    expect(height)
       .withContext('Expected the custom diameter to be applied to the host element height.')
       .toBe(32);
     expect(parseInt(svgElement.clientWidth))
@@ -168,11 +170,12 @@ describe('MDC-based MatProgressSpinner', () => {
 
     const spinner = fixture.debugElement.query(By.css('mat-progress-spinner'))!.nativeElement;
     const svgElement: HTMLElement = fixture.nativeElement.querySelector('svg');
+    const {width, height} = spinner.getBoundingClientRect();
 
-    expect(parseFloat(spinner.style.width))
+    expect(width)
       .withContext('Expected the custom diameter to be applied to the host element width.')
       .toBe(32.5);
-    expect(parseFloat(spinner.style.height))
+    expect(height)
       .withContext('Expected the custom diameter to be applied to the host element height.')
       .toBe(32.5);
     expect(Math.ceil(svgElement.clientWidth))
@@ -213,8 +216,10 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.strokeWidth = 40;
     fixture.detectChanges();
 
-    expect(element.style.width).toBe('100px');
-    expect(element.style.height).toBe('100px');
+    const {width, height} = element.getBoundingClientRect();
+
+    expect(width).toBe(100);
+    expect(height).toBe(100);
   });
 
   it('should not collapse the host element if the stroke width is less than the default', () => {
@@ -224,8 +229,10 @@ describe('MDC-based MatProgressSpinner', () => {
     fixture.componentInstance.strokeWidth = 5;
     fixture.detectChanges();
 
-    expect(element.style.width).toBe('100px');
-    expect(element.style.height).toBe('100px');
+    const {width, height} = element.getBoundingClientRect();
+
+    expect(width).toBe(100);
+    expect(height).toBe(100);
   });
 
   it('should set the color class on the mat-spinner', () => {
@@ -277,8 +284,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 +299,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',