Skip to content

Commit 255611b

Browse files
crisbetojelbourn
authored andcommitted
fix(grid-list): avoid unnecessary calc declarations (#6745)
For the cases where a tile's offset is 0, some of the `calc` expressions will always evaluate to 0. These changes make it so calc isn't used at all if it would evaluate to 0.
1 parent 1272f03 commit 255611b

File tree

2 files changed

+14
-2
lines changed

2 files changed

+14
-2
lines changed

src/lib/grid-list/grid-list.spec.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -253,6 +253,18 @@ describe('MdGridList', () => {
253253
let footer = fixture.debugElement.query(By.directive(MdGridTileText));
254254
expect(footer.nativeElement.classList.contains('mat-2-line')).toBe(true);
255255
});
256+
257+
it('should not use calc() that evaluates to 0', () => {
258+
const fixture = TestBed.createComponent(GirdListWithRowHeightRatio);
259+
260+
fixture.componentInstance.heightRatio = '4:1';
261+
fixture.detectChanges();
262+
263+
const firstTile = fixture.debugElement.query(By.directive(MdGridTile)).nativeElement;
264+
265+
expect(firstTile.style.marginTop).toBe('0px');
266+
expect(firstTile.style.left).toBe('0px');
267+
});
256268
});
257269

258270

src/lib/grid-list/tile-styler.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export abstract class TileStyler {
5151
// edges, each tile only uses a fraction (gutterShare = numGutters / numCells) of the gutter
5252
// size. (Imagine having one gutter per tile, and then breaking up the extra gutter on the
5353
// edge evenly among the cells).
54-
return `(${sizePercent}% - ( ${this._gutterSize} * ${gutterFraction} ))`;
54+
return `(${sizePercent}% - (${this._gutterSize} * ${gutterFraction}))`;
5555
}
5656

5757

@@ -64,7 +64,7 @@ export abstract class TileStyler {
6464
getTilePosition(baseSize: string, offset: number): string {
6565
// The position comes the size of a 1x1 tile plus gutter for each previous tile in the
6666
// row/column (offset).
67-
return calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
67+
return offset === 0 ? '0' : calc(`(${baseSize} + ${this._gutterSize}) * ${offset}`);
6868
}
6969

7070

0 commit comments

Comments
 (0)