--- 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"/>