diff --git a/packages/core/src/components/action-sheet/test/standalone/e2e.js b/packages/core/src/components/action-sheet/test/standalone/e2e.js
index 3477762c28..5f372c56a8 100644
--- a/packages/core/src/components/action-sheet/test/standalone/e2e.js
+++ b/packages/core/src/components/action-sheet/test/standalone/e2e.js
@@ -1,7 +1,7 @@
 'use strict';
 
 const { By, until } = require('selenium-webdriver');
-const { register, Page, platforms } = require('../../../../../scripts/e2e');
+const { Page, platforms, register } = require('../../../../../scripts/e2e');
 
 class E2ETestPage extends Page {
   constructor(driver, platform) {
@@ -14,6 +14,11 @@ class E2ETestPage extends Page {
     await this.driver.wait(until.elementLocated(By.css('.action-sheet-container')));
     return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.action-sheet-container'))));
   }
+
+  async closeWithBackdrop() {
+    this.driver.findElement(By.css('ion-backdrop')).click();
+    return await this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
+  }
 }
 
 platforms.forEach(platform => {
@@ -27,5 +32,36 @@ platforms.forEach(platform => {
       const page = new E2ETestPage(driver, platform);
       return page.present('basic');
     });
+
+    register('should close with backdrop click', async driver => {
+      const page = new E2ETestPage(driver, platform);
+      await page.present('basic');
+      return page.closeWithBackdrop();
+    });
+
+    register('shows noBackdropDismiss',  (driver)  => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('noBackdropDismiss');
+    });
+
+    register('shows alertFromActionSheet',  (driver)  => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('alertFromActionSheet');
+    });
+
+    register('shows scrollableOptions',  (driver)  => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('scrollableOptions');
+    });
+
+    register('shows scrollWithoutCancel',  (driver)  => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('scrollWithoutCancel');
+    });
+
+    register('shows cancelOnly',  (driver)  => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('cancelOnly');
+    });
   });
 });
diff --git a/packages/core/src/components/action-sheet/test/standalone/index.html b/packages/core/src/components/action-sheet/test/standalone/index.html
index 232cc2d3de..ad74465867 100644
--- a/packages/core/src/components/action-sheet/test/standalone/index.html
+++ b/packages/core/src/components/action-sheet/test/standalone/index.html
@@ -9,14 +9,34 @@
 </head>
 
 <body>
-  <ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
+  <button id="basic" onclick="presentBasic()">Basic</button>
+  <button id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</button>
+  <button id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</button>
+  <button id="scrollableOptions" onclick="presentScroll()">Scrollable Options</button>
+  <button id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</button>
+  <button id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</button>
+  <button id="icons" onclick="presentIcons()">Icons</button>
+  <button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
 
   <ion-action-sheet-controller></ion-action-sheet-controller>
 
