From 2ebdb366b9e824a89a7547566a63cb324f06e825 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 8 Dec 2017 13:09:17 -0500
Subject: [PATCH] test(core): add a standalone test for every component with a
 test

---
 .../action-sheet/test/standalone/index.html   |  58 ++++
 .../alert/test/standalone/index.html          |  31 ++
 .../avatar/test/standalone/index.html         |  16 ++
 .../badge/test/standalone/index.html          |  18 ++
 .../button/test/standalone/index.html         |  18 ++
 .../card/test/standalone/index.html           |  33 +++
 .../checkbox/test/standalone/index.html       |  20 ++
 .../chip/test/standalone/index.html           |  47 +++
 .../datetime/test/standalone/index.html       |  14 +
 .../components/fab/test/standalone/index.html |  32 +++
 .../grid/test/standalone/index.html           | 268 ++++++++++++++++++
 .../icon/test/standalone/index.html           |  22 ++
 .../infinite-scroll/test/basic/index.html     |   1 -
 .../test/standalone/index.html                |  69 +++++
 .../input/test/standalone/index.html          |  17 ++
 .../item-sliding/test/standalone/index.html   |  46 +++
 .../item/test/standalone/index.html           |  48 ++++
 .../label/test/standalone/index.html          |  18 ++
 .../list/test/standalone/index.html           |  33 +++
 .../loading/test/standalone/index.html        |  28 ++
 .../menu/test/standalone/index.html           |  68 +++++
 .../modal/test/standalone/index.html          |  27 ++
 .../popover/test/standalone/index.html        |  47 +++
 .../radio-group/test/standalone/index.html    |  22 ++
 .../radio/test/standalone/index.html          |  20 ++
 .../range/test/standalone/index.html          |  24 ++
 .../reorder/test/standalone/index.html        |  63 ++++
 .../searchbar/test/standalone/index.html      |  89 ++++++
 .../segment/test/standalone/index.html        |  48 ++++
 .../select/test/standalone/index.html         |  62 ++++
 .../components/slides/test/basic/index.html   |  35 +--
 .../slides/test/standalone/index.html         |  28 ++
 .../spinner/test/standalone/index.html        |  21 ++
 .../textarea/test/standalone/index.html       |  16 ++
 .../thumbnail/test/standalone/index.html      |  16 ++
 .../toast/test/standalone/index.html          |  29 ++
 .../toggle/test/standalone/index.html         |  19 ++
 .../toolbar/test/standalone/index.html        |  36 +++
 38 files changed, 1489 insertions(+), 18 deletions(-)
 create mode 100644 packages/core/src/components/action-sheet/test/standalone/index.html
 create mode 100644 packages/core/src/components/alert/test/standalone/index.html
 create mode 100644 packages/core/src/components/avatar/test/standalone/index.html
 create mode 100644 packages/core/src/components/badge/test/standalone/index.html
 create mode 100644 packages/core/src/components/button/test/standalone/index.html
 create mode 100644 packages/core/src/components/card/test/standalone/index.html
 create mode 100644 packages/core/src/components/checkbox/test/standalone/index.html
 create mode 100644 packages/core/src/components/chip/test/standalone/index.html
 create mode 100644 packages/core/src/components/datetime/test/standalone/index.html
 create mode 100644 packages/core/src/components/fab/test/standalone/index.html
 create mode 100644 packages/core/src/components/grid/test/standalone/index.html
 create mode 100644 packages/core/src/components/icon/test/standalone/index.html
 create mode 100644 packages/core/src/components/infinite-scroll/test/standalone/index.html
 create mode 100644 packages/core/src/components/input/test/standalone/index.html
 create mode 100644 packages/core/src/components/item-sliding/test/standalone/index.html
 create mode 100644 packages/core/src/components/item/test/standalone/index.html
 create mode 100644 packages/core/src/components/label/test/standalone/index.html
 create mode 100644 packages/core/src/components/list/test/standalone/index.html
 create mode 100644 packages/core/src/components/loading/test/standalone/index.html
 create mode 100644 packages/core/src/components/menu/test/standalone/index.html
 create mode 100644 packages/core/src/components/modal/test/standalone/index.html
 create mode 100644 packages/core/src/components/popover/test/standalone/index.html
 create mode 100644 packages/core/src/components/radio-group/test/standalone/index.html
 create mode 100644 packages/core/src/components/radio/test/standalone/index.html
 create mode 100644 packages/core/src/components/range/test/standalone/index.html
 create mode 100644 packages/core/src/components/reorder/test/standalone/index.html
 create mode 100644 packages/core/src/components/searchbar/test/standalone/index.html
 create mode 100644 packages/core/src/components/segment/test/standalone/index.html
 create mode 100644 packages/core/src/components/select/test/standalone/index.html
 create mode 100644 packages/core/src/components/slides/test/standalone/index.html
 create mode 100644 packages/core/src/components/spinner/test/standalone/index.html
 create mode 100644 packages/core/src/components/textarea/test/standalone/index.html
 create mode 100644 packages/core/src/components/thumbnail/test/standalone/index.html
 create mode 100644 packages/core/src/components/toast/test/standalone/index.html
 create mode 100644 packages/core/src/components/toggle/test/standalone/index.html
 create mode 100644 packages/core/src/components/toolbar/test/standalone/index.html

