From dca97471a4b2b9db585f2e25117a9ebd6e351f8d Mon Sep 17 00:00:00 2001
From: Remy Sharp <remy@remysharp.com>
Date: Wed, 7 Mar 2012 12:22:05 +0000
Subject: [PATCH] add hidden test

---
 demos.json        | 10 ++++++++++
 demos/hidden.html | 11 +++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 demos/hidden.html

diff --git a/demos.json b/demos.json
index c018389..3f30cf2 100644
--- a/demos.json
+++ b/demos.json
@@ -9,6 +9,16 @@
     },
     "test": "typeof FileReader != 'undefined' && 'draggable' in document.createElement('span') && !!window.FormData && 'upload' in new XMLHttpRequest"
   },
+  {
+    "desc": "Hidden property",
+    "url": "hidden",
+    "tags": "hidden",
+    "support": {
+      "live": "chrome firefox opera safari",
+      "nightly": ""
+    },
+    "test": "'hidden' in document.createElement('i')"
+  },
   {
     "desc": "Simple class manipulation",
     "url": "classlist",
diff --git a/demos/hidden.html b/demos/hidden.html
new file mode 100644
index 0000000..6bbb102
--- /dev/null
+++ b/demos/hidden.html
@@ -0,0 +1,11 @@
+<title>Hidden</title>
+<style>
+.fail { background: #c00; padding: 2px; color: #fff; }
+</style>
+<article>
+  <p>Welcome dear HTML5-er. You will be able to read this paragraph, but not the next. The next paragraph has the hidden property set on it. It's a boolean that uses the browsers own stylesheet to hide the element, which is nicer than having to dip in to the <code>style</code> properties in JavaScript.</p>
+  <p id="test" class="fail">Sadly, your browser doesn't support the hidden property. Useful when you want to quickly do <code>element.hidden</code>. Ah well, back to CSS.</p>
+</article>
+<script>
+document.getElementById('test').hidden = true;
+</script>
\ No newline at end of file