fix(blur): fix blur directive so it adds the filter and add a test

ionic/components/blur/blur.ts

@@ -4,8 +4,7 @@ import {Directive, Renderer, ElementRef} from 'angular2/core';
 /**
  * @name Blur
  * @description
- * The blur attribute applies the CSS blur attribute to an element. If the CSS attribute is not supported,
+ * The blur attribute applies the CSS blur attribute to an element. Safari only.
- * it will fall back to applying a semi-transparent background color to the element.
  *
  * @usage
  * ```html
@@ -21,6 +20,6 @@ import {Directive, Renderer, ElementRef} from 'angular2/core';
 })
 export class Blur {
   constructor(private _elementRef: ElementRef, private _renderer: Renderer) {
-    _renderer.setElementStyle(_elementRef, '-webkit-backdrop-filter', 'blur(10px)');
+    _renderer.setElementStyle(_elementRef.nativeElement, '-webkit-backdrop-filter', 'blur(10px)');
   }
 }

ionic/components/blur/test/basic/index.ts

@@ -0,0 +1,10 @@
+import {App} from 'ionic/ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor() {
+  }
+}

ionic/components/blur/test/basic/main.html

@@ -0,0 +1,34 @@
+
+<ion-toolbar>
+  <ion-title>Blur</ion-title>
+</ion-toolbar>
+
+<ion-content>
+  <div class="blur-content">
+    <ion-card blur class="blur-card">
+      <ion-card-header>
+        Card
+      </ion-card-header>
+      <ion-card-content>
+        This card will blur the content behind it.
+      </ion-card-content>
+    </ion-card>
+  </div>
+</ion-content>
+
+<style>
+  .blur-content {
+    position: absolute;
+    text-align:center;
+    background: url('bg.jpg') no-repeat transparent;
+    background-size: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  .blur-card,
+  .blur-card ion-card-header {
+    background: transparent;
+    color: white;
+  }
+</style>