From 210f3f9733876dcf9cda13753367dfbce25a149c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 27 Sep 2018 16:16:58 +0200
Subject: [PATCH] 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.
---
 src/lib/grid-list/grid-list.spec.ts | 11 +++++++++++
 src/lib/grid-list/tile-styler.ts    | 10 ++++++++++
 2 files changed, 21 insertions(+)

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 {