From 485a4717e9e5c567eec788305fb1d53f6df9ee21 Mon Sep 17 00:00:00 2001
From: Dennis Eichhorn <spl1nes.com@googlemail.com>
Date: Fri, 11 Jan 2019 21:14:23 +0100
Subject: [PATCH] Improve ui tests

---
 breadcrumb.scss             |   1 +
 image.scss                  |   6 +
 styles.css                  |   8 +-
 table.scss                  |   2 +-
 tests/StandardElements.htm  |  29 ++--
 tests/app.htm               |  28 ----
 tests/app/article.php       | 105 ++++++++++++
 tests/app/boxes.php         |  59 +++++++
 tests/app/breadcrumbs.php   |  24 +++
 tests/app/buttons.php       |  44 +++++
 tests/app/calendar.php      |   0
 tests/app/charts.php        |   0
 tests/app/editor.php        |   0
 tests/app/forms.php         | 309 ++++++++++++++++++++++++++++++++++++
 tests/app/grid.php          | 123 ++++++++++++++
 tests/app/images.php        |  27 ++++
 tests/app/index.php         | 192 ++++++++++++++++++++++
 tests/app/loaders.php       |  19 +++
 tests/app/navigations.php   |  17 ++
 tests/app/notifications.php |  61 +++++++
 tests/app/popups.php        |   0
 tests/app/sliders.php       |  46 ++++++
 tests/app/tables.php        | 192 ++++++++++++++++++++++
 tests/app/tabs.php          |  94 +++++++++++
 tests/app/tags.php          |  39 +++++
 tests/app/welcome.php       |   1 +
 tests/load.js               |  53 -------
 27 files changed, 1384 insertions(+), 95 deletions(-)
 delete mode 100644 tests/app.htm
 create mode 100644 tests/app/article.php
 create mode 100644 tests/app/boxes.php
 create mode 100644 tests/app/breadcrumbs.php
 create mode 100644 tests/app/buttons.php
 create mode 100644 tests/app/calendar.php
 create mode 100644 tests/app/charts.php
 create mode 100644 tests/app/editor.php
 create mode 100644 tests/app/forms.php
 create mode 100644 tests/app/grid.php
 create mode 100644 tests/app/images.php
 create mode 100644 tests/app/index.php
 create mode 100644 tests/app/loaders.php
 create mode 100644 tests/app/navigations.php
 create mode 100644 tests/app/notifications.php
 create mode 100644 tests/app/popups.php
 create mode 100644 tests/app/sliders.php
 create mode 100644 tests/app/tables.php
 create mode 100644 tests/app/tabs.php
 create mode 100644 tests/app/tags.php
 create mode 100644 tests/app/welcome.php

diff --git a/breadcrumb.scss b/breadcrumb.scss
index 470f242..0dd9b63 100644
--- a/breadcrumb.scss
+++ b/breadcrumb.scss
@@ -21,6 +21,7 @@
             @include border-left-radius($breadcrumb-border-radius);
         }
 
