From fc5ac1ebc4a9c963b57414f4d592b8c9cb002b33 Mon Sep 17 00:00:00 2001
From: Tobias Bosch <tbosch1009@gmail.com>
Date: Thu, 17 Nov 2016 15:18:10 -0800
Subject: [PATCH] fix(benchmarks): use sanitized style values (#12943)

---
 modules/benchmarks/src/largetable/ng2/table.ts | 13 +++++++++++--
 modules/benchmarks/src/tree/ng2/tree.ts        | 12 ++++++++++--
 modules/benchmarks/src/tree/ng2_static/tree.ts | 13 ++++++++++---
 3 files changed, 31 insertions(+), 7 deletions(-)

diff --git a/modules/benchmarks/src/largetable/ng2/table.ts b/modules/benchmarks/src/largetable/ng2/table.ts
index 387fa5adc4..883d3af5c7 100644
--- a/modules/benchmarks/src/largetable/ng2/table.ts
+++ b/modules/benchmarks/src/largetable/ng2/table.ts
@@ -7,15 +7,18 @@
  */
 
 import {Component, Input, NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
 
 import {TableCell, emptyTable} from '../util';
 
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
 @Component({
   selector: 'largetable',
   template: `<table><tbody>
     <tr *ngFor="let row of data; trackBy: trackByIndex">
-      <td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="cell.row % 2 ? '' : 'grey'">
+      <td *ngFor="let cell of row; trackBy: trackByIndex" [style.backgroundColor]="getColor(cell.row)">
       {{cell.value}}
       </td>
     </tr>
@@ -26,8 +29,14 @@ export class TableComponent {
   data: TableCell[][] = emptyTable;
 
   trackByIndex(index: number, item: any) { return index; }
+
+  getColor(row: number) { return row % 2 ? trustedEmptyColor : trustedGreyColor; }
 }
 
 @NgModule({imports: [BrowserModule], bootstrap: [TableComponent], declarations: [TableComponent]})
 export class AppModule {
+  constructor(sanitizer: DomSanitizer) {
+    trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+  }
 }
diff --git a/modules/benchmarks/src/tree/ng2/tree.ts b/modules/benchmarks/src/tree/ng2/tree.ts
index 931c92f350..eea897e5cb 100644
--- a/modules/benchmarks/src/tree/ng2/tree.ts
+++ b/modules/benchmarks/src/tree/ng2/tree.ts
@@ -7,20 +7,28 @@
  */
 
 import {Component, NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
 
 import {TreeNode, emptyTree} from '../util';
 
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
 @Component({
   selector: 'tree',
   inputs: ['data'],
   template:
-      `<span [style.backgroundColor]="data.depth % 2 ? '' : 'grey'"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
+      `<span [style.backgroundColor]="bgColor"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
 })
 export class TreeComponent {
   data: TreeNode = emptyTree;
+  get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
 }
 
 @NgModule({imports: [BrowserModule], bootstrap: [TreeComponent], declarations: [TreeComponent]})
 export class AppModule {
+  constructor(sanitizer: DomSanitizer) {
+    trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+    trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+  }
 }
diff --git a/modules/benchmarks/src/tree/ng2_static/tree.ts b/modules/benchmarks/src/tree/ng2_static/tree.ts
index 1a1d8bea60..00d10e74a2 100644
--- a/modules/benchmarks/src/tree/ng2_static/tree.ts
+++ b/modules/benchmarks/src/tree/ng2_static/tree.ts
@@ -7,14 +7,16 @@
  */
 
 import {Component, Input, NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
+import {BrowserModule, DomSanitizer, SafeStyle} from '@angular/platform-browser';
 
 import {TreeNode, emptyTree, maxDepth} from '../util';
 
+let trustedEmptyColor: SafeStyle;
+let trustedGreyColor: SafeStyle;
+
 function createTreeComponent(level: number, isLeaf: boolean) {
   const nextTreeEl = `tree${level+1}`;
-  let template =
-      `<span [style.backgroundColor]="data.depth % 2 ? '' : 'grey'"> {{data.value}} </span>`;
+  let template = `<span [style.backgroundColor]="bgColor"> {{data.value}} </span>`;
   if (!isLeaf) {
     template +=
         `<${nextTreeEl} [data]='data.right'></${nextTreeEl}><${nextTreeEl} [data]='data.left'></${nextTreeEl}>`;
@@ -24,6 +26,7 @@ function createTreeComponent(level: number, isLeaf: boolean) {
   class TreeComponent {
     @Input()
     data: TreeNode;
+    get bgColor() { return this.data.depth % 2 ? trustedEmptyColor : trustedGreyColor; }
   }
 
   return TreeComponent;
@@ -43,6 +46,10 @@ function createModule(): any {
 
   @NgModule({imports: [BrowserModule], bootstrap: [RootTreeComponent], declarations: [components]})
   class AppModule {
+    constructor(sanitizer: DomSanitizer) {
+      trustedEmptyColor = sanitizer.bypassSecurityTrustStyle('');
+      trustedGreyColor = sanitizer.bypassSecurityTrustStyle('grey');
+    }
   }
 
   return AppModule;