test(e2e): fix error setting style property of DOM element

Fixes the following error in e2e tests: "Cannot set property style of
\#<HTMLElement> which has only a getter".

Closes angular#2874

Author: alfonso-presa

modules/benchmarks/src/naive_infinite_scroll/cells.ts

@@ -1,50 +1,50 @@
-import {List, ListWrapper, Map, MapWrapper} from 'angular2/src/facade/collection';
+import {List, ListWrapper, Map} from 'angular2/src/facade/collection';
 import {Company, Opportunity, Offering, Account, CustomDate, STATUS_LIST} from './common';
 import {NgFor} from 'angular2/directives';
 
 import {Component, Directive, View} from 'angular2/angular2';
 
 export class HasStyle {
-  style: Map<any, any>;
+  cellWidth: int;
 
-  constructor() { this.style = new Map(); }
+  constructor() {}
 
-  set width(w) { this.style.set('width', w); }
+  set width(w: int) { this.cellWidth = w; }
 }
 
 @Component({selector: 'company-name', properties: ['width: cell-width', 'company']})
-@View({directives: [], template: `<div [style]="style">{{company.name}}</div>`})
+@View({directives: [], template: `<div [style.width.px]="cellWidth">{{company.name}}</div>`})
 export class CompanyNameComponent extends HasStyle {
   company: Company;
 }
 
 @Component({selector: 'opportunity-name', properties: ['width: cell-width', 'opportunity']})
-@View({directives: [], template: `<div [style]="style">{{opportunity.name}}</div>`})
+@View({directives: [], template: `<div [style.width.px]="cellWidth">{{opportunity.name}}</div>`})
 export class OpportunityNameComponent extends HasStyle {
   opportunity: Opportunity;
 }
 
 @Component({selector: 'offering-name', properties: ['width: cell-width', 'offering']})
