drafts: css-syntax/Diagrams.src.html@dec8752a6390 (annotated)

css-syntax/Diagrams.src.html@dec8752a6390 (annotated)

css-syntax/Diagrams.src.html

Sun, 01 Sep 2013 16:18:24 +0100

author: Simon Sapin <simon.sapin@exyr.org>
date: Sun, 01 Sep 2013 16:18:24 +0100
changeset 8996: dec8752a6390
parent 8830: d945246d2184
child 9016: d88caaa3d5fa
permissions: -rw-r--r--

[css-syntax] Revert <unicode-range> changes from CSS 2.1

 <!doctype html>
 <meta charset=utf-8>
 <title>JavaScript source for the railroad diagrams (CSS3 Syntax)</title>
 <link rel=stylesheet href=railroad-diagrams.css>
 <script src=railroad-diagrams.js></script>
 <h1>Railroad diagrams for CSS Syntax Level 3</h1>
 	<p>This file contains the JavaScript “source” of the diagrams.
 	   The library converting them into SVG is maintained
 	   <a href="https://github.com/tabatkins/railroad-diagrams">on GitHub</a>.
 	   The <code>update-diagram-lib.sh</code> script can be used to get the
 	   latest version of the library.
 	</p>
 	<p>
 	   The intent is that edits are done in this file for easy preview.
 	   When the diagrams give satisfaction, the <a href="#markup">markup</a>
 	   can be copied and pasted into <code>Overview.src.html</code>.
 	</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>
 <script>
 var preview = document.getElementsByTagName('dl')[0];
 function add(name, diagram) {
 	var dt = document.createElement('dt'),
 		dd = document.createElement('dd');
 	dt.textContent = name;
 	name = name.toLowerCase().replace(/[\/ ]/g, '-').replace(/[*!]/g, '');
 	dt.setAttribute('id', name + '-diagram');
 	dd.appendChild(diagram.toSVG());
 	preview.appendChild(document.createTextNode('\t'));
 	preview.appendChild(dt);
 	preview.appendChild(document.createTextNode('\n\t\t'));
 	preview.appendChild(dd);
 	preview.appendChild(document.createTextNode('\n\n\t'));
 }
 add('comment', Diagram(
 	'/*',
 	ZeroOrMore(
 		NonTerminal('anything but * followed by /')),
 	'*/'));
 add('newline', Diagram(Choice(0, '\\n', '\\r\\n', '\\r', '\\f')));
 add('whitespace', Diagram(Choice(
 , 'space', '\\t', NonTerminal('newline'))));
 add('hex digit', Diagram(NonTerminal('0-9 a-f or A-F')));
 add('escape', Diagram(
 	'\\', Choice(0,
 		NonTerminal('not newline or hex digit'),
 		Sequence(
 			OneOrMore(NonTerminal('hex digit'), Comment('1-6 times')),
 			Optional(NonTerminal('whitespace'), 'skip')))));
 add('〈whitespace〉', Diagram(OneOrMore(NonTerminal('whitespace'))));
 add('〈ident〉', Diagram(
 	Choice(0, Skip(), '-'),
 	Choice(0, NonTerminal('a-z A-Z _ or non-ASCII'), NonTerminal('escape')),
 	ZeroOrMore(Choice(0,
 		NonTerminal('a-z A-Z 0-9 _ - or non-ASCII'), NonTerminal('escape')))));
 add('〈function〉', Diagram(
 	NonTerminal('〈ident〉'), '('));
 add('〈at-keyword〉', Diagram(
 	'@', NonTerminal('〈ident〉')));
 add('〈hash〉', Diagram(
 	'#', OneOrMore(Choice(0,
 		NonTerminal('a-z A-Z 0-9 _ - or non-ASCII'),
 		NonTerminal('escape')))));
 add('〈string〉', Diagram(
 	Choice(0,
 		Sequence(
 			'"',
 			ZeroOrMore(
 				Choice(0,
 					NonTerminal('not " \\ or newline'),
 					NonTerminal('escape'),
 					Sequence('\\', NonTerminal('newline')))),
 			'"'),
 		Sequence(
 			'\'',
 			ZeroOrMore(
 				Choice(0,
 					NonTerminal("not ' \\ or newline"),
 					NonTerminal('escape'),
 					Sequence('\\', NonTerminal('newline')))),
 			'\''))));
 add('〈url〉', Diagram(
 	NonTerminal('〈ident "url"〉'),
 	'(',
 	Optional(NonTerminal('〈whitespace〉'), 'skip'),
 	Optional(Sequence(
 		Choice(0, NonTerminal('url-unquoted'), NonTerminal('STRING')),
 		Optional(NonTerminal('〈whitespace〉'), 'skip'))),
 	')'));
 add('url-unquoted', Diagram(OneOrMore(
 	Choice(0,
 		NonTerminal('not " \' ( ) \\ whitespace or non-printable'),
 		NonTerminal('escape')))));
 add('〈number〉', Diagram(
 	Choice(1, '+', Skip(), '-'),
 	Choice(0,
 		Sequence(
 			OneOrMore(NonTerminal('digit')),
 			'.',
 			OneOrMore(NonTerminal('digit'))),
 		OneOrMore(NonTerminal('digit')),
 		Sequence(
 			'.',
 			OneOrMore(NonTerminal('digit')))),
 	Choice(0,
 		Skip(),
 		Sequence(
 			Choice(0, 'e', 'E'),
 			Choice(1, '+', Skip(), '-'),
 			OneOrMore(NonTerminal('digit'))))));
 add('〈dimension〉', Diagram(
 	NonTerminal('〈number〉'), NonTerminal('〈ident〉')));
 add('〈percentage〉', Diagram(
 	NonTerminal('〈number〉'), '%'));
 add('〈unicode-range〉', Diagram(
 	Choice(0,
 		'U',
 		'u'),
 	'+',
 	Sequence(OneOrMore(Choice(0, NonTerminal('hex digit'), '?'), Comment('1-6 times'))),
 	Optional(Sequence(
 		'-',
 		OneOrMore(NonTerminal('hex digit'), Comment('1-6 times'))))));
 add('〈include-match〉', Diagram('~='));
 add('〈dash-match〉', Diagram('|='));
 add('〈prefix-match〉', Diagram('^='));
 add('〈suffix-match〉', Diagram('$='));
 add('〈substring-match〉', Diagram('*='));
 add('〈column〉', Diagram('||'));
 add('〈CDO〉', Diagram('<' + '!--'));
 add('〈CDC〉', Diagram('-' + '->'));
 document.getElementsByTagName('textarea')[0].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;');
 preview = document.getElementsByTagName('dl')[1];
 // Tree items:
 var NT = NonTerminal
 add('Stylesheet', Diagram(ZeroOrMore(Choice(3,
 	NT('〈CDO〉'), NT('〈CDC〉'), NT('〈whitespace〉'),
 	NT('Qualified rule'), NT('At-rule')))));
 add('Rule list', Diagram(ZeroOrMore(Choice(1,
 	NT('〈whitespace〉'), NT('Qualified rule'), NT('At-rule')))));
 add('At-rule', Diagram(
 	NT('〈at-keyword〉'), ZeroOrMore(NT('Component value')),
 	Choice(0, NT('{} block'), ';')));
 add('Qualified rule', Diagram(
 	ZeroOrMore(NT('Component value')),
 	NT('{} block')));
 add('Declaration list', Diagram(
 	NT('ws*'),
 	Choice(0,
 		Sequence(
 			Optional(NT('Declaration')),
 			Optional(Sequence(';', NT('Declaration list')))),
 		Sequence(
 			NT('At-rule'),
 			NT('Declaration list')))));
 add('Declaration', Diagram(
 	NT('〈ident〉'), NT('ws*'), ':',
 	ZeroOrMore(NT('Component value')), Optional(NT('!important'))));
 add('!important', Diagram(
 	'!', NT('ws*'), NT('〈ident "important"〉'), NT('ws*')));
 add('ws*', Diagram(ZeroOrMore(NT('〈whitespace〉'))));
 add('Component value', Diagram(Choice(0,
 	NT('Preserved token'),
 	NT('{} block'),
 	NT('() block'),
 	NT('[] block'),
 	NT('Function block'))));
 add('{} block', Diagram('{', ZeroOrMore(NT('Component value')), '}'));
 add('() block', Diagram('(', ZeroOrMore(NT('Component value')), ')'));
 add('[] block', Diagram('[', ZeroOrMore(NT('Component value')), ']'));
 add('Function block', Diagram(
 	NT('〈function〉'),
 	ZeroOrMore(NT('Component value')),
 	')'));
 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>

Mercurial > drafts / annotate

css-syntax/Diagrams.src.html@dec8752a6390 (annotated)

css-syntax/Diagrams.src.html