diff --git a/src/lib/sidenav/drawer.spec.ts b/src/lib/sidenav/drawer.spec.ts index f76bbcf43ed8..fa849db920aa 100644 --- a/src/lib/sidenav/drawer.spec.ts +++ b/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(); diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts index ef1aa22a0cdf..65ac4d5d093e 100644 --- a/src/lib/sidenav/drawer.ts +++ b/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.