From 31e9dda2c88956c9bf516ed8eb38b67e499de5a8 Mon Sep 17 00:00:00 2001
From: Pawel Kozlowski <pkozlowski.opensource@gmail.com>
Date: Thu, 23 Jan 2020 16:45:35 +0100
Subject: [PATCH] perf(ivy): add more styling use-cases to benchmarks (#34923)

New benchmarks focus on style bindings (style and ngStyle).

PR Close #34923
---
 modules/benchmarks/src/styling/ng2/index.html       |  6 ++++++
 modules/benchmarks/src/styling/ng2/styling.ts       |  5 ++++-
 modules/benchmarks/src/styling/styling_perf.spec.ts | 11 ++++++++---
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/modules/benchmarks/src/styling/ng2/index.html b/modules/benchmarks/src/styling/ng2/index.html
index 0c8a87d640..e54fe08367 100644
--- a/modules/benchmarks/src/styling/ng2/index.html
+++ b/modules/benchmarks/src/styling/ng2/index.html
@@ -21,6 +21,12 @@
       <option value="6">(6) class="foo" [ngStyle]="{width: 10px}" [style.background-color]="exp" (Sierpinski's triangle)
       </option>
       <option value="7">(7) style="color: red" (static styling)</option>
+      <option value="8">(8) [style.width.px]="widthExp" [style.color]="exp" (style property bindings)
+      </option>
+      <option value="9">(9) style="width: 10px" [style.color]="exp" ((mix of static and class property bindings)
+      </option>
+      <option value="10">(10) [ngStyle]="{width.px: widthExp, color: exp}" (ngStyle with units)
+      </option>
     </select>
 
     <button id="create">create</button>
diff --git a/modules/benchmarks/src/styling/ng2/styling.ts b/modules/benchmarks/src/styling/ng2/styling.ts
index e10f1d337f..af43821de8 100644
--- a/modules/benchmarks/src/styling/ng2/styling.ts
+++ b/modules/benchmarks/src/styling/ng2/styling.ts
@@ -20,9 +20,12 @@ import {BrowserModule} from '@angular/platform-browser';
     <ng-template #t5><button class="foo" [ngClass]="{bar: exp ==='bar'}"></button></ng-template>
     <ng-template #t6><button class="foo" [ngStyle]="staticStyle" [style.background-color]="exp"></button></ng-template>
     <ng-template #t7><button style="color: red"></button></ng-template>
+    <ng-template #t8><button [style.width.px]="exp ==='bar' ? 10 : 20" [style.color]="exp"></button></ng-template>
+    <ng-template #t9><button style="width: 10px" [style.color]="exp"></button></ng-template>
+    <ng-template #t10><button [ngStyle]="{'width.px': exp ==='bar' ? 10 : 20, color: exp}"></button></ng-template>
     
     <div>
-      <ng-template ngFor [ngForOf]="data" [ngForTemplate]="getTplRef(t0, t1, t2, t3, t4, t5, t6, t7)"></ng-template>
+      <ng-template ngFor [ngForOf]="data" [ngForTemplate]="getTplRef(t0, t1, t2, t3, t4, t5, t6, t7, t8, t9, t10)"></ng-template>
     </div>
   `
 })
diff --git a/modules/benchmarks/src/styling/styling_perf.spec.ts b/modules/benchmarks/src/styling/styling_perf.spec.ts
index 48c4b7a21c..f0aaa31a73 100644
--- a/modules/benchmarks/src/styling/styling_perf.spec.ts
+++ b/modules/benchmarks/src/styling/styling_perf.spec.ts
@@ -12,12 +12,17 @@ import {runBenchmark} from '../../../e2e_util/perf_util';
 
 /** List of possible scenarios that should be tested.  */
 const SCENARIOS = [
-  {optionIndex: 0, id: 'no_styling_involved'}, {optionIndex: 1, id: 'static_class'},
-  {optionIndex: 2, id: 'static_class_with_interpolation'}, {optionIndex: 3, id: 'class_binding'},
+  {optionIndex: 0, id: 'no_styling_involved'},
+  {optionIndex: 1, id: 'static_class'},
+  {optionIndex: 2, id: 'static_class_with_interpolation'},
+  {optionIndex: 3, id: 'class_binding'},
   {optionIndex: 4, id: 'static_class_and_class_binding'},
   {optionIndex: 5, id: 'static_class_and_ngclass_binding'},
   {optionIndex: 6, id: 'static_class_and_ngstyle_binding_and_style_binding'},
-  {optionIndex: 7, id: 'static_style'}
+  {optionIndex: 7, id: 'static_style'},
+  {optionIndex: 8, id: 'style_property_bindings'},
+  {optionIndex: 9, id: 'static_style_and_property_binding'},
+  {optionIndex: 10, id: 'ng_style_with_units'},
 ];
 
 describe('styling benchmark spec', () => {