-  <script>
-    async function presentBasic() {
-      const mode = Ionic.mode;
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
 
+  <script>
+    window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
+    async function presentBasic() {
       const actionSheetController = document.querySelector('ion-action-sheet-controller');
       await actionSheetController.componentOnReady();
       const actionSheetElement = await actionSheetController.create({
@@ -24,21 +44,26 @@
         buttons: [{
           text: 'Delete',
           role: 'destructive',
+          icon: 'trash',
           handler: () => {
             console.log('Delete clicked');
           }
         }, {
           text: 'Share',
+          icon: 'share',
           handler: () => {
             console.log('Share clicked');
           }
         }, {
           text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
           handler: () => {
             console.log('Play clicked');
           }
         }, {
           text: 'Favorite',
+          icon: 'heart',
+          role: 'selected',
           handler: () => {
             console.log('Favorite clicked');
           }
@@ -53,6 +78,283 @@
       await actionSheetElement.present();
     }
 
+    async function presentIcons() {
+      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',
+          icon: 'trash',
+          handler: () => {
+            console.log('Delete clicked');
+          }
+        }, {
+          text: 'Share',
+          icon: 'share',
+          handler: () => {
+            console.log('Share clicked');
+          }
+        }, {
+          text: 'Play (open modal)',
+          icon: 'arrow-dropright-circle',
+          handler: () => {
+            console.log('Play clicked');
+          }
+        }, {
+          text: 'Favorite',
+          icon: 'heart',
+          handler: () => {
+            console.log('Favorite clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          icon: 'close',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      })
+      await actionSheetElement.present();
+    }
+
+    async function presentNoBackdropDismiss() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [{
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        }, {
+          text: 'Destructive',
+          role: 'destructive',
+          handler: () => {
+            console.log('Destructive clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentAlert() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [{
+          text: 'Open Alert',
+          handler: () => {
+            console.log('Open Alert clicked');
+          }
+        }, {
+          text: 'Cancel',
+          role: 'cancel',
+          handler: () => {
+            console.log('Cancel clicked');
+          }
+        }]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScroll() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }, {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentScrollNoCancel() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Add Reaction',
+            handler: () => {
+              console.log('Add Reaction clicked');
+            }
+          }, {
+            text: 'Copy Text',
+            handler: () => {
+              console.log('Copy Text clicked');
+            }
+          }, {
+            text: 'Share Text',
+            handler: () => {
+              console.log('Share Text clicked');
+            }
+          }, {
+            text: 'Copy Link to Message',
+            handler: () => {
+              console.log('Copy Link to Message clicked');
+            }
+          }, {
+            text: 'Remind Me',
+            handler: () => {
+              console.log('Remind Me clicked');
+            }
+          }, {
+            text: 'Pin File',
+            handler: () => {
+              console.log('Pin File clicked');
+            }
+          }, {
+            text: 'Star File',
+            handler: () => {
+              console.log('Star File clicked');
+            }
+          }, {
+            text: 'Mark Unread',
+            handler: () => {
+              console.log('Mark Unread clicked');
+            }
+          }, {
+            text: 'Edit Title',
+            handler: () => {
+              console.log('Edit Title clicked');
+            }
+          }, {
+            text: 'Save Image',
+            handler: () => {
+              console.log('Save Image clicked');
+            }
+          }, {
+            text: 'Copy Image',
+            handler: () => {
+              console.log('Copy Image clicked');
+            }
+          }, {
+            text: 'Delete File',
+            role: 'destructive',
+            handler: () => {
+              console.log('Delete File clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentCancelOnly() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        buttons: [
+          {
+            text: 'Cancel',
+            role: 'cancel', // will always sort to be on the bottom
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
+    async function presentWithCssClass() {
+      const actionSheetController = document.querySelector('ion-action-sheet-controller');
+      await actionSheetController.componentOnReady();
+      const actionSheetElement = await actionSheetController.create({
+        title: "Custom Css Class",
+        cssClass: "my-class my-custom-class",
+        buttons: [
+          {
+            text: 'Test',
+            role: 'test',
+            cssClass: 'my-cancel-button my-custom-button customClass',
+            handler: () => {
+              console.log('Cancel clicked');
+            }
+          }
+        ]
+      });
+      await actionSheetElement.present();
+    }
+
   </script>
 </body>
 </html>
diff --git a/packages/core/src/components/alert/test/standalone/e2e.js b/packages/core/src/components/alert/test/standalone/e2e.js
index c33e199c36..175adc860b 100644
--- a/packages/core/src/components/alert/test/standalone/e2e.js
+++ b/packages/core/src/components/alert/test/standalone/e2e.js
@@ -14,6 +14,11 @@ class E2ETestPage extends Page {
     await this.driver.wait(until.elementLocated(By.css('.alert-wrapper')));
     return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.alert-wrapper'))));
   }
+
+  async closeWithBackdrop() {
+    this.driver.findElement(By.css('ion-backdrop')).click();
+    return await this.driver.wait(until.elementIsNotVisible(this.driver.findElement(By.css('ion-backdrop'))));
+  }
 }
 
 platforms.forEach(platform => {
@@ -23,9 +28,44 @@ platforms.forEach(platform => {
       return page.navigate('#basic');
     });
 
-    register('should open alert', driver => {
+    register('should open basic alert', driver => {
       const page = new E2ETestPage(driver, platform);
       return page.present('basic');
     });
+
+    register('should open alert long message', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('longMessage');
+    });
+
+    register('should open alert multiple buttons', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('multipleButtons');
+    });
+
+    register('should open alert no message', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('noMessage');
+    });
+
+    register('should open confirm alert', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('confirm');
+    });
+
+    register('should open prompt alert', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('prompt');
+    });
+
+    register('should open radio alert', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('radio');
+    });
+
+    register('should open checkbox alert', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('checkbox');
+    });
   });
 });
diff --git a/packages/core/src/components/item-divider/test/standalone/index.html b/packages/core/src/components/item-divider/test/standalone/index.html
index 8455b22f6b..a47338880f 100644
--- a/packages/core/src/components/item-divider/test/standalone/index.html
+++ b/packages/core/src/components/item-divider/test/standalone/index.html
@@ -11,7 +11,7 @@
 <body>
   <ion-item-divider>
     <ion-label>Item Divider</ion-label>
-    <ion-button slot="end">button</ion-button>
+    <button slot="end">button</button>
   </ion-item-divider>
 </body>
 
diff --git a/packages/core/src/components/item/test/standalone/index.html b/packages/core/src/components/item/test/standalone/index.html
index d18e7d658b..2c9ec17b70 100644
--- a/packages/core/src/components/item/test/standalone/index.html
+++ b/packages/core/src/components/item/test/standalone/index.html
@@ -29,8 +29,8 @@
 
   <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>
+    <button slot="start"><ion-icon name="heart" slot="end"></ion-icon>Start Button</button>
+    <button slot="end">End Button<ion-icon name="star" slot="start"></ion-icon></button>
   </ion-item>
 
   <ion-item>
diff --git a/packages/core/src/components/loading/test/basic/index.html b/packages/core/src/components/loading/test/basic/index.html
index a765e6e81f..0d1eed13bf 100644
--- a/packages/core/src/components/loading/test/basic/index.html
+++ b/packages/core/src/components/loading/test/basic/index.html
@@ -23,6 +23,7 @@
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</ion-button>
         <ion-button expand="block" onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</ion-button>
+
         <ion-loading-controller></ion-loading-controller>
 
         <ion-grid>
diff --git a/packages/core/src/components/loading/test/standalone/e2e.js b/packages/core/src/components/loading/test/standalone/e2e.js
index 448b20ff12..5d2dc2bbef 100644
--- a/packages/core/src/components/loading/test/standalone/e2e.js
+++ b/packages/core/src/components/loading/test/standalone/e2e.js
@@ -7,6 +7,13 @@ class E2ETestPage extends Page {
   constructor(driver, platform) {
     super(driver, `http://localhost:3333/src/components/loading/test/standalone?ionicplatform=${platform}`);
   }
+
+  async present(buttonId) {
+    await this.navigate('#basic');
+    this.driver.findElement(By.id(buttonId)).click();
+    await this.driver.wait(until.elementLocated(By.css('.loading-wrapper')));
+    return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css('.loading-wrapper'))));
+  }
 }
 
 platforms.forEach(platform => {
@@ -15,5 +22,10 @@ platforms.forEach(platform => {
       const page = new E2ETestPage(driver, platform);
       return page.navigate('#basic');
     });
+
+    register('should open loading', driver => {
+      const page = new E2ETestPage(driver, platform);
+      return page.present('basic');
+    });
   });
 });
