From b9398111006dab879cc641aeccf9097bbaa22a84 Mon Sep 17 00:00:00 2001
From: XhmikosR <xhmikosr@gmail.com>
Date: Tue, 6 Dec 2016 10:25:58 +0200
Subject: [PATCH] demos: formatting.

---
 demos/css/CSSParserDemo.htm    | 357 +++++++++++++++++----------------
 demos/css/CSSTokenizerDemo.htm |  82 ++++----
 2 files changed, 221 insertions(+), 218 deletions(-)
diff --git a/demos/css/CSSParserDemo.htm b/demos/css/CSSParserDemo.htm
index 234a6c6e..80144e2d 100755
--- a/demos/css/CSSParserDemo.htm
+++ b/demos/css/CSSParserDemo.htm
@@ -1,18 +1,19 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!doctype html>
+<html lang="en">
 <head>
-<title>CSS Parser Demo</title>
-<!--<script type="text/javascript" src="../../dist/parserlib.js"></script>-->
-<script type="text/javascript" src="../../dist/parserlib-core.js"></script>
-<script type="text/javascript" src="../../dist/parserlib-css.js"></script>
-<style type="text/css">
-.error { color: red; }
-</style>
+    <meta charset="utf-8">
+    <title>CSS Parser Demo</title>
+    <!--<script src="../../dist/parserlib.js"></script>-->
+    <script src="../../dist/parserlib-core.js"></script>
+    <script src="../../dist/parserlib-css.js"></script>
+    <style>
+    .error { color: red; }
+    </style>
 </head>
 <body>
-<h1>CSS Parser Demo</h1>
-<textarea rows="10" cols="40" id="input">
-@charset "UTF-8"; 
+    <h1>CSS Parser Demo</h1>
+    <textarea rows="10" cols="40" id="input">
+@charset "UTF-8";
 
 @import url("booya.css") print,screen;
 @import "whatup.css" screen;
@@ -22,7 +23,6 @@ <h1>CSS Parser Demo</h1>
 @namespace svg "http://www.w3.org/2000/svg";
 
 @keyframes 'diagonal-slide' {
-
     from {
         left: 0;
         top: 0;
@@ -35,188 +35,195 @@ <h1>CSS Parser Demo</h1>
 }
 
 li.inline {
-  background: url("something.png");
-  display: inline;
-  padding-left: 3px;
-  padding-right: 7px;
-  border-right: 1px dotted #066;
+    background: url("something.png");
+    display: inline;
+    padding-left: 3px;
+    padding-right: 7px;
+    border-right: 1px dotted #066;
 }
 
 li.last {
-  display: inline;
-  padding-left: 3px !important;
-  padding-right: 3px;
-  border-right: 0px;
-} 
+    display: inline;
+    padding-left: 3px !important;
+    padding-right: 3px;
+    border-right: 0;
+}
 
 @media print {
     li.inline {
-      color: black;
+        color: black;
     }
 }
 
 @page {
-  margin: 10%;
-  counter-increment: page;
-
-  @top-center {
-    font-family: sans-serif;
-    font-weight: bold;
-    font-size: 2em;
-    content: counter(page);
-  }
+    margin: 10%;
+    counter-increment: page;
+
+    @top-center {
+        font-family: sans-serif;
+        font-weight: bold;
+        font-size: 2em;
+        content: counter(page);
+    }
 }
