diff --git a/tests/basic.html b/tests/basic.html
new file mode 100644
index 0000000..c40494a
--- /dev/null
+++ b/tests/basic.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
+    <title>Basic CSS3 Demos</title>
+
+    <style type="text/css">
+
+        html, body {
+            margin: 0;
+            padding: 0;
+            font-family: sans-serif;
+            font-size: 16px;
+            background: #EEE;
+        }
+
+        .section {
+            border: 1px solid #CCC;
+            padding: 1em 2em 2em;
+            margin: 3em;
+            background: #FFF;
+        }
+
+        .section h2 {
+            border: 1px solid #CCC;
+            position: relative;
+            left: -3em;
+            top: -2em;
+            background: #FFF;
+            font-size: 1em;
+            padding: .25em 1em;
+            margin: 0;
+        }
+
+        .section code {
+            display: block;
+            white-space: pre;
+            margin-left: 250px;
+            min-height: 100px;
+            color: #999;
+            overflow: auto;
+        }
+        .section code strong {
+            color: #000;
+        }
+
+        .test {
+            width: 200px;
+            height: 100px;
+            line-height: 100px;
+            text-align: center;
+            border: 2px solid;
+            background: #FFF;
+            float: left;
+            position: relative;
+            behavior: url(../build/PIE.htc);
+        }
+
+        #test1 {
+            border-color: #c00;
+            -webkit-border-radius: 1em;
+            -moz-border-radius: 1em;
+            border-radius: 1em;
+        }
+
+        #test2 {
+            border-color: #090;
+            -webkit-border-radius: 1em;
+            -moz-border-radius: 1em;
+            border-radius: 1em;
+            -webkit-box-shadow: #999 0 .25em .5em;
+            -moz-box-shadow: #999 0 .25em .5em;
+            box-shadow: #999 0 .25em .5em;
+        }
+
+        #test3 {
+            border-color: #00c;
+            -webkit-border-radius: 1em;
+            -moz-border-radius: 1em;
+            border-radius: 1em;
+            -webkit-box-shadow: #999 0 .25em .5em;
+            -moz-box-shadow: #999 0 .25em .5em;
+            box-shadow: #999 0 .25em .5em;
+            background: #9CF;
+            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9CF), color-stop(100%, #03C));
+            background: -moz-linear-gradient(#9CF, #03C);
+            background: linear-gradient(#9CF, #03C);
+            -pie-background: linear-gradient(#9CF, #03C);
+        }
+
+        #test4 {
+            border-color: #F99;
+            -webkit-border-radius: 1em;
+            -moz-border-radius: 1em;
+            border-radius: 1em;
+            -webkit-box-shadow: #999 0 .25em .5em;
+            -moz-box-shadow: #999 0 .25em .5em;
+            box-shadow: #999 0 .25em .5em;
+            background: #FFF url(icon-ie.png) no-repeat 50% 0;
+            background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
+            -pie-background: url(icon-ie.png) no-repeat 50% 0, url(icon-firefox.png) no-repeat 0 0, url(icon-chrome.png) no-repeat 100% 0, url(icon-safari.png) no-repeat 0 100%, url(icon-opera.png) no-repeat 100% 100% #FFF;
+        }
+
+        #test5 {
+            -webkit-border-image: url(border2.png) 15 stretch;
+            -moz-border-image: url(border2.png) 15 stretch;
+            border-image: url(border2.png) 15 fill stretch;
+            border: 15px solid transparent;
+            width: 180px;
+        }
+
+    </style>
+
+</head>
+<body>
+
+
+    <div class="section">
+        <h2>border-radius</h2>
+        <div class="test" id="test1">Cherry</div>
+<code><strong>border-radius: 1em;   /* Standard */
+-moz-border-radius: 1em;   /* Gecko */
+-webkit-border-radius: 1em;   /* WebKit */</strong></code>
+    </div>
+
+    <div class="section">
+        <h2>box-shadow</h2>
+        <div class="test" id="test2">Apple</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+<strong>box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;</strong></code>
+    </div>
+
+    <div class="section">
+        <h2>linear-gradient</h2>
+        <div class="test" id="test3">Blueberry</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+<strong>background: #9CF;   /* Fallback */
+background: -webkit-gradient(linear, 0 0, 0 100%, from(#9CF), to(#03C));
+background: -moz-linear-gradient(#9CF, #03C);
+background: linear-gradient(#9CF, #03C);</strong></code>
+    </div>
+
+    <div class="section">
+        <h2>multiple background images</h2>
+        <div class="test" id="test4">Rhubarb</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+<strong>background: url(icon-ie.png) no-repeat 50% 0 #FFF;   /* Fallback */
+background: url(icon-ie.png) no-repeat 50% 0,
+            url(icon-firefox.png) no-repeat 0 0,
+            url(icon-chrome.png) no-repeat 100% 0,
+            url(icon-safari.png) no-repeat 0 100%,
+            url(icon-opera.png) no-repeat 100% 100% #FFF;</strong></code>
+    </div>
+
+    <div class="section">
+        <h2>border-image</h2>
+        <div class="test" id="test5">Pumpkin</div>
+<code>border-radius: 1em;
+-moz-border-radius: 1em;
+-webkit-border-radius: 1em;
+box-shadow: #999 0 .25em .5em;
+-webkit-box-shadow: #999 0 .25em .5em;
+-moz-box-shadow: #999 0 .25em .5em;
+<strong>border-image: url(border2.png) 15 fill stretch;
+-moz-border-image: url(border2.png) 15 stretch;
+-webkit-border-image: url(border2.png) 15 stretch;
+border: 15px solid transparent;</strong></code>
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/tests/border2.png b/tests/border2.png
new file mode 100644
index 0000000..847675c
Binary files /dev/null and b/tests/border2.png differ
diff --git a/tests/icon-chrome.png b/tests/icon-chrome.png
new file mode 100644
index 0000000..4561c0f
Binary files /dev/null and b/tests/icon-chrome.png differ
diff --git a/tests/icon-firefox.png b/tests/icon-firefox.png
new file mode 100644
index 0000000..b040a39
Binary files /dev/null and b/tests/icon-firefox.png differ
diff --git a/tests/icon-ie.png b/tests/icon-ie.png
new file mode 100644
index 0000000..3fbc32a
Binary files /dev/null and b/tests/icon-ie.png differ
diff --git a/tests/icon-opera.png b/tests/icon-opera.png
new file mode 100644
index 0000000..704f9bc
Binary files /dev/null and b/tests/icon-opera.png differ
diff --git a/tests/icon-safari.png b/tests/icon-safari.png
new file mode 100644
index 0000000..a30c293
Binary files /dev/null and b/tests/icon-safari.png differ
