diff --git a/src/lib/grid-list/grid-list.spec.ts b/src/lib/grid-list/grid-list.spec.ts index 88a0a80024c..de774580e13 100644 --- a/src/lib/grid-list/grid-list.spec.ts +++ b/src/lib/grid-list/grid-list.spec.ts @@ -389,6 +389,17 @@ describe('MatGridList', () => { expect(getStyle(tile, 'padding-top')).toBe('200px'); }); + it('should throw if an invalid value is set as the `rowHeight`', () => { + const fixture = createComponent(GridListWithUnspecifiedRowHeight); + const gridList = fixture.debugElement.query(By.directive(MatGridList)); + + expect(() => { + // Note the semicolon at the end which will be an invalid value on some browsers (see #13252). + gridList.componentInstance.rowHeight = '350px;'; + fixture.detectChanges(); + }).toThrowError(/^Invalid value/); + }); + }); diff --git a/src/lib/grid-list/tile-styler.ts b/src/lib/grid-list/tile-styler.ts index 089b01f4a77..4d6ed2b978c 100644 --- a/src/lib/grid-list/tile-styler.ts +++ b/src/lib/grid-list/tile-styler.ts @@ -10,6 +10,12 @@ import {MatGridList} from './grid-list'; import {MatGridTile} from './grid-tile'; import {TileCoordinator} from './tile-coordinator'; +/** + * RegExp that can be used to check whether a value will + * be allowed inside a CSS `calc()` expression. + */ +const cssCalcAllowedValue = /^-?\d+((\.\d+)?[A-Za-z%$]?)+$/; + /** * Sets the style properties for an individual tile, given the position calculated by the * Tile Coordinator. @@ -162,6 +168,10 @@ export class FixedTileStyler extends TileStyler { init(gutterSize: string, tracker: TileCoordinator, cols: number, direction: string) { super.init(gutterSize, tracker, cols, direction); this.fixedRowHeight = normalizeUnits(this.fixedRowHeight); + + if (!cssCalcAllowedValue.test(this.fixedRowHeight)) { + throw Error(`Invalid value "${this.fixedRowHeight}" set as rowHeight.`); + } } setRowStyles(tile: MatGridTile, rowIndex: number): void {