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

     1 <!doctype html>

     2 <meta charset=utf-8>

     3 <title>JavaScript source for the railroad diagrams (CSS3 Syntax)</title>

     4 <link rel=stylesheet href=railroad-diagrams.css>

     5 <script src=railroad-diagrams.js></script>

     7 <h1>Railroad diagrams for CSS Syntax Level 3</h1>

     8 	<p>This file contains the JavaScript “source” of the diagrams.

     9 	   The library converting them into SVG is maintained

    10 	   <a href="https://github.com/tabatkins/railroad-diagrams">on GitHub</a>.

    11 	   The <code>update-diagram-lib.sh</code> script can be used to get the

    12 	   latest version of the library.

    13 	</p>

    14 	<p>

    15 	   The intent is that edits are done in this file for easy preview.

    16 	   When the diagrams give satisfaction, the <a href="#markup">markup</a>

    17 	   can be copied and pasted into <code>Overview.src.html</code>.

    18 	</p>

    20 <h2>Preview</h2>

    21 <h3 id=tokens>Tokens</h3>

    22 	<dl>

    23 	</dl>

    24 <h3 id=parsing>Parsing</h3>

    25 	<p>All comments are ignored.</p>

    26 	<dl>

    27 	</dl>

    30 <h2 id=markup>Markup</h2>

    31 <h3>Tokens</h3>

    32 	<textarea style="box-sizing: border-box; width: 100%; height: 20em">

    33 	</textarea>

    34 <h3>Parsing</h3>

    35 	<textarea style="box-sizing: border-box; width: 100%; height: 20em">

    36 	</textarea>

    38 <script>

    39 var preview = document.getElementsByTagName('dl')[0];

    41 function add(name, diagram) {

    42 	var dt = document.createElement('dt'),

    43 		dd = document.createElement('dd');

    44 	dt.textContent = name;

    45 	name = name.toLowerCase().replace(/[\/ ]/g, '-').replace(/[*!]/g, '');

    46 	dt.setAttribute('id', name + '-diagram');

    47 	dd.appendChild(diagram.toSVG());

    48 	preview.appendChild(document.createTextNode('\t'));

    49 	preview.appendChild(dt);

    50 	preview.appendChild(document.createTextNode('\n\t\t'));

    51 	preview.appendChild(dd);

    52 	preview.appendChild(document.createTextNode('\n\n\t'));

    53 }

    55 add('comment', Diagram(

    56 	'/*',

    57 	ZeroOrMore(

    58 		NonTerminal('anything but * followed by /')),

    59 	'*/'));

    61 add('newline', Diagram(Choice(0, '\\n', '\\r\\n', '\\r', '\\f')));

    63 add('whitespace', Diagram(Choice(

    64 	0, 'space', '\\t', NonTerminal('newline'))));

    66 add('hex digit', Diagram(NonTerminal('0-9 a-f or A-F')));

    68 add('escape', Diagram(

    69 	'\\', Choice(0,

    70 		NonTerminal('not newline or hex digit'),

    71 		Sequence(

    72 			OneOrMore(NonTerminal('hex digit'), Comment('1-6 times')),

    73 			Optional(NonTerminal('whitespace'), 'skip')))));

    75 add('〈whitespace〉', Diagram(OneOrMore(NonTerminal('whitespace'))));

    77 add('〈ident〉', Diagram(

    78 	Choice(0, Skip(), '-'),

    79 	Choice(0, NonTerminal('a-z A-Z _ or non-ASCII'), NonTerminal('escape')),

    80 	ZeroOrMore(Choice(0,

    81 		NonTerminal('a-z A-Z 0-9 _ - or non-ASCII'), NonTerminal('escape')))));

    83 add('〈function〉', Diagram(

    84 	NonTerminal('〈ident〉'), '('));

    86 add('〈at-keyword〉', Diagram(

    87 	'@', NonTerminal('〈ident〉')));

    89 add('〈hash〉', Diagram(

    90 	'#', OneOrMore(Choice(0,

    91 		NonTerminal('a-z A-Z 0-9 _ - or non-ASCII'),

    92 		NonTerminal('escape')))));

    94 add('〈string〉', Diagram(

    95 	Choice(0,

    96 		Sequence(

    97 			'"',

    98 			ZeroOrMore(

    99 				Choice(0,

   100 					NonTerminal('not " \\ or newline'),

   101 					NonTerminal('escape'),

   102 					Sequence('\\', NonTerminal('newline')))),

   103 			'"'),

   104 		Sequence(

   105 			'\'',

   106 			ZeroOrMore(

   107 				Choice(0,

   108 					NonTerminal("not ' \\ or newline"),

   109 					NonTerminal('escape'),

   110 					Sequence('\\', NonTerminal('newline')))),

   111 			'\''))));

   113 add('〈url〉', Diagram(

   114 	NonTerminal('〈ident "url"〉'),

   115 	'(',

   116 	Optional(NonTerminal('〈whitespace〉'), 'skip'),

   117 	Optional(Sequence(

   118 		Choice(0, NonTerminal('url-unquoted'), NonTerminal('STRING')),

   119 		Optional(NonTerminal('〈whitespace〉'), 'skip'))),

   120 	')'));

   122 add('url-unquoted', Diagram(OneOrMore(

   123 	Choice(0,

   124 		NonTerminal('not " \' ( ) \\ whitespace or non-printable'),

   125 		NonTerminal('escape')))));

   127 add('〈number〉', Diagram(

   128 	Choice(1, '+', Skip(), '-'),

   129 	Choice(0,

   130 		Sequence(

   131 			OneOrMore(NonTerminal('digit')),

   132 			'.',

   133 			OneOrMore(NonTerminal('digit'))),

   134 		OneOrMore(NonTerminal('digit')),

   135 		Sequence(

   136 			'.',

   137 			OneOrMore(NonTerminal('digit')))),

   138 	Choice(0,

   139 		Skip(),

   140 		Sequence(

   141 			Choice(0, 'e', 'E'),

   142 			Choice(1, '+', Skip(), '-'),

   143 			OneOrMore(NonTerminal('digit'))))));

   145 add('〈dimension〉', Diagram(

   146 	NonTerminal('〈number〉'), NonTerminal('〈ident〉')));

   148 add('〈percentage〉', Diagram(

   149 	NonTerminal('〈number〉'), '%'));

   151 add('〈unicode-range〉', Diagram(

   152 	Choice(0,

   153 		'U',

   154 		'u'),

   155 	'+',

   156 	Sequence(OneOrMore(Choice(0, NonTerminal('hex digit'), '?'), Comment('1-6 times'))),

   157 	Optional(Sequence(

   158 		'-',

   159 		OneOrMore(NonTerminal('hex digit'), Comment('1-6 times'))))));

   161 add('〈include-match〉', Diagram('~='));

   163 add('〈dash-match〉', Diagram('|='));

   165 add('〈prefix-match〉', Diagram('^='));

   167 add('〈suffix-match〉', Diagram('$='));

   169 add('〈substring-match〉', Diagram('*='));

   171 add('〈column〉', Diagram('||'));

   173 add('〈CDO〉', Diagram('<' + '!--'));

   175 add('〈CDC〉', Diagram('-' + '->'));

   178 document.getElementsByTagName('textarea')[0].value = '\t' + preview.outerHTML

   179 	// XXX work around a bug/limitation in the spec pre-processor.

   180 	// Single quotes have a special meaning there.

   181 	.replace(/'/g, '&apos;');

   183 preview = document.getElementsByTagName('dl')[1];

   185 // Tree items:

   187 var NT = NonTerminal

   189 add('Stylesheet', Diagram(ZeroOrMore(Choice(3,

   190 	NT('〈CDO〉'), NT('〈CDC〉'), NT('〈whitespace〉'),

   191 	NT('Qualified rule'), NT('At-rule')))));

   193 add('Rule list', Diagram(ZeroOrMore(Choice(1,

   194 	NT('〈whitespace〉'), NT('Qualified rule'), NT('At-rule')))));

   196 add('At-rule', Diagram(

   197 	NT('〈at-keyword〉'), ZeroOrMore(NT('Component value')),

   198 	Choice(0, NT('{} block'), ';')));

   200 add('Qualified rule', Diagram(

   201 	ZeroOrMore(NT('Component value')),

   202 	NT('{} block')));

   204 add('Declaration list', Diagram(

   205 	NT('ws*'),

   206 	Choice(0,

   207 		Sequence(

   208 			Optional(NT('Declaration')),

   209 			Optional(Sequence(';', NT('Declaration list')))),

   210 		Sequence(

   211 			NT('At-rule'),

   212 			NT('Declaration list')))));

   214 add('Declaration', Diagram(

   215 	NT('〈ident〉'), NT('ws*'), ':',

   216 	ZeroOrMore(NT('Component value')), Optional(NT('!important'))));

   218 add('!important', Diagram(

   219 	'!', NT('ws*'), NT('〈ident "important"〉'), NT('ws*')));

   221 add('ws*', Diagram(ZeroOrMore(NT('〈whitespace〉'))));

   223 add('Component value', Diagram(Choice(0,

   224 	NT('Preserved token'),

   225 	NT('{} block'),

   226 	NT('() block'),

   227 	NT('[] block'),

   228 	NT('Function block'))));

   231 add('{} block', Diagram('{', ZeroOrMore(NT('Component value')), '}'));

   232 add('() block', Diagram('(', ZeroOrMore(NT('Component value')), ')'));

   233 add('[] block', Diagram('[', ZeroOrMore(NT('Component value')), ']'));

   235 add('Function block', Diagram(

   236 	NT('〈function〉'),

   237 	ZeroOrMore(NT('Component value')),

   238 	')'));

   241 document.getElementsByTagName('textarea')[1].value = '\t' + preview.outerHTML

   242 	// XXX work around a bug/limitation in the spec pre-processor.

   243 	// Single quotes have a special meaning there.

   244 	.replace(/'/g, '&apos;');

   246 </script>

Mercurial > drafts / file revision