fix(sidenav): remove margin from content instead of setting zero (#11986)

Author: jelbourn

src/lib/sidenav/drawer.spec.ts

@@ -564,7 +564,7 @@ describe('MatDrawerContainer', () => {
     fixture.detectChanges();
     tick();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+    expect(contentElement.style.marginLeft).toBe('');
   }));
 
   it('should recalculate the margin if the drawer mode is changed', fakeAsync(() => {
@@ -584,7 +584,7 @@ describe('MatDrawerContainer', () => {
     fixture.componentInstance.mode = 'over';
     fixture.detectChanges();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBeLessThan(initialMargin);
+    expect(contentElement.style.marginLeft).toBe('');
   }));
 
   it('should recalculate the margin if the direction has changed', fakeAsync(() => {
@@ -604,7 +604,7 @@ describe('MatDrawerContainer', () => {
     fixture.componentInstance.direction = 'rtl';
     fixture.detectChanges();
 
-    expect(parseInt(contentElement.style.marginLeft)).toBe(0);
+    expect(contentElement.style.marginLeft).toBe('');
     expect(parseInt(contentElement.style.marginRight)).toBe(margin);
   }));
 
@@ -651,6 +651,32 @@ describe('MatDrawerContainer', () => {
       discardPeriodicTasks();
     }));
 
+  it('should not set a style property if it would be zero', fakeAsync(() => {
+      const fixture = TestBed.createComponent(AutosizeDrawer);
+      fixture.detectChanges();
+
+      const content = fixture.debugElement.nativeElement.querySelector('.mat-drawer-content');
+      expect(content.style.marginLeft).toBe('', 'Margin should be omitted when drawer is closed');
+
+      // Open the drawer and resolve the open animation.
+      fixture.componentInstance.drawer.open();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(content.style.marginLeft).not.toBe('', 'Margin should be present when drawer is open');
+
+      // Close the drawer and resolve the close animation.
+      fixture.componentInstance.drawer.close();
+      fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
+
+      expect(content.style.marginLeft).toBe('', 'Margin should be removed after drawer close.');
+
+      discardPeriodicTasks();
+    }));
+
     it('should be able to toggle whether the container has a backdrop', fakeAsync(() => {
       const fixture = TestBed.createComponent(BasicTestApp);
       fixture.detectChanges();

src/lib/sidenav/drawer.ts

@@ -703,7 +703,13 @@ export class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy
     }
 
     if (left !== this._contentMargins.left || right !== this._contentMargins.right) {
-      this._contentMargins = {left, right};
+      this._contentMargins = {
+        // If either `right` or `left` is zero, don't set a style to the element. This
+        // allows users to specify a custom size via CSS class in SSR scenarios where the
+        // measured widths will always be zero.
+        left: left || null,
+        right: right || null,
+      };
 
       // Pull back into the NgZone since in some cases we could be outside. We need to be careful
       // to do it only when something changed, otherwise we can end up hitting the zone too often.