diff --git a/test/css/subfooters.html b/test/css/subfooters.html
new file mode 100644
index 0000000000..820e8da3d3
--- /dev/null
+++ b/test/css/subfooters.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Footers</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+  </head>
+  <body>
+
+    <header class="bar bar-header bar-dark">
+      <h1 class="title">Sub Footer Test</h1>
+    </header>
+
+    <ion-content class="content padding has-header has-footer has-subfooter">
+      <p>Footer and subfooter should always stay at the bottom of the screen, and on top of the main content.</p>
+      <p>Content element must have "has-footer" and "has-subfooter" as a classname.</p>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+      </p>
+    </ion-content>
+
+    <div class="bar bar-subfooter bar-positive">
+      <h3 class="title">Subfooter</h3>
+    </div>
+
+    <footer class="bar bar-footer bar-positive">
+      <h3 class="title">Footer</h3>
+    </footer>
+
+  </body>
+</html>
diff --git a/test/css/subheaders.html b/test/css/subheaders.html
new file mode 100644
index 0000000000..6724c05bc2
--- /dev/null
+++ b/test/css/subheaders.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html ng-app="ionic">
+  <head>
+    <script src="../../dist/js/ionic.bundle.js"></script>
+    <meta charset="utf-8">
+    <title>Header</title>
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
+    <link href="../../dist/css/ionic.css" rel="stylesheet">
+    <style>
+      .bar {
+        position: relative;
+        top: 0;
+      }
+    </style>
+  </head>
+  <body>
+
+    <div class="bar bar-header">
+      <h1 class="title">Header title</h1>
+    </div>
+
+    <div class="bar bar-subheader">
+      <h3 class="title">Subheader title</h3>
+    </div>
+
+    <ion-content class="content padding has-header has-subheader">
+      <p>Content element must have "has-header" "has-subheader" as a classname.</p>
+      <p>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+        Content<br>
+      </p>
+    </ion-content>
+  </body>
+</html>