-</textarea>
-<p><input type="checkbox" id="starHack" /><label for="starHack">Accept star hack</label>&nbsp;&nbsp;<input type="checkbox" id="ieFilters" /><label for="ieFilters">Accept IE filters</label>&nbsp;&nbsp;<input type="checkbox" id="strictMode" /><label for="strictMode">Strict mode</label></p>
-<input type="button" onclick="parse()" value="parse">
-<p>(You may want to keep the CSS kinda small, this could take a while.)</p>
-<div id="output">
-
-</div>
-<script type="text/javascript">
-
-function parse(){
-    document.getElementById("output").innerHTML = "";
-    var parser = new parserlib.css.Parser({ starHack: document.getElementById("starHack").checked,
-                                 ieFilters: document.getElementById("ieFilters").checked,
-                                 strict: document.getElementById("strictMode").checked});
-    parser.addListener("startstylesheet", function(){
-        log("Starting style sheet");
-    });
-    
-    parser.addListener("endstylesheet", function(){
-        log("Ending style sheet");
-    });
-    
-    parser.addListener("charset", function(event){
-        log("Charset is " + event.charset);
-    });
-    
-    parser.addListener("namespace", function(event){
-        log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
-    });
-    
-    parser.addListener("startfontface", function(event){
-        log("Starting font face");
-    });
-    
-    parser.addListener("endfontface", function(event){
-        log("Ending font face");
-    });
-    
-    parser.addListener("startkeyframes", function(event){
-        log("Starting keyframes with name=" + event.name);
-    });
-    
-    parser.addListener("startkeyframerule", function(event){
-        log("Starting keyframe rule with " + event.keys.length + " keys(s)");
-        
-        for (var i=0,len=event.keys.length; i < len; i++){
-            var key = event.keys[i];
-            
-            log("  " + key + " (" + key.line + "," + key.col + ")");            
-        }
+    </textarea>
+
+    <p>
+        <input type="checkbox" id="starHack" />
+        <label for="starHack">Accept star hack</label>&nbsp;&nbsp;
+        <input type="checkbox" id="ieFilters" />
+        <label for="ieFilters">Accept IE filters</label>&nbsp;&nbsp;
+        <input type="checkbox" id="strictMode" />
+        <label for="strictMode">Strict mode</label>
+    </p>
+
+    <input type="button" onclick="parse()" value="parse">
+
+    <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
+
+    <div id="output"></div>
+
+    <script>
+
+    function parse() {
+        document.getElementById("output").innerHTML = "";
+        var parser = new parserlib.css.Parser({
+            starHack: document.getElementById("starHack").checked,
+            ieFilters: document.getElementById("ieFilters").checked,
+            strict: document.getElementById("strictMode").checked
+        });
+
+        parser.addListener("startstylesheet", function() {
+            log("Starting style sheet");
+        });
+
+        parser.addListener("endstylesheet", function() {
+            log("Ending style sheet");
+        });
+
+        parser.addListener("charset", function(event) {
+            log("Charset is " + event.charset);
+        });
+
+        parser.addListener("namespace", function(event) {
+            log("Namespace with prefix=" + event.prefix + " and URI=" + event.uri);
+        });
+
+        parser.addListener("startfontface", function(event) {
+            log("Starting font face");
+        });
+
+        parser.addListener("endfontface", function(event) {
+            log("Ending font face");
+        });
+
+        parser.addListener("startkeyframes", function(event) {
+            log("Starting keyframes with name=" + event.name);
+        });
+
+        parser.addListener("startkeyframerule", function(event) {
+            log("Starting keyframe rule with " + event.keys.length + " keys(s)");
+
+            for (var i = 0, len=event.keys.length; i < len; i++) {
+                var key = event.keys[i];
+
+                log("  " + key + " (" + key.line + "," + key.col + ")");
+            }
+        });
+
+        parser.addListener("endkeyframerule", function(event) {
+            log("Ending keyframe rule with keys [" + event.keys + "]");
+        });
+
+        parser.addListener("endkeyframes", function(event) {
+            log("Ending keyframes with name=" + event.name);
+        });
+
+        parser.addListener("startpage", function(event) {
+            log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
+        });
+
+
+        parser.addListener("endpage", function(event) {
+            log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
+        });
 
-    });
-    
-    parser.addListener("endkeyframerule", function(event){
-        log("Ending keyframe rule with keys [" + event.keys + "]");
-    });    
-    
-    parser.addListener("endkeyframes", function(event){
-        log("Ending keyframes with name=" + event.name);
-    });
-    
-    parser.addListener("startpage", function(event){
-        log("Starting page with ID=" + event.id + " and pseudo=" + event.pseudo);
-    });
-    
-    
-    parser.addListener("endpage", function(event){
-        log("Ending page with ID=" + event.id + " and pseudo=" + event.pseudo);
-    });
-
-    parser.addListener("startpagemargin", function(event){
-        log("Starting page margin " + event.margin);
-    });
-    
-    
-    parser.addListener("endpagemargin", function(event){
-        log("Ending page margin " + event.margin);
-    });
-
-    
-    parser.addListener("import", function(event){
-        log("Importing " + event.uri + " for media types [" + event.media + "]");
-    });
-    
-    parser.addListener("startrule", function(event){
-        log("Starting rule with " + event.selectors.length + " selector(s)");
-        
-        for (var i=0,len=event.selectors.length; i < len; i++){
-            var selector = event.selectors[i];
-            
-            log("  Selector #1 (" + selector.line + "," + selector.col + ")");
-            
-            for (var j=0,count=selector.parts.length; j < count; j++){
-                log("    Unit #" + (j+1));
-                
-                if (selector.parts[j] instanceof parserlib.css.SelectorPart){
-                    log("      Element name: " + selector.parts[j].elementName);
-                    
-                    for (var k=0; k < selector.parts[j].modifiers.length; k++){
-                        log("        Modifier: " + selector.parts[j].modifiers[k]);
+        parser.addListener("startpagemargin", function(event) {
+            log("Starting page margin " + event.margin);
+        });
+
+
+        parser.addListener("endpagemargin", function(event) {
+            log("Ending page margin " + event.margin);
+        });
+
+
+        parser.addListener("import", function(event) {
+            log("Importing " + event.uri + " for media types [" + event.media + "]");
+        });
+
+        parser.addListener("startrule", function(event) {
+            log("Starting rule with " + event.selectors.length + " selector(s)");
+
+            for (var i = 0, len=event.selectors.length; i < len; i++) {
+                var selector = event.selectors[i];
+
+                log("  Selector #1 (" + selector.line + "," + selector.col + ")");
+
+                for (var j = 0, count=selector.parts.length; j < count; j++) {
+                    log("    Unit #" + (j + 1));
+
+                    if (selector.parts[j] instanceof parserlib.css.SelectorPart) {
+                        log("      Element name: " + selector.parts[j].elementName);
+
+                        for (var k=0; k < selector.parts[j].modifiers.length; k++) {
+                            log("        Modifier: " + selector.parts[j].modifiers[k]);
+                        }
+                    } else {
+                        log("      Combinator: " + selector.parts[j]);
                     }
-                } else{
-                    log("      Combinator: " + selector.parts[j]);
+
                 }
-                
-                
+
             }
-            
-            
-        }
 
-    });
-    
-    parser.addListener("endrule", function(event){
-        log("Ending rule with selectors [" + event.selectors + "]");
-    });
-    
-    parser.addListener("property", function(event){
-        log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
-        if (event.invalid){
-            log("    Not valid: " + event.invalid.message);
-        }
-    });
-    
-    parser.addListener("startmedia", function(event){
-        log("Starting media [" + event.media + "]");
-    });
-    
-    parser.addListener("error", function(event){
-        log("Parse error: " + event.message + " (" + event.line + "," + event.col + ")", "error");
-    });
-    
-    parser.addListener("endmedia", function(event){
-        log("Ending media [" + event.media + "]");
-    });    
-
-    try {
-        parser.parse(document.getElementById("input").value);
-    } catch (ex){
-        log("Parse error: " + ex.message, "error");
-    }
-}
+        });
 
+        parser.addListener("endrule", function(event) {
+            log("Ending rule with selectors [" + event.selectors + "]");
+        });
 
-function log(value, level){
-        var output = document.getElementById("output");        
-        output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
-}
+        parser.addListener("property", function(event) {
+            log("Property '" + event.property + "' has a value of '" + event.value + "' and " + (event.important ? "is" : "isn't") + " important. (" + event.property.line + "," + event.property.col + ")");
+            if (event.invalid) {
+                log("    Not valid: " + event.invalid.message);
+            }
+        });
+
+        parser.addListener("startmedia", function(event) {
+            log("Starting media [" + event.media + "]");
+        });
 
+        parser.addListener("error", function(event) {
+            log("Parse error: " + event.message + " (" + event.line + "," + event.col + ")", "error");
+        });
 
+        parser.addListener("endmedia", function(event) {
+            log("Ending media [" + event.media + "]");
+        });
+
+        try {
+            parser.parse(document.getElementById("input").value);
+        } catch (ex){
+            log("Parse error: " + ex.message, "error");
+        }
+    }
+
+    function log(value, level) {
+        var output = document.getElementById("output");
+        output.innerHTML += "<span class=\"" + level + "\">" + value.replace(/ /g, "&nbsp;") + "</span><br>";
+    }
 
-</script>
+    </script>
 </body>
 </html>
diff --git a/demos/css/CSSTokenizerDemo.htm b/demos/css/CSSTokenizerDemo.htm
index bd9839f2..8f515294 100644
--- a/demos/css/CSSTokenizerDemo.htm
+++ b/demos/css/CSSTokenizerDemo.htm
@@ -1,15 +1,15 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
+<!doctype html>
+<html lang="en">
 <head>
-<title>CSS TokenStream Demo</title>
-<script type="text/javascript" src="../../dist/parserlib.js"></script>
-
-
+    <meta charset="utf-8">
+    <title>CSS TokenStream Demo</title>
+    <script src="../../dist/parserlib.js"></script>
 </head>
 <body>
-<h1>CSS TokenStream Demo</h1>
-<textarea rows="10" cols="40" id="input">
-@charset "UTF-8"; 
+    <h1>CSS TokenStream Demo</h1>
+
+    <textarea rows="10" cols="40" id="input">
+@charset "UTF-8";
 
 @import url("booya.css") print,screen;
 @import "whatup.css" screen;
@@ -17,48 +17,44 @@ <h1>CSS TokenStream Demo</h1>
 
 @page :first {
     li.inline {
-      background: url("something.png");
-      display: inline;
-      padding-left: 3px;
-      padding-right: 7px;
-      border-right: 1px dotted #066;
+        background: url("something.png");
+        display: inline;
+        padding-left: 3px;
+        padding-right: 7px;
+        border-right: 1px dotted #066;
     }
-    
+
     li.last {
-      display: inline;
-      padding-left: 3px;
-      padding-right: 3px;
-      border-right: 0px;
-    } 
+        display: inline;
+        padding-left: 3px;
+        padding-right: 3px;
+        border-right: 0;
+    }
 }
-</textarea>
-<input type="button" onclick="tokenize()" value="Tokenize">
-<p>(You may want to keep the CSS kinda small, this could take a while.)</p>
-<div id="output">
+    </textarea>
 
-</div>
-<script type="text/javascript">
+    <input type="button" onclick="tokenize()" value="Tokenize">
 
-function tokenize(){
-    stream = new parserlib.css.TokenStream(document.getElementById("input").value);
-    document.getElementById("output").innerHTML = "";
-    setTimeout(function(){
-        var tt = stream.get();
-        var output = document.getElementById("output");
-        
-        output.innerHTML += tt + " - " + parserlib.css.Tokens.name(tt) + " - (" + stream.token().value + "|line=" + stream.token().startLine + ",startCol=" + stream.token().startCol + ",endCol=" + stream.token().endCol + ")<br>";
-        
-        if (tt != 0){
-            setTimeout(arguments.callee, 15);
-        }
-    
-    
-    }, 15);
-}
+    <p>(You may want to keep the CSS kinda small, this could take a while.)</p>
 
+    <div id="output"></div>
 
+    <script>
+    function tokenize() {
+        stream = new parserlib.css.TokenStream(document.getElementById("input").value);
+        document.getElementById("output").innerHTML = "";
+        setTimeout(function() {
+            var tt = stream.get();
+            var output = document.getElementById("output");
 
+            output.innerHTML += tt + " - " + parserlib.css.Tokens.name(tt) + " - (" + stream.token().value + "|line=" + stream.token().startLine + ",startCol=" + stream.token().startCol + ",endCol=" + stream.token().endCol + ")<br>";
 
-</script>
+            if (tt !== 0) {
+                setTimeout(arguments.callee, 15);
+            }
+
+        }, 15);
+    }
+    </script>
 </body>
 </html>