+        // todo: maybe replace .last with :last-child
         &:not(.last):after, &:before {
             content:" ";
             display: block;
diff --git a/image.scss b/image.scss
index 8d789b7..740416d 100644
--- a/image.scss
+++ b/image.scss
@@ -7,11 +7,15 @@ img {
         border: $img-border solid $img-border-color;
         @include box-shadow-out(#ffffff);
         @include border-radius($img-border-radius);
+        box-sizing: border-box;
+        width: 100%;
     }
 
     &.frame-2 {
         border: $img-border solid $img-border-color;
         background: $img-background;
+        box-sizing: border-box;
+        width: 100%;
     }
 
     &.frame-3 {
@@ -20,6 +24,8 @@ img {
         border: $img-border solid $img-border-color;
         @include box-shadow-out(#ffffff);
         @include border-radius($img-border-radius);
+        box-sizing: border-box;
+        width: 100%;
     }
 }
 
diff --git a/styles.css b/styles.css
index c01f007..43e7e49 100644
--- a/styles.css
+++ b/styles.css
@@ -3565,9 +3565,13 @@ img.frame-1 {
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
+  width: 100%;
+  box-sizing: border-box;
   background-clip: padding-box; }
 img.frame-2 {
   border: 1px solid #b7b7b7;
+  box-sizing: border-box;
+  width: 100%;
   background: #f5f5ff; }
 img.frame-3 {
   padding: 5px;
@@ -3580,6 +3584,8 @@ img.frame-3 {
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
   border-radius: 3px;
+  box-sizing: border-box;
+  width: 100%;
   background-clip: padding-box; }
 
 @keyframes slidy {
@@ -4729,7 +4735,7 @@ section > h2 {
 /* Content box */
 /* Navigation */
 /* Colors */
-table:not([id]) .sort-asc, table:not([id]) .sort-desc {
+table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
   display: none; }
 
 table .sort-asc, table .sort-desc {
diff --git a/table.scss b/table.scss
index ebfc69a..8adc10b 100644
--- a/table.scss
+++ b/table.scss
@@ -1,6 +1,6 @@
 @import "_mixins", "_vars";
 
-table:not([id]) .sort-asc, table:not([id]) .sort-desc {
+table:not([id]) > thead .sort-asc, table:not([id]) > thead .sort-desc {
     display: none;
 }
 
diff --git a/tests/StandardElements.htm b/tests/StandardElements.htm
index 92aa3dd..c3ba0d3 100644
--- a/tests/StandardElements.htm
+++ b/tests/StandardElements.htm
@@ -424,23 +424,28 @@
                             <div class="advancedInput" id="input1">
                                 <div class="inputOuter">
                                     <div class="inputbackground">
-                                        <input class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
+                                        <input autocomplete="off" class="inputClass" id="inputId" type="text" emptyAfterSelect="true" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
                                     </div>
                                 </div>
-                                <div class="dropdown" isActive="true">
+                                <div class="dropdown" data-active="true">
                                     <table>
-                                    <template id="rowElement" class="rowTemplate">
-                                        <tr>
-                                            <td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
-                                            <td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
-                                            <td data-tpl-value="/email" data-tpl-name="/eamil"></td>
-                                        </tr>
-                                    </template>
+                                        <tbody>
+                                            <template id="rowElement" class="rowTemplate">
+                                                <tr tabindex="-1">
+                                                    <td data-tpl-value="/id" data-tpl-name="/id" data-value="">s</td>
+                                                    <td data-tpl-value="/name/0" data-tpl-name="/name/0"></td>
+                                                    <td data-tpl-value="/email" data-tpl-name="/eamil"></td>
+                                                </tr>
+                                            </template>
+                                        </tbody>
                                     </table>
                                 </div>
-                                <div class="tags" isActive="true">
-                                    <template id="tagElement">
-                                        <span data-tpl-value="/name/0" data-tpl-name="/name/0" class="badge"></span>
+                                <div class="tags" data-active="true">
+                                    <template id="tagElement" class="tagTemplate">
+                                        <span data-tpl-value="/name/0" class="badge">
+                                            <i data-tpl-name="/name/0"></i>
+                                            <i data-tpl-name="/email"></i>
+                                        </span>
                                     </template>
                                 </div>
                             </div>
diff --git a/tests/app.htm b/tests/app.htm
deleted file mode 100644
index a925a4e..0000000
--- a/tests/app.htm
+++ /dev/null
@@ -1,28 +0,0 @@
-<html>
-    <head>
-        <meta charset="utf-8">
-        <title>Style Test</title>
-        <link rel="stylesheet" type="text/css" href="styles.css">
-    </head>
-    <body>
-        <header>
-
-        </header>
-        <nav>
-            <ul>
-                <li></li>
-            </ul>
-        </nav>
-        <main>
-            <section>
-                <form></form>
-            </section>
-
-            <section>
-                <article>
-                    <h1>Title H1</h1>
-                </article>
-            </section>
-        </main>
-    </body>
-</html>
\ No newline at end of file
diff --git a/tests/app/article.php b/tests/app/article.php
new file mode 100644
index 0000000..11d5f5b
--- /dev/null
+++ b/tests/app/article.php
@@ -0,0 +1,105 @@
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box">
+            <article>
+                <h1>Ordered List</h1>
+                <ol>
+                    <li>one</li>
+                    <li>two</li>
+                </ol>
+                <p>repeating numbers:</p>
+                <ol>
+                    <li>one</li>
+                    <li>two</li>
+                    </ol>
+                    <p>large numbers:</p>
+                    <ol start="123">
+                    <li>one</li>
+                </ol>
+                <h2>Unordered List</h2>
+                <ul>
+                    <li>li</li>
+                    <li>li</li>
+                </ul>
+                <p>mixed markers:</p>
+                <ul>
+                    <li>li</li>
+                    <li>li</li>
+                    <li>li</li>
+                </ul>
+                <h3>Code</h3>
+                <p>a <code>code span</code></p>
+                <p><code>this is also a codespan</code> trailing text</p>
+                <p><code>and look at this one!</code></p>
+                <p>single backtick in a code span: <code>`</code></p>
+                <p>backtick-delimited string in a code span: <code>`foo`</code></p>
+                <p><code>sth `` sth</code></p>
+                <h4>Code</h4>
+                <pre><code>&lt;?php
+
+                $message = 'fenced code block';
+                echo $message;</code></pre>
+                <pre><code>tilde</code></pre>
+                <pre><code class="language-php">echo 'language identifier';</code></pre>
+                <h5>Table</h5>
+                <table>
+                        <caption>Table Title</caption>
+                        <thead>
+                        <tr>
+                            <td>Col1 Title</td>
+                            <td>Col2 Title</td>
+                            <td>Col3 Title</td>
+                            <td>Col4 Title</td>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Col1</td>
+                            <td>Col2</td>
+                            <td>Col3</td>
+                            <td>Col4</td>
+                        </tr>
+                        <tr>
+                            <td>Col1</td>
+                            <td>Col2</td>
+                            <td>Col3</td>
+                            <td>Col4</td>
+                        </tr>
+                        <tr>
+                            <td>Col1</td>
+                            <td>Col2</td>
+                            <td>Col3</td>
+                            <td>Col4</td>
+                        </tr>
+                        <tr>
+                            <td>Col1</td>
+                            <td>Col2</td>
+                            <td>Col3</td>
+                            <td>Col4</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                <h6>Headline6</h6>
+                <h7>Content</h7>
+                <p><span class="tooltip">Tooltip<i>My Tooltip asd a sd <br>asdfsdf adf asd</i></span> ipsum dolor sit amet,
+                    consectetur adipiscing elit. Duis posuere, nulla eu condimentum eleifend, nulla magna viverra risus, ut
+                    faucibus libero libero nec est. Nunc quis rhoncus est, ac sodales lorem. Suspendisse convallis, massa eu
+                    <a href="#">volutpat</a> posuere, justo dolor porta dui, a ullamcorper ex ipsum eget arcu. Cras quis
+                    ante placerat, tempus orci vitae, semper nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+                    cubilia Curae; Duis at sodales sapien. Morbi dolor risus, finibus ut ipsum non, pellentesque varius ex. Etiam
+                    pretium tempus diam at eleifend. Quisque a tortor et nisi commodo pretium ac at erat. Nam non iaculis
+                    ipsum, ultrices tempus nisl. Pellentesque ornare tellus vehicula sapien fringilla cursus. Duis sed tellus
+                    sagittis elit accumsan placerat et nec ex. In sit amet blandit nunc, a pulvinar nunc. Phasellus vulputate
+                    facilisis lorem eget aliquet. Curabitur odio ante, lobortis vitae est at, consequat posuere elit.</p>
+
+                <p><span class="tooltip">Lorem<i>My Tooltip asd a sd asdfsdf adf asd</i></span> sed nulla et ante
+                    consectetur dictum. Nunc molestie ligula eget felis tincidunt suscipit. Fusce scelerisque diam lectus, non faucibus
+                    ligula sagittis eu. Sed id porttitor purus. Donec in dolor scelerisque, suscipit metus in, molestie sem.
+                    Nulla facilisi. Nunc eu lobortis tellus.</p>
+                <blockquote>This is a blockquote</blockquote>
+
+                    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="200">
+            </article>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/boxes.php b/tests/app/boxes.php
new file mode 100644
index 0000000..62f2a70
--- /dev/null
+++ b/tests/app/boxes.php
@@ -0,0 +1,59 @@
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box red wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+
+    <div class="col-xs-6">
+        <section class="box blue wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box green wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+
+    <div class="col-xs-6">
+        <section class="box darkblue wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box orange wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+
+    <div class="col-xs-6">
+        <section class="box purple wf-100">
+            <header><h1>Header</h1></header>
+            <div class="inner">
+                &nbsp;
+            </div>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/breadcrumbs.php b/tests/app/breadcrumbs.php
new file mode 100644
index 0000000..0ef1431
--- /dev/null
+++ b/tests/app/breadcrumbs.php
@@ -0,0 +1,24 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <div class="box">
+            <ul class="crumbs-1">
+                <li><a>One</a></li>
+                <li><a>Two</a></li>
+                <li class="active"><a>Three</a></li>
+                <li><a>Four</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <div class="box">
+            <ul class="crumbs-1">
+                <li><a>One</a></li>
+                <li><a>Two</a></li>
+                <li><a>Three</a></li>
+                <li><a>Four</a></li>
+                <li class="last active"><a>Five</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/buttons.php b/tests/app/buttons.php
new file mode 100644
index 0000000..2f4176e
--- /dev/null
+++ b/tests/app/buttons.php
@@ -0,0 +1,44 @@
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box">
+            <ul class="btns">
+                <li><a href="">One</a>
+                <li><a href="" class="active">Two</a>
+                <li><a href="">Three</a>
+                <li><a href="">Four</a>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box">
+            <button>Test Button</button>
+            <button><i class="fa fa-lightbulb-o"></i> Test Button</button>
+            <button class="red">Test Button</button>
+            <button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+            <button class="green">Test Button</button>
+            <button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+            <button class="blue">Test Button</button>
+            <button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <button>Test Button</button>
+                <button><i class="fa fa-lightbulb-o"></i> Test Button</button>
+                <button class="red">Test Button</button>
+                <button class="red"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+                <button class="green">Test Button</button>
+                <button class="green"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+                <button class="blue">Test Button</button>
+                <button class="blue"><i class="fa fa-lightbulb-o"></i> Test Button</button>
+            </div>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/calendar.php b/tests/app/calendar.php
new file mode 100644
index 0000000..e69de29
diff --git a/tests/app/charts.php b/tests/app/charts.php
new file mode 100644
index 0000000..e69de29
diff --git a/tests/app/editor.php b/tests/app/editor.php
new file mode 100644
index 0000000..e69de29
diff --git a/tests/app/forms.php b/tests/app/forms.php
new file mode 100644
index 0000000..865aa89
--- /dev/null
+++ b/tests/app/forms.php
@@ -0,0 +1,309 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <section class="box wf-100">
+            <header><h1>Default</h1></header>
+            <div class="inner">
+                <form>
+                    <table class="layout wf-100">
+                        <tr>
+                            <td colspan="2"><label>Placeholder</label></td>
+                        <tr>
+                            <td colspan="2"><input type="text" placeholder="&#61447; User">
+                        <tr>
+                            <td colspan="2"><label>Input+Button+Required</label></td>
+                        <tr>
+                            <td colspan="2">
+                                <div class="ipt-wrap">
+                                    <div class="ipt-first"><input type="text" required></div>
+                                    <div class="ipt-second"><input type="submit" value="Text"></div>
+                                </div>
+                        <tr>
+                            <td colspan="2"><label>Password</label></td>
+                        <tr>
+                            <td colspan="2"><input type="password" pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}" placeholder="&#xf023; Pa55w0rd?">
+                        <tr>
+                            <td colspan="2"><label>Datalist</label></td>
+                        <tr>
+                            <td colspan="2"><input list="test" type="text">
+                                <datalist id="test">
+                                    <option>Chrome</option>
+                                    <option>IE</option>
+                                    <option>Opera</option>
+                                    <option>Safari</option>
+                                    <option>Firefox</option>
+                                </datalist>
+                            </td>
+                        <tr>
+                        <tr>
+                            <td colspan="2"><label>Special</label></td>
+                        <tr>
+                            <td colspan="2"><span class="input"><button><i class="fa fa-pencil"></i></button><input type="text"></span></td>
+
+                        <tr>
+                            <td colspan="2"><label>Number</label></td>
+                        <tr>
+                            <td colspan="2"><input type="number" step="any" min="0"></td>
+                        <tr>
+                            <td><label>Label1</label></td>
+                            <td><label>Pattern Validation</label>
+                        <tr>
+                            <td><input type="text"></td>
+                            <td><input type="text" pattern="[a-zA-Z]" required>
+                        <tr>
+                            <td colspan="2"><label>Localtime</label></td>
+                        <tr>
+                            <td colspan="2"><input type="datetime-local">
+                        <tr>
+                            <td><label>Localtime</label></td>
+                            <td><label>Localtime</label>
+                        <tr>
+                            <td><input type="datetime-local"></td>
+                            <td><input type="datetime-local">
+                        <tr>
+                            <td><label>Checkbox</label></td>
+                            <td><label>Radio</label></td>
+                        <tr>
+                            <td><span class="check"><input type="checkbox" checked>Check</span>
+                            <td><span class="radio"><input type="radio" name="test">Radio</span>
+                        <tr>
+                            <td><span class="check"><input type="checkbox">Check</span>
+                            <td><span class="radio"><input type="radio" name="test" checked>Radio</span>
+                        <tr>
+                            <td></td>
+                            <td><span class="radio"><input type="radio" name="test">Radio</span>
+                        <tr>
+                            <td><label>Option</label></td>
+                        <tr>
+                            <td colspan="2"><select>
+                                <option>Option1</option>
+                                <option>Option2</option>
+                                <option>Option3</option>
+                            </select>
+                        <tr>
+                            <td><label multiple>Multiselect</label></td>
+                        <tr>
+                            <td colspan="2"><select multiple>
+                                <option>Option1</option>
+                                <option>Option2</option>
+                                <option>Option3</option>
+                            </select>
+                        <tr>
+                            <td><label>Option Default</label></td>
+                            <td><label>Select Selected</label>
+                        <tr>
+                            <td>
+                                <select>
+                                    <option disabled selected>Select something</option>
+                                    <option>Option1</option>
+                                    <option>Option2</option>
+                                    <option>Option3</option>
+                                </select>
+                            </td>
+                            <td>
+                                <select>
+                                    <option>Option1</option>
+                                    <option selected>Option2</option>
+                                    <option>Option3</option>
+                                </select>
+                        <tr>
+                            <td colspan="2"><label>Textarea</label></td>
+                        <tr>
+                            <td colspan="2"><textarea></textarea>
+                        <tr>
+                            <td colspan="2"><input type="submit" value="Submit"> <input type="submit" value="Cancel"> <button type="submit">SButton</button>
+                    </table>
+                </form>
+            </div>
+        </section>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <section class="box wf-100">
+            <header><h1>Custom</h1></header>
+            <div class="inner">
+                <form>
+                    <table class="layout wf-100">
+                        <tr>
+                            <td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Remote</label></td>
+                        <tr>
+                            <td colspan="2">
+                                <div class="advancedInput" id="input1">
+                                    <div class="inputOuter">
+                                        <div class="inputbackground">
+                                            <input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
+                                        </div>
+                                    </div>
+                                    <div id="input1-dropdown" class="dropdown" data-active="true">
+                                        <table id="a1" class="table red">
+                                            <thead>
+                                                <tr>
+                                                    <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <tbody>
+                                                <template id="input1-rowElement" class="rowTemplate">
+                                                    <tr tabindex="-1">
+                                                        <td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
+                                                        <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                        <td data-tpl-text="/email"></td>
+                                                    </tr>
+                                                </template>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div id="input1-tags" class="tags" data-limit="1" data-active="true">
+                                        <template id="input1-tagTemplate">
+                                            <span data-tpl-value="/id" data-value="" data-uuid="" class="tag red">
+                                                <i class="fa fa-times" data-remove=""></i>
+                                                <i data-tpl-text="/name/0"></i>,
+                                                <i data-tpl-text="/email"></i>
+                                            </span>
+                                        </template>
+                                    </div>
+                                </div>
+                        <tr>
+                            <td colspan="2"><label>Input+Autocomplete+Dropdown+Badge+Local</label></td>
+                        <tr>
+                            <td colspan="2"><label>Input+Autocomplete+Dropdown+Table+Remote</label></td>
+                        <tr>
+                            <td colspan="2">
+                                <div class="advancedInput" id="input2">
+                                    <div class="inputOuter">
+                                        <div class="inputbackground">
+                                            <input autocomplete="off" class="input" id="inputId2" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId2}">
+                                        </div>
+                                    </div>
+                                    <div id="input2-dropdown" class="dropdown" data-active="true">
+                                        <table id="a1" class="table red">
+                                            <thead>
+                                                <tr>
+                                                    <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <tbody>
+                                                <template id="input2-rowElement" class="rowTemplate">
+                                                    <tr tabindex="-1">
+                                                        <td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
+                                                        <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                        <td data-tpl-text="/email"></td>
+                                                    </tr>
+                                                </template>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <table class="table red">
+                                            <thead>
+                                                <tr>
+                                                    <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <tbody id="input2-tags" class="tags" data-limit="0" data-active="true">
+                                                <template id="input2-tagTemplate">
+                                                    <tr data-tpl-value="/id" data-value="" data-uuid="">
+                                                        <td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
+                                                        <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                        <td data-tpl-text="/email"></td>
+                                                    </tr>
+                                                </template>
+                                    </table>
+                                </div>
+                        <tr>
+                            <td colspan="2"><label>Input+Autocomplete+Dropdown</label></td>
+                        <tr>
+                            <td colspan="2"><label>Multiple Input+Autocomplete+External Table</label></td>
+                        <tr>
+                            <td colspan="2">
+                                <div class="advancedInput" id="input4">
+                                    <div class="inputOuter">
+                                        <div class="inputbackground">
+                                            <input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="input4-dropdown" class="dropdown" data-active="true">
+                                    <table id="a1" class="table red">
+                                        <thead>
+                                            <tr>
+                                                <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                        <tbody>
+                                            <template id="input4-rowElement" class="rowTemplate">
+                                                <tr tabindex="-1">
+                                                    <td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
+                                                    <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                    <td data-tpl-text="/email"></td>
+                                                </tr>
+                                            </template>
+                                        </tbody>
+                                    </table>
+                                </div>
+                                <table class="table red">
+                                    <thead>
+                                        <tr>
+                                            <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                    <tbody id="input4-tags" class="tags" data-limit="0" data-active="true">
+                                        <template id="input4-tagTemplate">
+                                            <tr data-tpl-value="/id" data-value="" data-uuid="">
+                                                <td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
+                                                <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                <td data-tpl-text="/email"></td>
+                                            </tr>
+                                        </template>
+                                </table>
+                        <tr>
+                            <td colspan="2"><label>Simple remote autocomplete</label></td>
+                        <tr>
+                            <td colspan="2">
+                                <div class="advancedInput" id="input3">
+                                    <div class="inputOuter">
+                                        <div class="inputbackground">
+                                            <input autocomplete="off" class="input" id="inputId" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/admin/find/account?search={#inputId}">
+                                        </div>
+                                    </div>
+                                    <div id="input3-dropdown" class="dropdown" data-active="true">
+                                        <table id="a1" class="table red">
+                                            <thead>
+                                                <tr>
+                                                    <td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                                    <td>Email<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
+                                            <tbody>
+                                                <template id="input3-rowElement" class="rowTemplate">
+                                                    <tr tabindex="-1">
+                                                        <td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
+                                                        <td data-tpl-text="/name/0" data-tpl-value="/name/0" data-value=""></td>
+                                                        <td data-tpl-text="/email"></td>
+                                                    </tr>
+                                                </template>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div id="input3-tags" class="tags" data-limit="1" data-active="false"></div>
+                                </div>
+                        <tr>
+                            <td colspan="2"><label>Fancy Dropdown</label></td>
+                        <tr>
+                            <td colspan="2"><label>Fancy Multiple Dropdown</label></td>
+                        <tr>
+                            <td colspan="2"><label>Fancy Calendar</label></td>
+                        <tr>
+                            <td colspan="2"><label>Fancy Time</label></td>
+                        <tr>
+                            <td colspan="2"><label>Fancy Range Start/End</label></td>
+                        <tr>
+                            <td colspan="2"><label>Fancy Range End</label></td>
+                    </table>
+                </form>
+            </div>
+        </section>
+    </div>
+</div>
+
+<script>
+    const loginRequest = new jsOMS.Message.Request.Request('http://127.0.0.1/en/api/login', 'POST', 'json');
+    loginRequest.setData({user: 'admin', pass: 'orange'});
+    loginRequest.send();
+</script>
\ No newline at end of file
diff --git a/tests/app/grid.php b/tests/app/grid.php
new file mode 100644
index 0000000..fa64dfd
--- /dev/null
+++ b/tests/app/grid.php
@@ -0,0 +1,123 @@
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-9">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-8">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-4">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-6">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+    <div class="col-xs-3">
+        <section class="box wf-100">&nbsp;</section>
+    </div>
+</div>
+
+<section class="box wf-100 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-50 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-50 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-33 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-33 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-33 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-75 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-66 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-33 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-50 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
+<section class="box wf-25 floatLeft">
+    <section class="inner center">&nbsp;</section>
+</section>
\ No newline at end of file
diff --git a/tests/app/images.php b/tests/app/images.php
new file mode 100644
index 0000000..2bb55a4
--- /dev/null
+++ b/tests/app/images.php
@@ -0,0 +1,27 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <img data-lazyload="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg">
+        </div>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-1">
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-2">
+        </div>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" class="frame-3">
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/index.php b/tests/app/index.php
new file mode 100644
index 0000000..3fa499c
--- /dev/null
+++ b/tests/app/index.php
@@ -0,0 +1,192 @@
+<!DOCTYPE HTML>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <base href="http://127.0.0.1/cssOMS/tests/app/">
+        <title>Style Test</title>
+        <link rel="stylesheet" type="text/css" href="../../styles.css">
+        <link rel="stylesheet" type="text/css" href="../../../Web/Backend/css/backend-small.css">
+        <link rel="stylesheet" type="text/css" href="../../../Web/Backend/css/backend.css">
+        <link rel="stylesheet" type="text/css" href="../../../Resources/fontawesome/css/font-awesome.min.css">
+        <script src="../../../jsOMS/Utils/oLib.js"></script>
+        <script src="../../../jsOMS/Asset/AssetManager.js"></script>
+        <script src="../../../jsOMS/Autoloader.js"></script>
+        <script src="../../../jsOMS/Account/AccountType.js"></script>
+        <script src="../../../jsOMS/Account/AccountManager.js"></script>
+        <script src="../../../jsOMS/Uri/Http.js"></script>
+        <script src="../../../jsOMS/Uri/UriFactory.js"></script>
+        <script src="../../../jsOMS/DataStorage/CacheManager.js"></script>
+        <script src="../../../jsOMS/DataStorage/LocalStorage.js"></script>
+        <script src="../../../jsOMS/DataStorage/StorageManager.js"></script>
+        <script src="../../../jsOMS/Event/EventManager.js"></script>
+        <script src="../../../jsOMS/Message/Request/BrowserType.js"></script>
+        <script src="../../../jsOMS/Message/Request/OSType.js"></script>
+        <script src="../../../jsOMS/Message/Request/RequestMethod.js"></script>
+        <script src="../../../jsOMS/Message/Request/RequestType.js"></script>
+        <script src="../../../jsOMS/Message/Request/Request.js"></script>
+        <script src="../../../jsOMS/UI/ActionManager.js"></script>
+        <script src="../../../jsOMS/Message/Response/ResponseType.js"></script>
+        <script src="../../../jsOMS/Message/Response/ResponseManager.js"></script>
+        <script src="../../../jsOMS/Message/Response/Response.js"></script>
+        <script src="../../../jsOMS/Message/Notification/App/AppNotification.js"></script>
+        <script src="../../../jsOMS/Message/Notification/Browser/BrowserNotification.js"></script>
+        <script src="../../../jsOMS/Message/Notification/NotificationType.js"></script>
+        <script src="../../../jsOMS/Message/Notification/NotificationLevel.js"></script>
+        <script src="../../../jsOMS/Message/Notification/NotificationManager.js"></script>
+        <script src="../../../jsOMS/Message/Notification/NotificationMessage.js"></script>
+        <script src="../../../jsOMS/Module/ModuleFactory.js"></script>
+        <script src="../../../jsOMS/Module/ModuleManager.js"></script>
+        <script src="../../../jsOMS/Dispatcher/Dispatcher.js"></script>
+        <script src="../../../jsOMS/Log/Logger.js"></script>
+        <script src="../../../jsOMS/Log/LogLevel.js"></script>
+        <script src="../../../jsOMS/UI/Component/Form.js"></script>
+        <script src="../../../jsOMS/UI/Component/Table.js"></script>
+        <script src="../../../jsOMS/UI/Input/InputManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Keyboard/KeyboardManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Mouse/ClickType.js"></script>
+        <script src="../../../jsOMS/UI/Input/Mouse/EventType.js"></script>
+        <script src="../../../jsOMS/UI/Input/Mouse/MouseManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Touch/TouchManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Voice/VoiceManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Voice/ReadManager.js"></script>
+        <script src="../../../jsOMS/UI/Input/Voice/SpeechManager.js"></script>
+        <script src="../../../jsOMS/UI/Component/Tab.js"></script>
+        <script src="../../../jsOMS/UI/Component/AdvancedInput.js"></script>
+        <script src="../../../jsOMS/UI/Loader.js"></script>
+        <script src="../../../jsOMS/UI/DragNDrop.js"></script>
+        <script src="../../../jsOMS/UI/GeneralUI.js"></script>
+        <script src="../../../jsOMS/UI/UIManager.js"></script>
+        <script src="../../../jsOMS/Views/FormView.js"></script>
+        <script src="../../../jsOMS/Views/TableView.js"></script>
+        <script src="../../../jsOMS/Utils/Parser/Markdown.js"></script>
+        <script src="../../../jsOMS/Model/Message/DomActionType.js"></script>
+        <script src="../../../jsOMS/Model/Message/DomAction.js"></script>
+        <script src="../../../jsOMS/Model/Message/FormValidation.js"></script>
+        <script src="../../../jsOMS/Model/Message/NotifyType.js"></script>
+        <script src="../../../jsOMS/Model/Message/Notify.js"></script>
+        <script src="../../../jsOMS/Model/Message/Redirect.js"></script>
+        <script src="../../../jsOMS/Model/Message/Reload.js"></script>
+        <script src="../../../jsOMS/Model/Action/Message/Request.js"></script>
+        <script src="../../../jsOMS/Model/Action/Message/Log.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Popup.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Remove.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Show.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Hide.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Focus.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Datalist/Clear.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Datalist/Append.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Table/Clear.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/Table/Append.js"></script>
+        <script src="../../../jsOMS/Model/Action/Utils/Timer.js"></script>
+        <script src="../../../jsOMS/Model/Action/Validate/Keypress.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/SetValue.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/RemoveValue.js"></script>
+        <script src="../../../jsOMS/Model/Action/Dom/GetValue.js"></script>
+        <script src="../../../Web/Backend/js/config.js"></script>
+        <script src="../../../Web/Backend/js/global/ActionEvents.js"></script>
+        <script src="../../../Web/Backend/js/global/KeyboardEvents.js"></script>
+        <script src="../../../Web/Backend/js/global/MouseEvents.js"></script>
+        <script src="../../../Web/Backend/js/global/ResponseEvents.js"></script>
+        <script src="../../../Web/Backend/js/global/TouchEvents.js"></script>
+        <script src="../../../Web/Backend/js/global/VoiceEvents.js"></script>
+        <script src="../load.js"></script>
+    </head>
+    <body>
+        <header>
+            <div id="bar-s">
+                <ul id="t-nav" role="navigation">
+                    <li>
+                        <a href="/en/backend/calendar/dashboard?id=Admin">
+                            <i class="fa fa-calendar infoIcon"></i> Calendar
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/en/backend/task/dashboard?id=Admin">
+                            <i class="fa fa-bolt infoIcon"><span class="badge">99</span></i> Tasks
+                        </a>
+                    </li>
+                    <li>
+                        <a href="/en/api/logout?id=Admin">
+                            <i class="fa fa-power-off infoIcon"></i> Logout
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div id="bar-b">
+                <span class="vC" id="ham-trigger">
+                    <label for="nav-trigger"><i class="fa fa-bars"></i></label>
+                </span>
+                <span class="vC" id="logo" itemscope itemtype="http://schema.org/Organization">
+                    <select class="plain" id="unit-selector" name="unit" data-action='[{"listener": "change", "action": [{"key": 1, "type": "redirect", "uri": "{%}&u={#unit-selector}", "target": "self"}]}]' title="Unit selector">
+                        <option value="" selected>Organization Name</option>
+                    </select>
+                </span>
+                <span class="vC" id="s-bar" role="search">
+                    <span><input id="iSearchBox" name="search" type="text" autofocus="autofocus"></span>
+                    <input type="submit" id="iSearchButton" name="searchButton" value="Search">
+                </span>
+                <span class="vC" id="u-box">
+                    <a href="">
+                        <span>AccountName</span>
+                        <img alt="" data-lazyload="../../../Web/Backend/img/user_default_6.png">
+                    </a>
+                </span>
+            </div>
+        </header>
+        <div id="out">
+            <ul id="nav-side" class="nav" role="navigation">
+                <li><input id="nav-help" type="checkbox" checked>
+                    <ul>
+                        <li><span class="centerText">
+                                <i class="fa fa-question-circle"></i>
+                            </span>
+                            HTML Tests
+                            <label for="nav-Help">
+                                <i class="fa fa-chevron-down min"></i>
+                                <i class="fa fa-chevron-up max"></i>
+                            </label>
+                        </li>
+                        <li><a href="?page=forms">Forms</a></li>
+                        <li><a href="?page=article">Articles</a></li>
+                        <li><a href="?page=buttons">Buttons</a></li>
+                        <li><a href="?page=tags">Tags</a></li>
+                        <li><a href="?page=boxes">Boxes</a></li>
+                        <li><a href="?page=images">Images</a></li>
+                        <li><a href="?page=sliders">Sliders</a></li>
+                        <li><a href="?page=loaders">Loaders</a></li>
+                        <li><a href="?page=grid">Grid</a></li>
+                        <li><a href="?page=tabs">Tabs</a></li>
+                        <li><a href="?page=breadcrumbs">Breadcrumbs</a></li>
+                        <li><a href="?page=tables">Tables</a></li>
+                        <li><a href="?page=popups">Popups</a></li>
+                        <li><a href="?page=notifications">Notifications</a></li>
+                        <li><a href="?page=editor">Editor</a></li>
+                        <li><a href="?page=calender">Calendar</a></li>
+                        <li><a href="?page=navigations">Navigations</a></li>
+                    </ul>
+                </li>
+                <li><input id="nav-help" type="checkbox" checked>
+                    <ul>
+                        <li><span class="centerText">
+                                <i class="fa fa-question-circle"></i>
+                            </span>
+                            JS Tests
+                            <label for="nav-Help">
+                                <i class="fa fa-chevron-down min"></i>
+                                <i class="fa fa-chevron-up max"></i>
+                            </label>
+                        </li>
+                        <li><a href="?page=charts">Charts</a></li>
+                        <li><a href="?page=3d">3D</a></li>
+                        <li><a href="?page=lazyload">Lazyload</a></li>
+                        <li><a href="?page=actions">Actions</a></li>
+                    </ul>
+                </li>
+            </ul>
+            <input type="checkbox" id="nav-trigger" class="nav-trigger" checked>
+            <main>
+                <?php include __DIR__ . '/' . \str_replace('.', '', ($_GET['page'] ?? 'welcome')) . '.php'; ?>
+            </main>
+        </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/tests/app/loaders.php b/tests/app/loaders.php
new file mode 100644
index 0000000..d6018a8
--- /dev/null
+++ b/tests/app/loaders.php
@@ -0,0 +1,19 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <section class="box wf-100">
+            <div class="spinner-1"></div>
+        </section>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <section class="box wf-100">
+            <div class="meter blue">
+                <div class="spinner-2">
+                    <div class="bounce1"></div>
+                    <div class="bounce2"></div>
+                    <div class="bounce3"></div>
+                </div>
+            </div>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/navigations.php b/tests/app/navigations.php
new file mode 100644
index 0000000..cba8f99
--- /dev/null
+++ b/tests/app/navigations.php
@@ -0,0 +1,17 @@
+<div class="row">
+    <div class="col-xs-12">
+        <ul class="nav-top" role="navigation">
+            <li><a>About</a></li>
+            <li>
+                <a>Portfolio</a>
+                <ul>
+                    <li><a>Web Design</a></li>
+                    <li><a>Web Development</a></li>
+                    <li><a>Illustrations</a></li>
+                </ul>
+            </li>
+            <li><a>Blog</a></li>
+            <li><a>Contact</a></li>
+        </ul>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/notifications.php b/tests/app/notifications.php
new file mode 100644
index 0000000..996157e
--- /dev/null
+++ b/tests/app/notifications.php
@@ -0,0 +1,61 @@
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <header><h1>App Notifications</h1></header>
+            <div class="inner">
+                <button id="okButton">OK Message</button>
+                <button id="infoButton">Info Message</button>
+                <button id="warningButton">Warning Message</button>
+                <button id="errorButton">Error Message</button>
+            </div>
+        </section>
+    </div>
+</div>
+
+<template id="app-message">
+    <div class="log-msg" style="z-index: 11; position: absolute; margin: 0 auto; right: 1%; top: 1%;">
+        <h1 class="log-msg-title"></h1>
+        <div class="log-msg-content"></div>
+    </div>
+</template>
+<script>
+    document.getElementById('okButton').addEventListener('click', function() {
+        window.omsApp.notifyManager.send(
+            new jsOMS.Message.Notification.NotificationMessage(
+                'ok',
+                'Some Title',
+                'This is a message content.'
+            ), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
+        );
+    });
+
+    document.getElementById('infoButton').addEventListener('click', function() {
+        window.omsApp.notifyManager.send(
+            new jsOMS.Message.Notification.NotificationMessage(
+                'info',
+                'Some Title',
+                'This is a message content.'
+            ), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
+        );
+    });
+
+    document.getElementById('warningButton').addEventListener('click', function() {
+        window.omsApp.notifyManager.send(
+            new jsOMS.Message.Notification.NotificationMessage(
+                'warning',
+                'Some Title',
+                'This is a message content.'
+            ), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
+        );
+    });
+
+    document.getElementById('errorButton').addEventListener('click', function() {
+        window.omsApp.notifyManager.send(
+            new jsOMS.Message.Notification.NotificationMessage(
+                'error',
+                'Some Title',
+                'This is a message content.'
+            ), jsOMS.Message.Notification.NotificationType.APP_NOTIFICATION
+        );
+    });
+</script>
\ No newline at end of file
diff --git a/tests/app/popups.php b/tests/app/popups.php
new file mode 100644
index 0000000..e69de29
diff --git a/tests/app/sliders.php b/tests/app/sliders.php
new file mode 100644
index 0000000..227bae5
--- /dev/null
+++ b/tests/app/sliders.php
@@ -0,0 +1,46 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <section class="box">
+            <div class="slider-1">
+                <figure>
+                    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
+                    <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" alt="">
+                    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" alt="">
+                    <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" alt="">
+                    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" alt="">
+                </figure>
+            </div>
+        </section>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <section class="box wf-100">
+            <div class="slider-2">
+                <input type="radio" name="slide_switch" id="id1"/>
+                <label for="id1">
+                    <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
+                </label>
+                <img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
+
+                <!--Lets show the second image by default on page load-->
+                <input type="radio" name="slide_switch" id="id2" checked="checked"/>
+                <label for="id2">
+                    <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
+                </label>
+                <img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
+
+                <input type="radio" name="slide_switch" id="id3"/>
+                <label for="id3">
+                    <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
+                </label>
+                <img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
+
+                <input type="radio" name="slide_switch" id="id4"/>
+                <label for="id4">
+                    <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
+                </label>
+                <img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
+            </div>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/tables.php b/tests/app/tables.php
new file mode 100644
index 0000000..b7fe82f
--- /dev/null
+++ b/tests/app/tables.php
@@ -0,0 +1,192 @@
+<div class="row">
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <table class="table green" id="table1">
+                <caption>Table Title</caption>
+                <thead>
+                <tr>
+                    <td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Col2</td>
+                    <td>Col1</td>
+                    <td>Col4</td>
+                    <td>Col3</td>
+                </tr>
+                <tr>
+                    <td>Col4</td>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                <tr>
+                    <td>Col2</td>
+                    <td>Col1</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="4">
+                        <label>Results: 4</label>
+                        <select>
+                            <option>25</option>
+                            <option>50</option>
+                            <option>100</option>
+                            <option>500</option>
+                        </select>
+                        <ul class="pagination">
+                            <li><a href="#" class="active">1</a></li>
+                            <li><a href="#">2</a></li>
+                            <li><a href="#">3</a></li>
+                            <li><a href="#">4</a></li>
+                            <li>...</li>
+                            <li><a href="#">20</a></li>
+                        </ul>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+
+    <div class="col-xs-12 col-md-6">
+        <div class="box wf-100">
+            <table class="table blue" id="table2">
+                <caption>Table Title</caption>
+                <thead>
+                <tr>
+                    <td>Col1 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col2 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col3 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                    <td>Col4 Title<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i></td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                    <td>Col2</td>
+                    <td>Col1</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col4</td>
+                    <td>Col3</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                <tr>
+                    <td>Col4</td>
+                    <td>Col2</td>
+                    <td>Col1</td>
+                    <td>Col3</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="4">
+                        <label>Results: 4</label>
+                        <select>
+                            <option>25</option>
+                            <option>50</option>
+                            <option>100</option>
+                            <option>500</option>
+                        </select>
+                        <ul class="pagination">
+                            <li><a href="#" class="active">1</a></li>
+                            <li><a href="#">2</a></li>
+                            <li><a href="#">3</a></li>
+                            <li><a href="#">4</a></li>
+                            <li>...</li>
+                            <li><a href="#">20</a></li>
+                        </ul>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <table class="table red">
+                <caption>Table Title</caption>
+                <thead>
+                <tr>
+                    <td>Col1 Title</td>
+                    <td>Col2 Title</td>
+                    <td>Col3 Title</td>
+                    <td>Col4 Title</td>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                <tr>
+                    <td>Col1</td>
+                    <td>Col2</td>
+                    <td>Col3</td>
+                    <td>Col4</td>
+                </tr>
+                </tbody>
+                <tfoot>
+                <tr>
+                    <td colspan="4">
+                        <label>Results: 4</label>
+                        <select>
+                            <option>25</option>
+                            <option>50</option>
+                            <option>100</option>
+                            <option>500</option>
+                        </select>
+                        <ul class="pagination">
+                            <li><a href="#" class="active">1</a></li>
+                            <li><a href="#">2</a></li>
+                            <li><a href="#">3</a></li>
+                            <li><a href="#">4</a></li>
+                            <li>...</li>
+                            <li><a href="#">20</a></li>
+                        </ul>
+                    </td>
+                </tr>
+                </tfoot>
+            </table>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/tabs.php b/tests/app/tabs.php
new file mode 100644
index 0000000..06afe6b
--- /dev/null
+++ b/tests/app/tabs.php
@@ -0,0 +1,94 @@
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <div class="tabular tabview">
+                <ul class="tab-links">
+                    <li><label for="c-tab-1">TAAAB</label></li>
+                    <li class="active"><label for="c-tab-2">TAAAB</label></li>
+                </ul>
+                <div class="tab-content">
+                    <input type="radio" id="c-tab-1" name="tabular-1" checked>
+                    <div class="tab">
+                        Test content
+                    </div>
+                    <input type="radio" id="c-tab-2" name="tabular-1">
+                    <div class="tab tab-2">
+                        <p>Test content 2</p><p>asdf</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box wf-100">
+            <div class="tabular-2 tabview">
+                <ul class="tab-links">
+                    <li><label for="c-tab2-1">TAAAB</label></li>
+                    <li class="active"><label for="c-tab2-2">TAAAB</label></li>
+                </ul>
+                <div class="tab-content">
+                    <input type="radio" id="c-tab2-1" name="tabular-2" checked>
+                    <div class="tab">
+                        Test content
+                    </div>
+                    <input type="radio" id="c-tab2-2" name="tabular-2">
+                    <div class="tab tab-2">
+                        <p>Test content 2</p><p>asdf</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box ac-container wf-100">
+            <input type="checkbox" name="About us" id="ac-1">
+            <label for="ac-1">About us</label>
+            <section>
+                <p>Well, the way they make shows is, they make one show. That show's called a pilot. Then they show
+                    that show to the people who make shows, and on the strength of that one show they decide if
+                    they're going to make more shows.</p>
+            </section>
+            <input type="checkbox" name="About us" id="ac-2">
+            <label for="ac-2">How we work</label>
+            <section>
+                <p>Like you, I used to think the world was this great place where everybody lived by the same
+                    standards I did, then some kid with a nail showed me I was living in his world, a world where
+                    chaos rules not order, a world where righteousness is not rewarded. That's Cesar's world, and if
+                    you're not willing to play by his rules, then you're gonna have to pay the price. </p>
+            </section>
+            <input type="checkbox" name="About us" id="ac-3" checked>
+            <label for="ac-3">References</label>
+            <section>
+                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
+                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
+                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
+                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
+                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
+                    doesn't hold a candle to man. </p>
+
+                <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it
+                    killed the world once and got a taste for murder. After the avalanche, it took us a week to
+                    climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us
+                    survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We
+                    said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it
+                    doesn't hold a candle to man. </p>
+            </section>
+            <input type="checkbox" name="About us" id="ac-4">
+            <label for="ac-4">Contact us</label>
+            <section>
+                <p>You see? It's curious. Ted did figure it out - time travel. And when we get back, we gonna tell
+                    everyone. How it's possible, how it's done, what the dangers are. But then why fifty years in
+                    the future when the spacecraft encounters a black hole does the computer call it an 'unknown
+                    entry event'? Why don't they know? If they don't know, that means we never told anyone. And if
+                    we never told anyone it means we never made it back. Hence we die down here. Just as a matter of
+                    deductive logic. </p>
+            </section>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/tags.php b/tests/app/tags.php
new file mode 100644
index 0000000..b0985a7
--- /dev/null
+++ b/tests/app/tags.php
@@ -0,0 +1,39 @@
+<div class="row">
+    <div class="col-xs-12">
+        <div class="box">
+            <span class="tag green">Test Tag</span>
+            <span class="tag red">Test Tag</span>
+            <span class="tag blue">Test Tag</span>
+            <span class="tag orange">Test Tag</span>
+            <span class="tag lightblue">Test Tag</span>
+            <span class="tag yellow">Test Tag</span>
+            <span class="tag purple">Test Tag</span>
+            <span class="tag pink">Test Tag</span>
+            <span class="tag grey">Test Tag</span>
+            <span class="tag darkred">Test Tag</span>
+            <span class="tag darkgreen">Test Tag</span>
+            <span class="tag darkblue">Test Tag</span>
+        </div>
+    </div>
+</div>
+
+<div class="row">
+    <div class="col-xs-12">
+        <section class="box wf-100">
+            <div class="inner">
+                <span class="tag green">Test Tag</span>
+                <span class="tag red">Test Tag</span>
+                <span class="tag blue">Test Tag</span>
+                <span class="tag orange">Test Tag</span>
+                <span class="tag lightblue">Test Tag</span>
+                <span class="tag yellow">Test Tag</span>
+                <span class="tag purple">Test Tag</span>
+                <span class="tag pink">Test Tag</span>
+                <span class="tag grey">Test Tag</span>
+                <span class="tag darkred">Test Tag</span>
+                <span class="tag darkgreen">Test Tag</span>
+                <span class="tag darkblue">Test Tag</span>
+            </div>
+        </section>
+    </div>
+</div>
\ No newline at end of file
diff --git a/tests/app/welcome.php b/tests/app/welcome.php
new file mode 100644
index 0000000..451f526
--- /dev/null
+++ b/tests/app/welcome.php
@@ -0,0 +1 @@
+Test welcome page
\ No newline at end of file
diff --git a/tests/load.js b/tests/load.js
index 7ff77a4..471df61 100644
--- a/tests/load.js
+++ b/tests/load.js
@@ -115,57 +115,4 @@ jsOMS.ready(function ()
 
     /** global: jsOMS */
     window.omsApp = new jsOMS.Application();
-
-    const inputElement = document.getElementById('input1');
-    const dataList = inputElement.getElementsByClassName('dropdown')[0].getElementsByTagName('table')[0];
-    const dataTpl = inputElement.getElementsByClassName('rowTemplate')[0];
-    const src = inputElement.getElementsByClassName('inputClass')[0].getAttribute('data-src');
-
-    document.getElementById('inputId').addEventListener('keyup', function(e) {
-        if (typeof src !== 'undefined' && src !== '') {
-            while (dataList.firstChild) {
-                dataList.removeChild(dataList.firstChild);
-            }
-            
-            const request = new jsOMS.Message.Request.Request(src);
-            request.setSuccess(function (data) {
-                data = JSON.parse(data.response);
-                const dataLength = data.length;
-
-                console.table(data);
-
-                for(let i = 0; i < dataLength; ++i) {
-                    const newRow = dataTpl.content.cloneNode(true);
-                    const fields = newRow.querySelectorAll('[data-tpl-value]');
-                    const fieldLength = fields.length;
-
-                    for (let j = 0; j < fieldLength; ++j) {
-                        console.log(jsOMS.getArray(fields[j].getAttribute('data-tpl-value'), data[i]));
-                        fields[j].appendChild(document.createTextNode(jsOMS.getArray(fields[j].getAttribute('data-tpl-name'), data[i])));
-                    }
-
-                    dataList.appendChild(newRow);
-                }
-            });
-            request.send();
-        }
-
-        // check if data-src is available 
-            // if yes load data with delay of x ms
-            // if dropdown active
-                // put data into dropdown
-                // select highest fit
-                // with enter/tab the text is completed
-                // if tags is true
-                    // move selected to tag
-                // if emptyafter select is true
-                    // remove content from input field
-                // else
-                    // autocomplete text based on selecteion
-            // else put directly into input field and/or tag list depending on settings
-        // if not check drop down for search results/data and do similar tasks as above 
-        // .... reorder ... currently strucuture sux!
-
-        // the dropdown should be a table because the data might be in tables (e.g. first name, second name, address etc. for a result)
-    });
 });