diff --git a/packages/core/src/components/loading/test/standalone/index.html b/packages/core/src/components/loading/test/standalone/index.html
index fffe441d49..ddcdb3371b 100644
--- a/packages/core/src/components/loading/test/standalone/index.html
+++ b/packages/core/src/components/loading/test/standalone/index.html
@@ -9,10 +9,28 @@
 </head>
 
 <body>
-  <ion-button id="basic" expand="block" onclick="presentLoading()" class="e2eShowLoading">Show Loading</ion-button>
+  <button id="basic" onclick="presentLoading()">Show Loading</button>
+  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.'})">Show Loading with long content</button>
+  <button onclick="presentLoadingWithOptions({duration: 2000, content: 'Loading Please Wait...', spinner: 'hide'})">Show Loading with no spinner</button>
+  <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true})">Show Loading with translucent</button>
+  <button onclick="presentLoadingWithOptions({duration: 5000, content: 'Loading Please Wait...', translucent: true, cssClass: 'custom-class custom-loading'})">Show Loading with cssClass</button>
 
   <ion-loading-controller></ion-loading-controller>
 
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
   <script>
     async function presentLoading() {
       const loadingController = document.querySelector('ion-loading-controller');
@@ -23,6 +41,13 @@
       });
       return await loadingElement.present();
     }
