[css3-syntax] Add (not in the draft yet) railroad diagrams for parsing.

Author: SimonSapin

css3-syntax/Diagrams.src.html

@@ -18,10 +18,20 @@ <h1>Railroad diagrams for CSS Syntax Level 3</h1>
 	</p>
 
 <h2>Preview</h2>
+<h3 id=tokens>Tokens</h3>
 	<dl>
 	</dl>
+<h3 id=parsing>Parsing</h3>
+    <p>All comments are ignored.</p>
+	<dl>
+	</dl>
+
 
 <h2 id=markup>Markup</h2>
+<h3>Tokens</h3>
+	<textarea style="box-sizing: border-box; width: 100%; height: 20em">
+	</textarea>
+<h3>Parsing</h3>
 	<textarea style="box-sizing: border-box; width: 100%; height: 20em">
 	</textarea>
 
@@ -46,7 +56,7 @@ <h2 id=markup>Markup</h2>
 		NonTerminal('not NL or hex digit'),
 		Sequence(
 			OneOrMore(NonTerminal('hex digit'), Comment('1-6 times')),
-			Optional(NonTerminal('WS'), 'skip')))));
+			Optional(NonTerminal('WS*'), 'skip')))));
 
 add('IDENT', Diagram(
 	Choice(0, Skip(), '-'),
@@ -155,4 +165,87 @@ <h2 id=markup>Markup</h2>
 	// XXX work around a bug/limitation in the spec pre-processor.
 	// Single quotes have a special meaning there.
 	.replace(/'/g, '&apos;');
+
+preview = document.getElementsByTagName('dl')[1];
+
+// Tree items:
+
+var NT = NonTerminal
+
+add('Stylesheet', Diagram(ZeroOrMore(Choice(0,
+    NT('Style rule'), NT('At-rule'), NT('WHITESPACE'), NT('CDO'), NT('CDC')))));
+
+add('Style rule', Diagram(
+    Optional(Sequence(
+        NT('Component value, except AT-KEYWORD or {} block'),
+        ZeroOrMore(NT('Component value, except {} block')))),  // selector
+    NT('{'), NT('Declaration/at-rule list'), NT('}')));
+
+add('At-rule', Diagram(
+    NT('AT-KEYWORD'),
+    ZeroOrMore(NT('Component value, except SEMICOLON or {} block')),
+    Choice(0,
+        Sequence(NT('{'), NT('Declaration/at-rule list'), NT('}')),
+        Sequence(NT('{'), NT('Rule list'), NT('}')),
+        NT('SEMICOLON'))));
+
+add('Rule list', Diagram(
+    ZeroOrMore(Choice(0, NT('Style rule'), NT('At-rule'), NT('WHITESPACE')))));
+
+add('WS*', Diagram(ZeroOrMore(NT('WHITESPACE'))));
+
+add('Declaration/at-rule list', Diagram(
+    NT('WS*'),
+    Optional(Choice(0,
+        Sequence(
+            Optional(NT('Declaration')),
+            Optional(Sequence(NT(';'), NT('Declaration/at-rule list')))),
+        Sequence(
+            NT('At-rule'),
+            NT('Declaration/at-rule list'))))));
+
+add('Declaration', Diagram(
+    NT('IDENT'), NT('WS*'), NT('COLON'), NT('WS*'),
+    ZeroOrMore(NT('Component value, except SEMICOLON or DELIM(!)')),
+    Optional(Sequence(
+        // XXX Mention ASCII case-insensitivity?
+        NT('DELIM(!)'), NT('WS*'), NT('IDENT(important)')))));
+
+add('Component value', Diagram(Choice(0,
+    NT("IDENT"),
+    NT("HASH"),
+    NT("STRING"),
+    NT("URL"),
+    NT("DELIM"),
+    NT("NUMBER"),
+    NT("PERCENTAGE"),
+    NT("DIMENSION"),
+    NT("UNICODE-RANGE"),
+    NT("WHITESPACE"),
+    NT("COLON"),
+    NT("SEMICOLON"),
+    NT("AT-KEYWORD"),
+
+    NT("{} block"),
+    NT("() block"),
+    NT("[] block"),
+    NT("Function block"))));
+
+
+add('{} block', Diagram(NT('{'), ZeroOrMore(NT('Component value')), NT('}')));
+add('() block', Diagram(NT('('), ZeroOrMore(NT('Component value')), NT(')')));
+add('[] block', Diagram(NT('['), ZeroOrMore(NT('Component value')), NT(']')));
+
+add('Function block', Diagram(
+    NT('FUNCTION'), ZeroOrMore(
+        ZeroOrMore(NT('Component value, except DELIM(,)')),
+        NT('DELIM(,)')),
+    ')'));
+
+
+document.getElementsByTagName('textarea')[1].value = '\t' + preview.outerHTML
+	// XXX work around a bug/limitation in the spec pre-processor.
+	// Single quotes have a special meaning there.
+	.replace(/'/g, '&apos;');
+
 </script>