diff --git a/src/components/app/test/testing/index.html b/src/components/app/test/testing/index.html
new file mode 100644
index 0000000000..0bbcaa57f0
--- /dev/null
+++ b/src/components/app/test/testing/index.html
@@ -0,0 +1,171 @@
+<style>
+
+  body * {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  body {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    background: maroon;
+    position: relative;
+  }
+
+  navview {
+    position: absolute;
+    background: gray;
+    height: 100vh;
+    width: 100%;
+    display:flex;
+    flex-direction: column;
+    top: 0;
+    left: 0;
+  }
+
+  toolbars {
+    background: blue;
+    position: relative;
+    width: 100%;
+    min-height: 50px;
+    overflow: hidden;
+  }
+
+  toolbar {
+    background: green;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  tabs {
+    background: red;
+    display: flex;
+    justify-content: center;
+  }
+
+  tab {
+    background: blue;
+    color: white;
+    height: 50px;
+    padding: 0 20px;
+    border: 1px solid white;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content:center;
+  }
+
+  view-container {
+    position: relative;
+    background: yellow;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  view {
+    position: absolute;
+    background: orange;
+    height: 100%;
+    width: 100%;
+  }
+
+  .entering {
+    box-shadow: 0px 0px 5px 5px black;
+  }
+
+  .entering-1 {
+    transform: translateX(20%);
+  }
+
+  .entering-2 {
+    transform: translateX(40%);
+  }
+
+</style>
+
+
+<navview>
+
+  <toolbars>
+    <toolbar>
+      Level 1, View 1 Toolbar
+    </toolbar>
+    <toolbar class="entering entering-1">
+      Level 1, View 2 Toolbar
+    </toolbar>
+  </toolbars>
+
+  <view-container>
+
+    <view>
+      Level 1, View 1 Content
+    </view>
+
+    <view class="entering entering-1">
+      Level 1, View 2 Content
+    </view>
+
+  </view-container>
+
+
+
+  <navview class="entering entering-2">
+
+    <toolbars>
+      <toolbar style="background:purple">
+        Level 2, View 1 Toolbar
+      </toolbar>
+      <toolbar class="entering entering-1" style="background:purple">
+        Level 2, View 2 Toolbar
+      </toolbar>
+    </toolbars>
+
+    <view-container>
+
+      <view style="background:yellow">
+        Level 2, View 1 Content
+      </view>
+
+      <view class="entering entering-1" style="background:yellow">
+        Level 2, View 2 Content
+      </view>
+
+    </view-container>
+
+
+    <navview class="entering entering-2">
+
+      <toolbars>
+        <toolbar style="background:red">
+          Level 3, View 1 Toolbar
+        </toolbar>
+        <toolbar class="entering entering-1" style="background:red">
+          Level 3, View 2 Toolbar
+        </toolbar>
+      </toolbars>
+
+      <view-container>
+
+        <view style="background:blue">
+          Level 3, View 1 Content
+        </view>
+
+        <view class="entering entering-1" style="background:blue">
+          Level 3, View 2 Content
+        </view>
+
+      </view-container>
+
+    </navview>
+
+
+
+  </navview>
+
+
+
+</navview>