fix(grid-list): throw error if invalid value is assigned for rowHeight (#13254)

Currently if an invalid value is set to the grid list's `rowHeight`, we pass it on to the browser which may or may not handle it. These changes will throw an error if an invalid value is passed in, in order to make debugging these kinds of issues easier.

Fixes #13252.

Author: crisbeto

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/);
+  });
+
 });
 
 

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 {