-@View({directives: [], template: `<div [style]="style">{{offering.name}}</div>`})
+@View({directives: [], template: `<div [style.width.px]="cellWidth">{{offering.name}}</div>`})
 export class OfferingNameComponent extends HasStyle {
   offering: Offering;
 }
 
 export class Stage {
   name: string;
   isDisabled: boolean;
-  style: Map<string, string>;
+  backgroundColor: string;
   apply: Function;
 }
 
 @Component({selector: 'stage-buttons', properties: ['width: cell-width', 'offering']})
 @View({
   directives: [NgFor],
   template: `
-      <div [style]="style">
+      <div [style.width.px]="cellWidth">
           <button template="ng-for #stage of stages"
                   [disabled]="stage.isDisabled"
-                  [style]="stage.style"
+                  [style.background-color]="stage.backgroundColor"
                   on-click="setStage(stage)">
             {{stage.name}}
           </button>
@@ -73,9 +73,7 @@ export class StageButtonsComponent extends HasStyle {
       var stage = new Stage();
       stage.name = status;
       stage.isDisabled = disabled;
-      var stageStyle = new Map<string, string>();
-      stageStyle.set('background-color', disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD');
-      stage.style = stageStyle;
+      stage.backgroundColor = disabled ? '#DDD' : isCurrent ? '#DDF' : '#FDD';
       if (isCurrent) {
         disabled = false;
       }
@@ -88,7 +86,7 @@ export class StageButtonsComponent extends HasStyle {
 @View({
   directives: [],
   template: `
-      <div [style]="style">
+      <div [style.width.px]="cellWidth">
         <a href="/account/{{account.accountId}}">
           {{account.accountId}}
         </a>
@@ -99,7 +97,7 @@ export class AccountCellComponent extends HasStyle {
 }
 
 @Component({selector: 'formatted-cell', properties: ['width: cell-width', 'value']})
-@View({directives: [], template: `<div [style]="style">{{formattedValue}}</div>`})
+@View({directives: [], template: `<div [style.width.px]="cellWidth">{{formattedValue}}</div>`})
 export class FormattedCellComponent extends HasStyle {
   formattedValue: string;
 

modules/benchmarks/src/naive_infinite_scroll/scroll_area.ts

@@ -1,4 +1,4 @@
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {ListWrapper} from 'angular2/src/facade/collection';
 import {Math} from 'angular2/src/facade/math';
 
 import {Component, Directive, View} from 'angular2/angular2';
@@ -24,7 +24,8 @@ import {NgFor} from 'angular2/directives';
   template: `
     <div>
         <div id="scrollDiv"
-             [style]="scrollDivStyle"
+             [style.height.px]="viewPortHeight"
+             style="width: 1000px; border: 1px solid #000; overflow: scroll"
              on-scroll="onScroll($event)">
             <div id="padding"></div>
             <div id="inner">
@@ -40,19 +41,14 @@ export class ScrollAreaComponent {
   _fullList: List<Offering>;
   visibleItems: List<Offering>;
 
-  scrollDivStyle;
+  viewPortHeight: number;
   paddingDiv;
   innerDiv;
 
   constructor() {
     this._fullList = generateOfferings(ITEMS);
     this.visibleItems = [];
-    this.scrollDivStyle = MapWrapper.createFromPairs([
-      ['height', `${VIEW_PORT_HEIGHT}px`],
-      ['width', '1000px'],
-      ['border', '1px solid #000'],
-      ['overflow', 'scroll']
-    ]);
+    this.viewPortHeight = VIEW_PORT_HEIGHT;
     this.onScroll(null);
   }
 

modules/benchmarks/src/naive_infinite_scroll/scroll_item.ts

@@ -1,4 +1,3 @@
-import {ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
 import {
   CompanyNameComponent,
   OpportunityNameComponent,
@@ -37,7 +36,10 @@ import {
     FormattedCellComponent
   ],
   template: `
-    <div class="row" [style]="itemStyle">
+    <div class="row"
+      [style.height.px]="itemHeight"
+      [style.line-height.px]="itemHeight"
+      style="font-size: 18px; display: flex; justify-content: space-between;">
         <company-name [company]="offering.company"
                       [cell-width]="companyNameWidth">
         </company-name>
@@ -75,27 +77,20 @@ import {
 })
 export class ScrollItemComponent {
   offering: Offering;
-  itemStyle;
 
-  constructor() {
-    this.itemStyle = MapWrapper.createFromPairs([
-      ['height', `${ITEM_HEIGHT}px`],
-      ['line-height', `${ITEM_HEIGHT}px`],
-      ['font-size', '18px'],
-      ['display', 'flex'],
-      ['justify-content', 'space-between']
-    ]);
-  }
+  itemHeight: number;
 
-  get companyNameWidth() { return `${COMPANY_NAME_WIDTH}px`; }
-  get opportunityNameWidth() { return `${OPPORTUNITY_NAME_WIDTH}px`; }
-  get offeringNameWidth() { return `${OFFERING_NAME_WIDTH}px`; }
-  get accountCellWidth() { return `${ACCOUNT_CELL_WIDTH}px`; }
-  get basePointsWidth() { return `${BASE_POINTS_WIDTH}px`; }
-  get kickerPointsWidth() { return `${KICKER_POINTS_WIDTH}px`; }
-  get stageButtonsWidth() { return `${STAGE_BUTTONS_WIDTH}px`; }
-  get bundlesWidth() { return `${BUNDLES_WIDTH}px`; }
-  get dueDateWidth() { return `${DUE_DATE_WIDTH}px`; }
-  get endDateWidth() { return `${END_DATE_WIDTH}px`; }
-  get aatStatusWidth() { return `${AAT_STATUS_WIDTH}px`; }
+  constructor() { this.itemHeight = ITEM_HEIGHT; }
+
+  get companyNameWidth() { return COMPANY_NAME_WIDTH; }
+  get opportunityNameWidth() { return OPPORTUNITY_NAME_WIDTH; }
+  get offeringNameWidth() { return OFFERING_NAME_WIDTH; }
+  get accountCellWidth() { return ACCOUNT_CELL_WIDTH; }
+  get basePointsWidth() { return BASE_POINTS_WIDTH; }
+  get kickerPointsWidth() { return KICKER_POINTS_WIDTH; }
+  get stageButtonsWidth() { return STAGE_BUTTONS_WIDTH; }
+  get bundlesWidth() { return BUNDLES_WIDTH; }
+  get dueDateWidth() { return DUE_DATE_WIDTH; }
+  get endDateWidth() { return END_DATE_WIDTH; }
+  get aatStatusWidth() { return AAT_STATUS_WIDTH; }
 }