+
+    async function presentLoadingWithOptions(opts) {
+      const loadingController = document.querySelector('ion-loading-controller');
+      await loadingController.componentOnReady();
+      const loadingElement = await loadingController.create(opts);
+      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
index e08418d5aa..43eb8853cc 100644
--- a/packages/core/src/components/menu/test/standalone/index.html
+++ b/packages/core/src/components/menu/test/standalone/index.html
@@ -51,18 +51,36 @@
 
     <ion-content padding>
       <p>
-        <ion-button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</ion-button>
-        <ion-button onclick="openRight()">Open right menu</ion-button>
+        <button class="e2eOpenLeftMenu" onclick="openLeft()">Open left menu</button>
+        <button onclick="openRight()">Open right menu</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>
+        <button onclick="setPush()">Set Push</button>
+        <button onclick="setOverlay()">Set Overlay</button>
+        <button onclick="setReveal()">Set Reveal</button>
 
-        <ion-button onclick="setEnabled()">Set Swipe Enabled False</ion-button>
+        <button onclick="setEnabled()">Set Swipe Enabled False</button>
       </p>
     </ion-content>
 
   </ion-page>
+
+  <style>
+    body {
+      margin: 0;
+    }
+
+    p > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
 </body>
 </html>
diff --git a/packages/core/src/components/modal/test/standalone/index.html b/packages/core/src/components/modal/test/standalone/index.html
index a9f0550d94..89fe6d7078 100644
--- a/packages/core/src/components/modal/test/standalone/index.html
+++ b/packages/core/src/components/modal/test/standalone/index.html
@@ -9,10 +9,24 @@
 </head>
 
 <body>
-  <ion-button id="basic" expand="block" onclick="presentModal()">Present Modal</ion-button>
+  <button id="basic" onclick="presentModal()">Present Modal</button>
 
   <ion-modal-controller></ion-modal-controller>
 
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
   <script>
     async function presentModal() {
       const modalController = document.querySelector('ion-modal-controller');
diff --git a/packages/core/src/components/popover/test/standalone/index.html b/packages/core/src/components/popover/test/standalone/index.html
index 739d8f016e..ce0e3243a8 100644
--- a/packages/core/src/components/popover/test/standalone/index.html
+++ b/packages/core/src/components/popover/test/standalone/index.html
@@ -9,10 +9,27 @@
 </head>
 
 <body>
-  <ion-button id="basic" expand="block" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</ion-button>
+  <button id="basic" onclick="presentPopover({ component: 'profile-page', ev: event })">Show Popover</button>
+  <button onclick="presentPopover({ component: 'translucent-page', ev: event, translucent: true })">Show Translucent Popover</button>
+  <button color="secondary" onclick="presentPopover({ component: 'list-page', ev: event })">Show Long List Popover</button>
+  <button color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</button>
 
   <ion-popover-controller></ion-popover-controller>
 
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
   <script>
     async function presentPopover(opts) {
       const popoverController = document.querySelector('ion-popover-controller');
@@ -42,6 +59,46 @@
     }
 
     customElements.define('profile-page', ProfilePage);
+
+    class ListPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        let items = '';
+        for (var i = 0; i < 30; i++) {
+          items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
+        }
+
+        this.innerHTML = `
+          <ion-content>
+            <ion-list>
+              <ion-list-header>Ionic</ion-list-header>
+              ` + items + `
+            </ion-list>
+          </ion-content>
+        `;
+      }
+    }
+
+    customElements.define('list-page', ListPage);
+
+    class TranslucentPage extends HTMLElement {
+      constructor() {
+        super();
+      }
+
+      connectedCallback() {
+        this.innerHTML = `
+          <div padding>
+            <h1>Translucent Popover</h1>
+          </div>
+        `;
+      }
+    }
+
+    customElements.define('translucent-page', TranslucentPage);
   </script>
 </body>
 </html>
diff --git a/packages/core/src/components/toast/test/basic/index.html b/packages/core/src/components/toast/test/basic/index.html
index f8c8a18e95..a9bc1b6fb8 100644
--- a/packages/core/src/components/toast/test/basic/index.html
+++ b/packages/core/src/components/toast/test/basic/index.html
@@ -25,6 +25,7 @@
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
+
         <ion-toast-controller></ion-toast-controller>
 
         <ion-grid>
diff --git a/packages/core/src/components/toast/test/standalone/index.html b/packages/core/src/components/toast/test/standalone/index.html
index a6c8c965f9..78dede2fc5 100644
--- a/packages/core/src/components/toast/test/standalone/index.html
+++ b/packages/core/src/components/toast/test/standalone/index.html
@@ -9,11 +9,34 @@
 </head>
 
 <body>
-  <ion-button id="basic" expand="block" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
+  <button id="basic" onclick="presentToast('bottom')">Show Toast Bottom</button>
+  <button onclick="presentToast('top')">Show Toast Top</button>
+  <button onclick="presentToast('middle')">Show Toast Middle</button>
+  <button onclick="presentToastWithOptions({message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.', duration: 2000})">Show Toast with long message</button>
+  <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</button>
+  <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</button>
+  <button onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</button>
 
   <ion-toast-controller></ion-toast-controller>
 
+  <style>
+    body > button {
+      display: block;
+      clear: both;
+      width: 100%;
+      padding: 12px 8px;
+      font-size: 1em;
+      background: #f8f8f8;
+      border: 1px solid #eee;
+      border-radius: 4px;
+      margin-bottom: 8px;
+    }
+  </style>
+
   <script>
+    window.addEventListener('ionToastDidDismiss', function(e){console.log('didDismiss', e)})
+    window.addEventListener('ionToastWillDismiss', function(e){console.log('willDismiss', e)})
+
     async function presentToast(position) {
       const toastController = document.querySelector('ion-toast-controller');
       await toastController.componentOnReady();
@@ -24,6 +47,13 @@
       });
       return await toastElement.present();
     }
+
+    async function presentToastWithOptions(opts) {
+      const toastController = document.querySelector('ion-toast-controller');
+      await toastController.componentOnReady();
+      const toastElement = await toastController.create(opts);
+      return await toastElement.present();
+    }
   </script>
 </body>
 </html>
