[svn r47] interactive demo trunk
authordglazman
Tue, 16 Mar 2010 05:50:44 -0500
branchtrunk
changeset 43 83dbf00720eb
parent 42 67149c16b5af
child 44 d22e39d7a6f9
[svn r47] interactive demo
demo.xhtml
--- a/demo.xhtml	Tue Mar 16 05:35:36 2010 -0500
+++ b/demo.xhtml	Tue Mar 16 05:50:44 2010 -0500
@@ -4,31 +4,32 @@
   <title>Demo of JSCSSP, a CSS parser in JavaScript</title>
 
   <style type="text/css">@charset 'iso-8859-1';
-@media screen,projection,print {/* comment inside a media rule */pre { background-color: #FFFFCC;
-/* comment between two declarations */<a ></a>border: 2px silver solid; padding: 1em; -moz-border-radius: 11px;
--webkit-border-radius:11px}
-body { font-family: sans-serif; margin: 1em }
-/* comment between two style rules */
-h1 { background-color: silver }
-h2 { background-color: lightgrey }
-h1, h2 { margin: 0px; padding: 4px }}
-.foo { content: "foo \
-bar" }</style>
+		pre {
+		  background-color: #FFFFCC;
+		  border: 2px silver solid;
+		  padding: 1em;
+		  -moz-border-radius: 11px;
+		  -webkit-border-radius:11px
+		}
+		body { font-family: sans-serif; margin: 1em }
+		h1 { background-color: silver }
+		h2 { background-color: lightgrey }
+		h1, h2 { margin: 0px; padding: 4px }}
+	</style>
   <script type="application/x-javascript"  src="cssParser.js"></script>
   <script type="application/x-javascript">
-    function onLoad() {
-      var ss = document.styleSheets.item(0).ownerNode.textContent;
+    function doit() {
       var source = document.getElementById("source");
-      source.textContent = ss;
-      var style = document.createElement("style");
-      style.setAttribute("type", "text/css");
-      style.textContent = ss;
-      document.getElementsByTagName("head").item(0).appendChild(style);
+      ss = source.value;
 
       var parser = new CSSParser();
       var sheet = parser.parse(ss, false, true);
-      var serialization = document.getElementById("serialization");
-      serialization.textContent = sheet.cssText;
+      if (sheet) {
+	      var serialization = document.getElementById("serialization");
+	      serialization.textContent = sheet.cssText;
+      }
+      else
+        serialization.textContent = "";
   }
   </script>
 </head>
@@ -37,7 +38,23 @@
   <h2>Author: <a href="http://glazman.org/weblog">Daniel Glazman</a></h2>
   <p>Warning, it's a work in progress. One detail though: no regexps for parsing inside...</p>
   <p>The current document has the following stylesheet attached:</p>
-  <pre id="source"/>
+  <textarea style="margin: auto; width: 100%" rows="15" id="source">/* JSCSSP test */
+pre { background-color: #FFFFCC; /* shorthands */ border: 2px silver solid; padding: 1em;
+
+/* at least one of the 2 following properties not recognized by your browser
+   but parsed and preserved by JSCSSP */
+-moz-border-radius: 11px; -webkit-border-radius:11px}
+
+body { font-family: sans-serif; margin: 1em }
+h1 { background-color: silver }
+h2 { background-color: lightgrey }
+h1, h2 { margin: 0px; padding: 4px }
+
+/* escapes */
+
+.f\00C4 oo { p\roperty: value; content: "foo \
+bar" }</textarea>
+  <p><button onclick="doit()">Parse and Reserialize below</button></p>
   <p><a href="http://sources.disruptive-innovations.com/jscssp/">JSCSSP</a> is called to parse the
      stylesheet and here's how JSCSSP reserializes it:</p>
   <pre id="serialization"/>