diff --git a/packages/core/src/components/action-sheet/test/standalone/index.html b/packages/core/src/components/action-sheet/test/standalone/index.html
new file mode 100644
index 0000000000..c10536a869
--- /dev/null
+++ b/packages/core/src/components/action-sheet/test/standalone/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Action Sheet - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-action-sheet-controller></ion-action-sheet-controller>
+
+  <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+
+  <script>
+    async function presentBasic() {
+      const mode = Ionic.mode;
+
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Albums",
+        buttons: [{
+          text: 'Delete',
+          role: 'destructive',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      await actionSheetElement.present();
+    }
+
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/alert/test/standalone/index.html b/packages/core/src/components/alert/test/standalone/index.html
new file mode 100644
index 0000000000..dfe192231c
--- /dev/null
+++ b/packages/core/src/components/alert/test/standalone/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Alert - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-alert-controller></ion-alert-controller>
+
+  <ion-button expand="block" onclick="presentAlert()">Alert</ion-button>
+
+  <script>
+    async function presentAlert() {
+      var alertController = document.querySelector('ion-alert-controller');
+      await alertController.componentOnReady();
+      const alert = await alertController.create({
+        title: 'Alert',
+        subTitle: 'Subtitle',
+        message: 'This is an alert message.',
+        buttons: ['OK']
+      });
+      return await alert.present();
+    }
+  </script>
+</body>
+
+</html>
diff --git a/packages/core/src/components/avatar/test/standalone/index.html b/packages/core/src/components/avatar/test/standalone/index.html
new file mode 100644
index 0000000000..f581adbc7c
--- /dev/null
+++ b/packages/core/src/components/avatar/test/standalone/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Avatar - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-avatar>
+    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+  </ion-avatar>
+</body>
+</html>
diff --git a/packages/core/src/components/badge/test/standalone/index.html b/packages/core/src/components/badge/test/standalone/index.html
new file mode 100644
index 0000000000..71a9833207
--- /dev/null
+++ b/packages/core/src/components/badge/test/standalone/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Badge - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-badge color="primary">11</ion-badge>
+  <ion-badge color="secondary">22</ion-badge>
+  <ion-badge color="danger">33</ion-badge>
+  <ion-badge color="light">44</ion-badge>
+  <ion-badge color="dark">55</ion-badge>
+</body>
+</html>
diff --git a/packages/core/src/components/button/test/standalone/index.html b/packages/core/src/components/button/test/standalone/index.html
new file mode 100644
index 0000000000..9566ca5474
--- /dev/null
+++ b/packages/core/src/components/button/test/standalone/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Button - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-button color="primary">Primary</ion-button>
+  <ion-button color="secondary">Secondary</ion-button>
+  <ion-button color="danger">Danger</ion-button>
+  <ion-button color="light">Light</ion-button>
+  <ion-button color="dark">Dark</ion-button>
+</body>
+</html>
diff --git a/packages/core/src/components/card/test/standalone/index.html b/packages/core/src/components/card/test/standalone/index.html
new file mode 100644
index 0000000000..bba685c5c4
--- /dev/null
+++ b/packages/core/src/components/card/test/standalone/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Card - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-card>
+    <ion-card-content>
+      This is just your basic card with some text to boot. Like it? Keep scrolling...
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-subtitle>
+        Subtitle
+      </ion-card-subtitle>
+      <ion-card-title>
+        Title
+      </ion-card-title>
+    </ion-card-header>
+
+    <ion-card-content>
+      The British use the term "header", but the American term "head-shot" the English simply refuse to adopt.
+    </ion-card-content>
+  </ion-card>
+</body>
+</html>
diff --git a/packages/core/src/components/checkbox/test/standalone/index.html b/packages/core/src/components/checkbox/test/standalone/index.html
new file mode 100644
index 0000000000..34b880e48d
--- /dev/null
+++ b/packages/core/src/components/checkbox/test/standalone/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Checkbox - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-checkbox checked></ion-checkbox>
+  <ion-checkbox color="primary" checked></ion-checkbox>
+  <ion-checkbox color="secondary" checked></ion-checkbox>
+  <ion-checkbox color="danger" checked></ion-checkbox>
+  <ion-checkbox color="dark" checked></ion-checkbox>
+  <ion-checkbox color="light" checked></ion-checkbox>
+  <ion-checkbox disabled></ion-checkbox>
+</body>
+</html>
diff --git a/packages/core/src/components/chip/test/standalone/index.html b/packages/core/src/components/chip/test/standalone/index.html
new file mode 100644
index 0000000000..222bbb563e
--- /dev/null
+++ b/packages/core/src/components/chip/test/standalone/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Chip - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-chip>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label color="secondary">Secondary Label</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Another With Longer Text</ion-label>
+  </ion-chip>
+
+  <ion-chip color="primary">
+    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-label>Primary</ion-label>
+  </ion-chip>
+
+  <ion-chip color="secondary">
+    <ion-label color="dark">Secondary w/ Dark label</ion-label>
+  </ion-chip>
+
+  <ion-chip color="danger">
+    <ion-label>Danger</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-icon name="pin"></ion-icon>
+    <ion-label>Default</ion-label>
+  </ion-chip>
+
+  <ion-chip>
+    <ion-label>Secondary</ion-label>
+    <ion-icon name="pin" color="secondary"></ion-icon>
+  </ion-chip>
+</body>
+</html>
diff --git a/packages/core/src/components/datetime/test/standalone/index.html b/packages/core/src/components/datetime/test/standalone/index.html
new file mode 100644
index 0000000000..529f3a758c
--- /dev/null
+++ b/packages/core/src/components/datetime/test/standalone/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Datetime - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-datetime display-format="MMMM" value="2012-12-15T13:47:20.789"></ion-datetime>
+</body>
+</html>
diff --git a/packages/core/src/components/fab/test/standalone/index.html b/packages/core/src/components/fab/test/standalone/index.html
new file mode 100644
index 0000000000..169f001029
--- /dev/null
+++ b/packages/core/src/components/fab/test/standalone/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>FAB - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-fab top right id="fab1">
+    <ion-fab-button onclick="openLists('fab1')" mini class="e2eFabTopRight"><ion-icon name="add"></ion-icon></ion-fab-button>
+    <ion-fab-list>
+      <ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
+      <ion-fab-button onclick="openLists('fab1')"><ion-icon name="logo-googleplus"></ion-icon></ion-fab-button>
+    </ion-fab-list>
+  </ion-fab>
+
+  <script>
+    function openLists(container) {
+      var fabLists = document.getElementById(container).querySelectorAll('ion-fab-list');
+
+      for (var i = 0; i < fabLists.length; i++) {
+        fabLists[i].activated = true;
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/grid/test/standalone/index.html b/packages/core/src/components/grid/test/standalone/index.html
new file mode 100644
index 0000000000..8b411fe4c9
--- /dev/null
+++ b/packages/core/src/components/grid/test/standalone/index.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Grid - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-grid>
+    <ion-row>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-6>
+        <div>
+          ion-col[width-50]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-3>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col col-3>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-3>
+        <div>
+          ion-col[width-25]
+        </div>
+      </ion-col>
+      <ion-col col-3 offset-3>
+        <div>
+          ion-col[width-25][offset-25]
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col>
+        <div>
+          ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col align-self-start>
+        <div>
+          ion-col[top]
+        </div>
+      </ion-col>
+      <ion-col align-self-center>
+        <div>
+          ion-col[center]
+        </div>
+      </ion-col>
+      <ion-col align-self-end>
+        <div>
+          ion-col[bottom]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-start>
+      <ion-col>
+        <div>
+          [top] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [top] ion-col
+        </div>
+      </ion-col>
+      <ion-col align-self-end>
+        <div>
+          [top] ion-col[bottom]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-center>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [center] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row align-items-end>
+      <ion-col>
+        <div>
+          [bottom] ion-col
+        </div>
+      </ion-col>
+      <ion-col align-self-start>
+        <div>
+          [bottom] ion-col[top]
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          [bottom] ion-col
+        </div>
+      </ion-col>
+      <ion-col>
+        <div>
+          ion-col<br>#<br>#
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-12 col-sm>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-sm>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-sm>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-sm>
+        <div>
+          [responsive-sm] ion-col
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row>
+      <ion-col col-12 col-md>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-md>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-md>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+      <ion-col col-12 col-md>
+        <div>
+          [responsive-md] ion-col
+        </div>
+      </ion-col>
+    </ion-row>
+
+    <ion-row responsive-lg>
+      <ion-col col-6 offset-3>
+        <div>
+          [responsive-lg] ion-col[width-50][offset-25]
+        </div>
+      </ion-col>
+      <ion-col col-3>
+        <div>
+          [responsive-lg] ion-col[width-25]
+        </div>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+
+  <style>
+    ion-col div {
+      background-color: #f7f7f7;
+      border: 1px solid #ddd;
+      padding: 10px 5px;
+    }
+  </style>
+</body>
+</html>
diff --git a/packages/core/src/components/icon/test/standalone/index.html b/packages/core/src/components/icon/test/standalone/index.html
new file mode 100644
index 0000000000..b822398ecf
--- /dev/null
+++ b/packages/core/src/components/icon/test/standalone/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Icon - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-icon name="logo-ionic" color="primary"></ion-icon>
+  <ion-icon name="logo-ionitron" color="primary"></ion-icon>
+  <ion-icon name="heart" color="secondary"></ion-icon>
+  <ion-icon name="logo-angular" color="danger"></ion-icon>
+
+  <ion-icon name="happy"></ion-icon>
+  <ion-icon name="people"></ion-icon>
+  <ion-icon name="lock"></ion-icon>
+  <ion-icon name="key"></ion-icon>
+</body>
+</html>
diff --git a/packages/core/src/components/infinite-scroll/test/basic/index.html b/packages/core/src/components/infinite-scroll/test/basic/index.html
index 9042e2e979..57a6e0187d 100644
--- a/packages/core/src/components/infinite-scroll/test/basic/index.html
+++ b/packages/core/src/components/infinite-scroll/test/basic/index.html
@@ -39,7 +39,6 @@
     </ion-page>
 
   </ion-app>
-  <ion-menu-controller></ion-menu-controller>
 
   <script>
     let items = [];
diff --git a/packages/core/src/components/infinite-scroll/test/standalone/index.html b/packages/core/src/components/infinite-scroll/test/standalone/index.html
new file mode 100644
index 0000000000..6a64f000a2
--- /dev/null
+++ b/packages/core/src/components/infinite-scroll/test/standalone/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Infinite Scroll - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-list id="list">
+
+  </ion-list>
+
+  <ion-infinite-scroll threshold="100px" id="infinite-scroll">
+    <ion-infinite-scroll-content
+      loadingSpinner="bubbles"
+      loadingText="Loading more data...">
+    </ion-infinite-scroll-content>
+  </ion-infinite-scroll>
+
+  <script>
+    let items = [];
+    for (var i = 0; i < 30; i++) {
+      items.push( i+1 );
+    }
+    const list = document.getElementById('list');
+    const infiniteScroll = document.getElementById('infinite-scroll');
+
+    function toggleInfiniteScroll() {
+      infiniteScroll.enabled = !infiniteScroll.enabled;
+    }
+
+    infiniteScroll.addEventListener('ionInfinite', async function() {
+      console.log('Loading data...');
+      const data = await getAsyncData();
+      items = items.concat(data);
+      infiniteScroll.complete();
+      render();
+      console.log('Done');
+    });
+
+    function render() {
+      let html = '';
+      for(let item of items) {
+        html += `<ion-item>${item}</ion-item>`;
+      }
+      list.innerHTML = html;
+    }
+
+    function getAsyncData() {
+      // async return mock data
+      return new Promise(resolve => {
+        setTimeout(() => {
+          let data = [];
+          for (var i = 0; i < 30; i++) {
+            data.push(i);
+          }
+
+          resolve(data);
+        }, 500);
+      });
+    }
+    render();
+
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/input/test/standalone/index.html b/packages/core/src/components/input/test/standalone/index.html
new file mode 100644
index 0000000000..d5b8ecc36d
--- /dev/null
+++ b/packages/core/src/components/input/test/standalone/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Input - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-input placeholder="Input"></ion-input>
+  <ion-input value="value"></ion-input>
+  <ion-input type="number" placeholder="Enter a Number"></ion-input>
+  <ion-input type="number" value="44"></ion-input>
+</body>
+</html>
diff --git a/packages/core/src/components/item-sliding/test/standalone/index.html b/packages/core/src/components/item-sliding/test/standalone/index.html
new file mode 100644
index 0000000000..729c6216ce
--- /dev/null
+++ b/packages/core/src/components/item-sliding/test/standalone/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item Sliding - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        One Line, icon only
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option color="secondary">
+        <ion-icon slot="icon-only" name="heart"></ion-icon>
+      </ion-item-option>
+      <ion-item-option color="danger">
+        <ion-icon slot="icon-only" name="close"></ion-icon>
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+
+  <ion-item-sliding>
+    <ion-item>
+      <ion-label>
+        One Line, icon and text
+      </ion-label>
+    </ion-item>
+    <ion-item-options>
+      <ion-item-option color="primary">
+        <ion-icon name="more"></ion-icon>
+        <span class="more-text">More</span>
+      </ion-item-option>
+      <ion-item-option color="secondary">
+        <ion-icon name="archive"></ion-icon>
+        <span class="archive-text">Archive</span>
+      </ion-item-option>
+    </ion-item-options>
+  </ion-item-sliding>
+</body>
+</html>
diff --git a/packages/core/src/components/item/test/standalone/index.html b/packages/core/src/components/item/test/standalone/index.html
new file mode 100644
index 0000000000..d18e7d658b
--- /dev/null
+++ b/packages/core/src/components/item/test/standalone/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Item - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-item>
+    <ion-label>Item Text</ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>
+      <h1>Item Multiline Text</h1>
+      <h2>Heading</h2>
+      <h3>Heading</h3>
+    </ion-label>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Item Icons</ion-label>
+    <ion-icon name="heart" slot="end"></ion-icon>
+    <ion-icon name="star" slot="start"></ion-icon>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Item Button</ion-label>
+    <ion-button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</ion-button>
+    <ion-button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></ion-button>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Item Avatar</ion-label>
+    <ion-avatar slot="start"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-avatar>
+    <ion-avatar slot="end"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-avatar>
+  </ion-item>
+
+  <ion-item>
+    <ion-label>Item Thumbnail</ion-label>
+    <ion-thumbnail slot="start"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-thumbnail>
+    <ion-thumbnail slot="end"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs="></ion-thumbnail>
+  </ion-item>
+</body>
+</html>
diff --git a/packages/core/src/components/label/test/standalone/index.html b/packages/core/src/components/label/test/standalone/index.html
new file mode 100644
index 0000000000..4955f7bf76
--- /dev/null
+++ b/packages/core/src/components/label/test/standalone/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Label - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-label>Default</ion-label>
+  <ion-label>Wrap label this label just goes on and on and on</ion-label>
+  <ion-label fixed>Fixed</ion-label>
+  <ion-label floating>Floating</ion-label>
+  <ion-label stacked>Stacked</ion-label>
+</body>
+</html>
diff --git a/packages/core/src/components/list/test/standalone/index.html b/packages/core/src/components/list/test/standalone/index.html
new file mode 100644
index 0000000000..9f1f4edc78
--- /dev/null
+++ b/packages/core/src/components/list/test/standalone/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>List - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-list>
+    <ion-item>Pokémon Yellow</ion-item>
+    <ion-item>Super Metroid</ion-item>
+    <ion-item>Mega Man X</ion-item>
+    <ion-item>The Legend of Zelda</ion-item>
+    <ion-item>Pac-Man</ion-item>
+    <ion-item>Super Mario World</ion-item>
+    <ion-item>Street Fighter II</ion-item>
+    <ion-item>Half Life</ion-item>
+    <ion-item>Portal</ion-item>
+    <ion-item>Final Fantasy VII</ion-item>
+    <ion-item>Star Fox</ion-item>
+    <ion-item>Tetris</ion-item>
+    <ion-item>Donkey Kong III</ion-item>
+    <ion-item>Goldeneye 007</ion-item>
+    <ion-item>Doom</ion-item>
+    <ion-item>Fallout</ion-item>
+    <ion-item>GTA</ion-item>
+    <ion-item>Halo</ion-item>
+  </ion-list>
+</body>
+</html>
diff --git a/packages/core/src/components/loading/test/standalone/index.html b/packages/core/src/components/loading/test/standalone/index.html
new file mode 100644
index 0000000000..66432e49dd
--- /dev/null
+++ b/packages/core/src/components/loading/test/standalone/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Loading - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-button expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
+
+  <ion-loading-controller></ion-loading-controller>
+
+  <script>
+    async function presentLoading() {
+      const loadingController = document.querySelector('ion-loading-controller');
+      await loadingController.componentOnReady();
+      const loadingElement = await loadingController.create({
+        message: 'Hellooo',
+        duration: 2000
+      });
+      return await loadingElement.present();
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/menu/test/standalone/index.html b/packages/core/src/components/menu/test/standalone/index.html
new file mode 100644
index 0000000000..e08418d5aa
--- /dev/null
+++ b/packages/core/src/components/menu/test/standalone/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Menu - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-menu side="left">
+    <ion-header>
+      <ion-toolbar color="secondary">
+        <ion-title>Left Menu</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-item>Open Right Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+        <ion-item detail-none>Close Menu</ion-item>
+      </ion-list>
+    </ion-content>
+
+    <ion-footer>
+      <ion-toolbar color="secondary">
+        <ion-title>Footer</ion-title>
+      </ion-toolbar>
+    </ion-footer>
+
+  </ion-menu>
+
+  <ion-page main>
+
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Menu - Basic</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content padding>
+      <p>
+        <ion-button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</ion-button>
+        <ion-button onclick="openRight()">Open right menu</ion-button>
+      </p>
+      <p>
+        <ion-button onclick="setPush()">Set Push</ion-button>
+        <ion-button onclick="setOverlay()">Set Overlay</ion-button>
+        <ion-button onclick="setReveal()">Set Reveal</ion-button>
+
+        <ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
+      </p>
+    </ion-content>
+
+  </ion-page>
+</body>
+</html>
diff --git a/packages/core/src/components/modal/test/standalone/index.html b/packages/core/src/components/modal/test/standalone/index.html
new file mode 100644
index 0000000000..249046bf2b
--- /dev/null
+++ b/packages/core/src/components/modal/test/standalone/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Modal - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-button expand="block" onclick="presentModal()">Present Modal</ion-button>
+
+  <ion-modal-controller></ion-modal-controller>
+
+  <script>
+    async function presentModal() {
+      const modalController = document.querySelector('ion-modal-controller');
+      await modalController.componentOnReady();
+      const modalElement = await modalController.create({
+        component: 'page-one'
+      });
+      modalElement.present();
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/popover/test/standalone/index.html b/packages/core/src/components/popover/test/standalone/index.html
new file mode 100644
index 0000000000..31102ced18
--- /dev/null
+++ b/packages/core/src/components/popover/test/standalone/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Popover - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-button expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
+
+  <ion-popover-controller></ion-popover-controller>
+
+  <script>
+    async function presentPopover(opts) {
+      const popoverController = document.querySelector('ion-popover-controller');
+      await popoverController.componentOnReady();
+      const popoverElement = await popoverController.create(opts);
+      return await popoverElement.present();
+    }
+
+    class ProfilePage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `
+          <ion-content>
+            <ion-list>
+              <ion-list-header>Ionic</ion-list-header>
+              <ion-item><ion-label>Item 0</ion-label></ion-item>
+              <ion-item><ion-label>Item 1</ion-label></ion-item>
+              <ion-item><ion-label>Item 2</ion-label></ion-item>
+              <ion-item><ion-label>Item 3</ion-label></ion-item>
+            </ion-list>
+          </ion-content>
+        `;
+      }
+    }
+
+    customElements.define('profile-page', ProfilePage);
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/radio-group/test/standalone/index.html b/packages/core/src/components/radio-group/test/standalone/index.html
new file mode 100644
index 0000000000..06fab200e6
--- /dev/null
+++ b/packages/core/src/components/radio-group/test/standalone/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Radio Group - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-radio-group>
+    <ion-radio></ion-radio>
+    <ion-radio color="primary"></ion-radio>
+    <ion-radio color="secondary"></ion-radio>
+    <ion-radio color="danger" checked></ion-radio>
+    <ion-radio color="dark"></ion-radio>
+    <ion-radio color="light"></ion-radio>
+    <ion-radio disabled></ion-radio>
+  </ion-radio-group>
+</body>
+</html>
diff --git a/packages/core/src/components/radio/test/standalone/index.html b/packages/core/src/components/radio/test/standalone/index.html
new file mode 100644
index 0000000000..45c42b9ee8
--- /dev/null
+++ b/packages/core/src/components/radio/test/standalone/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Radio - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-radio checked></ion-radio>
+  <ion-radio color="primary" checked></ion-radio>
+  <ion-radio color="secondary" checked></ion-radio>
+  <ion-radio color="danger" checked></ion-radio>
+  <ion-radio color="dark" checked></ion-radio>
+  <ion-radio color="light" checked></ion-radio>
+  <ion-radio disabled></ion-radio>
+</body>
+</html>
diff --git a/packages/core/src/components/range/test/standalone/index.html b/packages/core/src/components/range/test/standalone/index.html
new file mode 100644
index 0000000000..0870bdc4ed
--- /dev/null
+++ b/packages/core/src/components/range/test/standalone/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Range - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-range value="20"></ion-range>
+  <ion-range value="60" color="light"></ion-range>
+  <ion-range value="80" color="dark"></ion-range>
+  <ion-range pin="true" color="secondary" value="86">
+    <ion-icon small name="ios-sunny-outline" slot="start"></ion-icon>
+    <ion-icon name="ios-sunny" slot="end"></ion-icon>
+  </ion-range>
+  <ion-range pin="true" color="danger" value="54">
+    <ion-icon small name="ios-thermometer-outline" slot="start"></ion-icon>
+    <ion-icon name="ios-thermometer" slot="end"></ion-icon>
+  </ion-range>
+</body>
+</html>
diff --git a/packages/core/src/components/reorder/test/standalone/index.html b/packages/core/src/components/reorder/test/standalone/index.html
new file mode 100644
index 0000000000..3f13611b5e
--- /dev/null
+++ b/packages/core/src/components/reorder/test/standalone/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Reorder - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-reorder-group id="reorder">
+
+    <div>
+      Item 1 (default ion-reorder)
+      <ion-reorder></ion-reorder>
+    </div>
+
+    <div>
+      Item 2 (default ion-reorder)
+      <ion-reorder></ion-reorder>
+    </div>
+
+    <div>
+      Item 3 (default ion-reorder)
+      <ion-reorder></ion-reorder>
+    </div>
+
+    <div>
+      Item 4 (default ion-reorder)
+      <ion-reorder></ion-reorder>
+    </div>
+
+    <div>
+      Item 5 (custom ion-reorder)
+      <ion-reorder><ion-icon name="pizza"></ion-reorder>
+    </div>
+
+    <div>
+      Item 6 (custom ion-reorder)
+      <ion-reorder><ion-icon name="pizza"></ion-reorder>
+    </div>
+
+    <div>
+      Item 7 (custom ion-reorder)
+      <ion-reorder><ion-icon name="pizza"></ion-reorder>
+    </div>
+
+    <ion-reorder>
+      <div>Item 8 (the whole item can be dragged)</div>
+    </ion-reorder>
+
+    <ion-reorder>
+      <div>Item 9 (the whole item can be dragged)</div>
+    </ion-reorder>
+
+    <ion-reorder>
+      <div>Item 10 (the whole item can be dragged)</div>
+    </ion-reorder>
+
+  </ion-reorder-group>
+</body>
+</html>
diff --git a/packages/core/src/components/searchbar/test/standalone/index.html b/packages/core/src/components/searchbar/test/standalone/index.html
new file mode 100644
index 0000000000..aed5cb863b
--- /dev/null
+++ b/packages/core/src/components/searchbar/test/standalone/index.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Searchbar - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-searchbar
+    value="test"
+    type="tel"
+    show-cancel-button
+    debounce="500">
+  </ion-searchbar>
+
+  <ion-searchbar
+    animated="true"
+    show-cancel-button
+    debounce="500">
+  </ion-searchbar>
+
+  <ion-searchbar
+    id="dynamicProp"
+    value="33"
+    autocorrect="on"
+    show-cancel-button="true"
+    autocomplete="on"
+    spellcheck="false"
+    type="number"
+    placeholder="Filter Schedules">
+  </ion-searchbar>
+
+  <ion-searchbar
+    value="after view"
+    autocorrect="off"
+    autocomplete="off"
+    spellcheck="true"
+    type="text"
+    show-cancel-button="false">
+  </ion-searchbar>
+
+  <ion-searchbar
+    show-cancel-button
+    cancel-button-text="Really Long Cancel"
+    color="danger">
+  </ion-searchbar>
+
+  <ion-searchbar
+    value="mysearch"
+    cancel-button-text="Really Long Cancel"
+    color="dark"
+    show-cancel-button>
+  </ion-searchbar>
+
+  <ion-searchbar
+    mode="ios"
+    animated="true"
+    show-cancel-button
+    placeholder="Search">
+  </ion-searchbar>
+
+  <ion-searchbar
+    mode="md"
+    animated="true"
+    show-cancel-button
+    placeholder="Search">
+  </ion-searchbar>
+
+  <ion-searchbar
+    autocorrect="on"
+    show-cancel-button="true"
+    autocomplete="on"
+    spellcheck="true"
+    type="text"
+    debounce="5000"
+    placeholder="Check the log">
+  </ion-searchbar>
+
+  <ion-searchbar
+    id="dynamicAttr"
+    placeholder="Search"
+    animated="true"
+    show-cancel-button="false">
+  </ion-searchbar>
+</body>
+</html>
diff --git a/packages/core/src/components/segment/test/standalone/index.html b/packages/core/src/components/segment/test/standalone/index.html
new file mode 100644
index 0000000000..dd88053f6e
--- /dev/null
+++ b/packages/core/src/components/segment/test/standalone/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Segment - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-segment color="dark" value="Reading List">
+    <ion-segment-button value="Bookmarks">
+      <ion-icon name="book"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="Reading List">
+      <ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
+    </ion-segment-button>
+    <ion-segment-button value="Shared Links">
+      <ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment color="danger">
+    <ion-segment-button value="Bookmarks">
+      Bookmarks
+    </ion-segment-button>
+    <ion-segment-button value="Reading List">
+      Reading List
+    </ion-segment-button>
+    <ion-segment-button value="Shared Links">
+      Shared Links
+    </ion-segment-button>
+  </ion-segment>
+
+  <ion-segment color="secondary" value="active">
+    <ion-segment-button value="active">
+      Active
+    </ion-segment-button>
+    <ion-segment-button value="disabled" disabled="true">
+      Disabled
+    </ion-segment-button>
+    <ion-segment-button value="inactive" disabled="false">
+      Inactive
+    </ion-segment-button>
+  </ion-segment>
+</body>
+</html>
diff --git a/packages/core/src/components/select/test/standalone/index.html b/packages/core/src/components/select/test/standalone/index.html
new file mode 100644
index 0000000000..b1a019ecd2
--- /dev/null
+++ b/packages/core/src/components/select/test/standalone/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Select - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-select name="gender" placeholder="Select One">
+    <ion-select-option value="f">Female</ion-select-option>
+    <ion-select-option value="m">Male</ion-select-option>
+  </ion-select>
+
+  <ion-select name="hairColor" ok-text="Okay" cancel-text="Dismiss">
+    <ion-select-option value="brown" selected>Brown</ion-select-option>
+    <ion-select-option value="blonde">Blonde</ion-select-option>
+    <ion-select-option value="black">Black</ion-select-option>
+    <ion-select-option value="red">Red</ion-select-option>
+  </ion-select>
+
+  <ion-select name="gaming" ok-text="Okay" cancel-text="Dismiss">
+    <ion-select-option value="nes">NES</ion-select-option>
+    <ion-select-option value="n64">Nintendo64</ion-select-option>
+    <ion-select-option value="ps">PlayStation</ion-select-option>
+    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
+    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
+    <ion-select-option value="snes">SNES</ion-select-option>
+  </ion-select>
+
+  <ion-select placeholder="Month">
+    <ion-select-option value="01">January</ion-select-option>
+    <ion-select-option value="02">February</ion-select-option>
+    <ion-select-option value="03" selected="true">March</ion-select-option>
+    <ion-select-option value="04">April</ion-select-option>
+    <ion-select-option value="05">May</ion-select-option>
+    <ion-select-option value="06">June</ion-select-option>
+    <ion-select-option value="07">July</ion-select-option>
+    <ion-select-option value="08">August</ion-select-option>
+    <ion-select-option value="09">September</ion-select-option>
+    <ion-select-option value="10">October</ion-select-option>
+    <ion-select-option value="11">November</ion-select-option>
+    <ion-select-option value="12">December</ion-select-option>
+  </ion-select>
+
+  <ion-select placeholder="Year">
+    <ion-select-option>1989</ion-select-option>
+    <ion-select-option>1990</ion-select-option>
+    <ion-select-option>1991</ion-select-option>
+    <ion-select-option>1992</ion-select-option>
+    <ion-select-option>1993</ion-select-option>
+    <ion-select-option selected="true">1994</ion-select-option>
+    <ion-select-option>1995</ion-select-option>
+    <ion-select-option>1996</ion-select-option>
+    <ion-select-option>1997</ion-select-option>
+    <ion-select-option>1998</ion-select-option>
+    <ion-select-option>1999</ion-select-option>
+  </ion-select>
+</body>
+</html>
diff --git a/packages/core/src/components/slides/test/basic/index.html b/packages/core/src/components/slides/test/basic/index.html
index 55858adfa9..5ac5ea175b 100644
--- a/packages/core/src/components/slides/test/basic/index.html
+++ b/packages/core/src/components/slides/test/basic/index.html
@@ -6,23 +6,24 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <script src="/dist/ionic.js"></script>
 </head>
+
 <body>
-
-<ion-slides style="background: black" pager="true" effect="flip">
-
-  <ion-slide style="background: red; color: white;">
-    <h1>Slide 1</h1>
-  </ion-slide>
-
-  <ion-slide style="background: white; color: blue;">
-    <h1>Slide 2</h1>
-  </ion-slide>
-
-  <ion-slide style="background: blue; color: white;">
-    <h1>Slide 3</h1>
-  </ion-slide>
-
-</ion-slides>
-
+  <ion-app>
+    <ion-page>
+      <ion-content>
+        <ion-slides style="background: black" pager="true" effect="flip">
+          <ion-slide style="background: red; color: white;">
+            <h1>Slide 1</h1>
+          </ion-slide>
+          <ion-slide style="background: white; color: blue;">
+            <h1>Slide 2</h1>
+          </ion-slide>
+          <ion-slide style="background: blue; color: white;">
+            <h1>Slide 3</h1>
+          </ion-slide>
+        </ion-slides>
+      </ion-content>
+    </ion-page>
+  </ion-app>
 </body>
 </html>
diff --git a/packages/core/src/components/slides/test/standalone/index.html b/packages/core/src/components/slides/test/standalone/index.html
new file mode 100644
index 0000000000..c863d9a5d8
--- /dev/null
+++ b/packages/core/src/components/slides/test/standalone/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Slides - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-slides style="background: black" pager="true" effect="flip">
+
+    <ion-slide style="background: red; color: white;">
+      <h1>Slide 1</h1>
+    </ion-slide>
+
+    <ion-slide style="background: white; color: blue;">
+      <h1>Slide 2</h1>
+    </ion-slide>
+
+    <ion-slide style="background: blue; color: white;">
+      <h1>Slide 3</h1>
+    </ion-slide>
+
+  </ion-slides>
+</body>
+</html>
diff --git a/packages/core/src/components/spinner/test/standalone/index.html b/packages/core/src/components/spinner/test/standalone/index.html
new file mode 100644
index 0000000000..71c4bbab69
--- /dev/null
+++ b/packages/core/src/components/spinner/test/standalone/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Spinner - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-spinner></ion-spinner>
+  <ion-spinner name="lines"></ion-spinner>
+  <ion-spinner name="ios-small"></ion-spinner>
+  <ion-spinner name="dots"></ion-spinner>
+  <ion-spinner name="bubbles"></ion-spinner>
+  <ion-spinner name="circles"></ion-spinner>
+  <ion-spinner name="crescent"></ion-spinner>
+  <ion-spinner paused></ion-spinner>
+</body>
+</html>
diff --git a/packages/core/src/components/textarea/test/standalone/index.html b/packages/core/src/components/textarea/test/standalone/index.html
new file mode 100644
index 0000000000..5f47eafa61
--- /dev/null
+++ b/packages/core/src/components/textarea/test/standalone/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Textarea - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-textarea placeholder="Textarea"></ion-textarea>
+  <ion-textarea value="value"></ion-textarea>
+  <ion-textarea value="44"></ion-textarea>
+</body>
+</html>
diff --git a/packages/core/src/components/thumbnail/test/standalone/index.html b/packages/core/src/components/thumbnail/test/standalone/index.html
new file mode 100644
index 0000000000..a87628e614
--- /dev/null
+++ b/packages/core/src/components/thumbnail/test/standalone/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Thumbnail - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-thumbnail>
+    <img src="https://images.unsplash.com/photo-1485832329521-e944d75fa65e?auto=format&fit=crop&w=1950&q=80&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D"/>
+  </ion-thumbnail>
+</body>
+</html>
diff --git a/packages/core/src/components/toast/test/standalone/index.html b/packages/core/src/components/toast/test/standalone/index.html
new file mode 100644
index 0000000000..3c66c6115e
--- /dev/null
+++ b/packages/core/src/components/toast/test/standalone/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toast - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-button expand="block" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
+
+  <ion-toast-controller></ion-toast-controller>
+
+  <script>
+    async function presentToast(position) {
+      const toastController = document.querySelector('ion-toast-controller');
+      await toastController.componentOnReady();
+      const toastElement = await toastController.create({
+        message: 'Hellooo',
+        position,
+        duration: 2000
+      });
+      return await toastElement.present();
+    }
+  </script>
+</body>
+</html>
diff --git a/packages/core/src/components/toggle/test/standalone/index.html b/packages/core/src/components/toggle/test/standalone/index.html
new file mode 100644
index 0000000000..8bc1ae74c3
--- /dev/null
+++ b/packages/core/src/components/toggle/test/standalone/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toggle - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-toggle checked></ion-toggle>
+  <ion-toggle color="secondary" (ionChange)="kiwiChange($event)" checked></ion-toggle>
+  <ion-toggle color="danger" name="cherry" checked></ion-toggle>
+  <ion-toggle color="light" (ionChange)="strawberryChange($event)" checked="true"></ion-toggle>
+  <ion-toggle color="dark" checked></ion-toggle>
+  <ion-toggle checked disabled></ion-toggle>
+</body>
+</html>
diff --git a/packages/core/src/components/toolbar/test/standalone/index.html b/packages/core/src/components/toolbar/test/standalone/index.html
new file mode 100644
index 0000000000..24b602fffa
--- /dev/null
+++ b/packages/core/src/components/toolbar/test/standalone/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Standalone</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <script src="/dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-toolbar>
+    <ion-title>Toolbar</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="primary">
+    <ion-title>Primary</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="secondary">
+    <ion-title>Secondary</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="danger">
+    <ion-title>Danger</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="light">
+    <ion-title>Light</ion-title>
+  </ion-toolbar>
+
+  <ion-toolbar color="dark">
+    <ion-title>Dark</ion-title>
+  </ion-toolbar>
+</body>
+</html>