diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index d3561a5077ce..6f556b40bbcc 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -253,6 +253,18 @@ describe('MdGridList', () => { let footer = fixture.debugElement.query(By.directive(MdGridTileText)); expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(true); }); + + it('should not use calc() that evaluates to 0', () => { + const fixture = TestBed.createComponent(GirdListWithRowHeightRatio); + + fixture.componentInstance.heightRatio = '4:1'; + fixture.detectChanges(); + + const firstTile = fixture.debugElement.query(By.directive(MdGridTile)).nativeElement; + + expect(firstTile.style.marginTop).toBe('0px'); + expect(firstTile.style.left).toBe('0px'); + }); }); diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index dff694f9dd1e..6c781e3c7e67 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -51,7 +51,7 @@ export abstract class TileStyler { // edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter // size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the // edge evenly among the cells). - return `(${sizePercent}% - ( ${this._gutterSize} * ${gutterFraction} ))`; + return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`; } @@ -64,7 +64,7 @@ export abstract class TileStyler { getTilePosition(baseSize: string, offset: number): string { // The position comes the size of a 1x1 tile plus gutter for each previous tile in the // row/column (offset). - return calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`); + return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`); }