fix(progress-bar): determinate state reflects value (#542)

Fixes #519

Author: sendilkumarn

src/components/progress-bar/progress-bar.html

@@ -1,5 +1,5 @@
 <!-- The background div is named as such because it appears below the other divs and is not sized based on values. -->
 <div class="md-progress-bar-background"></div>
-<div class="md-progress-bar-buffer" [style.transform]="bufferTransform()"></div>
-<div class="md-progress-bar-primary md-progress-bar-fill" [style.transform]="primaryTransform()"></div>
+<div class="md-progress-bar-buffer" [ngStyle]="bufferTransform()"></div>
+<div class="md-progress-bar-primary md-progress-bar-fill" [ngStyle]="primaryTransform()"></div>
 <div class="md-progress-bar-secondary md-progress-bar-fill"></div>

src/components/progress-bar/progress-bar.spec.ts

@@ -88,27 +88,27 @@ describe('MdProgressBar', () => {
         let progressElement = fixture.debugElement.query(By.css('md-progress-bar'));
         let progressComponent = progressElement.componentInstance;
 
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.value = 40;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.4)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.4)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.value = 35;
         progressComponent.bufferValue = 55;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.35)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.35)' });
         expect(progressComponent.bufferTransform()).toBe(undefined);
 
         progressComponent.mode = 'buffer';
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.35)');
-        expect(progressComponent.bufferTransform()).toBe('scaleX(0.55)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.35)' });
+        expect(progressComponent.bufferTransform()).toEqual({ transform: 'scaleX(0.55)' });
 
 
         progressComponent.value = 60;
         progressComponent.bufferValue = 60;
-        expect(progressComponent.primaryTransform()).toBe('scaleX(0.6)');
-        expect(progressComponent.bufferTransform()).toBe('scaleX(0.6)');
+        expect(progressComponent.primaryTransform()).toEqual({ transform: 'scaleX(0.6)' });
+        expect(progressComponent.bufferTransform()).toEqual({ transform: 'scaleX(0.6)' });
         done();
       });
   });

src/components/progress-bar/progress-bar.ts

@@ -68,7 +68,7 @@ export class MdProgressBar {
    */
   primaryTransform() {
     let scale = this.value / 100;
-    return `scaleX(${scale})`;
+    return {transform: `scaleX(${scale})`};
   }
 
   /**
@@ -79,7 +79,7 @@ export class MdProgressBar {
   bufferTransform() {
     if (this.mode == 'buffer') {
       let scale = this.bufferValue / 100;
-      return `scaleX(${scale})`;
+      return {transform: `scaleX(${scale})`};
     }
   }
 }