blob: bbbbad0a15084dd4792d489897a7241a79547f6a [file] [log] [blame]
terry@google.com64784aa12011-11-22 17:30:20 +00001// Copyright (c) 2011, the Dart project authors. Please see the AUTHORS file
2// for details. All rights reserved. Use of this source code is governed by a
3// BSD-style license that can be found in the LICENSE file.
4
gram@google.com58a01662012-11-08 17:42:40 +00005import 'dart:html';
6import 'css.dart';
7import '../lib/file_system_memory.dart';
terry@google.com64784aa12011-11-22 17:30:20 +00008
9void runCss([bool debug = false, bool parseOnly = false]) {
terry@google.com007ac932012-01-12 22:17:33 +000010 final Document doc = window.document;
11 final TextAreaElement classes = doc.query("#classes");
12 final TextAreaElement expression = doc.query('#expression');
13 final TableCellElement validity = doc.query('#validity');
14 final TableCellElement result = doc.query('#result');
terry@google.com64784aa12011-11-22 17:30:20 +000015
16 List<String> knownWorld = classes.value.split("\n");
17 List<String> knownClasses = [];
18 List<String> knownIds = [];
terry@google.com9a40e872012-01-10 15:28:53 +000019 for (final name in knownWorld) {
terry@google.com64784aa12011-11-22 17:30:20 +000020 if (name.startsWith('.')) {
21 knownClasses.add(name.substring(1));
22 } else if (name.startsWith('#')) {
23 knownIds.add(name.substring(1));
24 }
25 }
26
27 CssWorld cssWorld = new CssWorld(knownClasses, knownIds);
28 bool templateValid = true;
29 String dumpTree = "";
30
31 String cssExpr = expression.value;
32 if (!debug) {
33 try {
34 cssParseAndValidate(cssExpr, cssWorld);
kasperl@google.com72e668592012-08-29 11:58:58 +000035 } catch (cssException) {
terry@google.com64784aa12011-11-22 17:30:20 +000036 templateValid = false;
37 dumpTree = cssException.toString();
38 }
39 } else if (parseOnly) {
40 try {
terry@google.com91dd6282012-03-15 21:19:54 +000041 Parser parser = new Parser(new SourceFile(
42 SourceFile.IN_MEMORY_FILE, cssExpr));
terry@google.com59a6cf92011-12-20 22:51:16 +000043 Stylesheet stylesheet = parser.parse();
44 StringBuffer stylesheetTree = new StringBuffer();
45 String prettyStylesheet = stylesheet.toString();
floitsch@google.comdd48256f2013-03-08 13:07:18 +000046 stylesheetTree.write("${prettyStylesheet}\n");
47 stylesheetTree.write("\n============>Tree Dump<============\n");
48 stylesheetTree.write(stylesheet.toDebugString());
terry@google.com59a6cf92011-12-20 22:51:16 +000049 dumpTree = stylesheetTree.toString();
kasperl@google.com72e668592012-08-29 11:58:58 +000050 } catch (cssParseException) {
terry@google.com64784aa12011-11-22 17:30:20 +000051 templateValid = false;
52 dumpTree = cssParseException.toString();
53 }
54 } else {
55 try {
56 dumpTree = cssParseAndValidateDebug(cssExpr, cssWorld);
kasperl@google.com72e668592012-08-29 11:58:58 +000057 } catch (cssException) {
terry@google.com64784aa12011-11-22 17:30:20 +000058 templateValid = false;
59 dumpTree = cssException.toString();
60 }
61 }
62
terry@google.com007ac932012-01-12 22:17:33 +000063 final bgcolor = templateValid ? "white" : "red";
64 final color = templateValid ? "black" : "white";
65 final valid = templateValid ? "VALID" : "NOT VALID";
terry@google.com91dd6282012-03-15 21:19:54 +000066 String resultStyle = "resize:none; margin:0; height:100%; width:100%;"
67 "padding:5px 7px;";
68 String validityStyle = "font-weight:bold; background-color:$bgcolor;"
69 "color:$color; border:1px solid black; border-bottom:0px solid white;";
terry@google.com007ac932012-01-12 22:17:33 +000070 validity.innerHTML = '''
71 <div style="$validityStyle">
terry@google.com64784aa12011-11-22 17:30:20 +000072 Expression: $cssExpr is $valid
73 </div>
terry@google.com007ac932012-01-12 22:17:33 +000074 ''';
terry@google.com91dd6282012-03-15 21:19:54 +000075 result.innerHTML = "<textarea style=\"$resultStyle\">$dumpTree</textarea>";
terry@google.com64784aa12011-11-22 17:30:20 +000076}
77
78void main() {
terry@google.com007ac932012-01-12 22:17:33 +000079 final element = new Element.tag('div');
terry@google.com64784aa12011-11-22 17:30:20 +000080 element.innerHTML = '''
terry@google.com007ac932012-01-12 22:17:33 +000081 <table style="width: 100%; height: 100%;">
82 <tbody>
83 <tr>
84 <td style="vertical-align: top; width: 200px;">
85 <table style="height: 100%;">
86 <tbody>
87 <tr style="vertical-align: top; height: 1em;">
88 <td>
89 <span style="font-weight:bold;">Classes</span>
90 </td>
91 </tr>
92 <tr style="vertical-align: top;">
93 <td>
94 <textarea id="classes" style="resize: none; width: 200px; height: 100%; padding: 5px 7px;">.foobar\n.xyzzy\n.test\n.dummy\n#myId\n#myStory</textarea>
95 </td>
96 </tr>
97 </tbody>
98 </table>
99 </td>
100 <td>
101 <table style="width: 100%; height: 100%;" cellspacing=0 cellpadding=0 border=0>
102 <tbody>
103 <tr style="vertical-align: top; height: 100px;">
104 <td>
105 <table style="width: 100%;">
106 <tbody>
107 <tr>
108 <td>
109 <span style="font-weight:bold;">Selector Expression</span>
110 </td>
111 </tr>
112 <tr>
113 <td>
114 <textarea id="expression" style="resize: none; width: 100%; height: 100px; padding: 5px 7px;"></textarea>
115 </td>
116 </tr>
117 </tbody>
118 </table>
119 </td>
120 </tr>
121
122 <tr style="vertical-align: top; height: 50px;">
123 <td>
124 <table>
125 <tbody>
126 <tr>
127 <td>
terry@google.com91dd6282012-03-15 21:19:54 +0000128 <button id=parse>Parse</button>
terry@google.com007ac932012-01-12 22:17:33 +0000129 </td>
130 <td>
terry@google.com91dd6282012-03-15 21:19:54 +0000131 <button id=check>Check</button>
terry@google.com007ac932012-01-12 22:17:33 +0000132 </td>
133 <td>
terry@google.com91dd6282012-03-15 21:19:54 +0000134 <button id=debug>Debug</button>
terry@google.com007ac932012-01-12 22:17:33 +0000135 </td>
136 </tr>
137 </tbody>
138 </table>
139 </td>
140 </tr>
141
142 <tr style="vertical-align: top;">
143 <td>
144 <table style="width: 100%; height: 100%;" border="0" cellpadding="0" cellspacing="0">
145 <tbody>
146 <tr style="vertical-align: top; height: 1em;">
147 <td>
148 <span style="font-weight:bold;">Result</span>
149 </td>
150 </tr>
151 <tr style="vertical-align: top; height: 1em;">
152 <td id="validity">
153 </td>
154 </tr>
155 <tr style="vertical-align: top;">
156 <td id="result">
157 <textarea style="resize: none; width: 100%; height: 100%; border: black solid 1px; padding: 5px 7px;"></textarea>
158 </td>
159 </tr>
160 </tbody>
161 </table>
162 </td>
163 </tr>
164 </tbody>
165 </table>
166 </td>
167 </tr>
168 </tbody>
169 </table>
terry@google.com64784aa12011-11-22 17:30:20 +0000170 ''';
171
terry@google.com007ac932012-01-12 22:17:33 +0000172 document.body.style.setProperty("background-color", "lightgray");
173 document.body.elements.add(element);
terry@google.com64784aa12011-11-22 17:30:20 +0000174
terry@google.com91dd6282012-03-15 21:19:54 +0000175 ButtonElement parseButton = window.document.query('#parse');
176 parseButton.on.click.add((MouseEvent e) {
177 runCss(true, true);
178 });
179
180 ButtonElement checkButton = window.document.query('#check');
181 checkButton.on.click.add((MouseEvent e) {
terry@google.com64784aa12011-11-22 17:30:20 +0000182 runCss();
terry@google.com91dd6282012-03-15 21:19:54 +0000183 });
184
185 ButtonElement debugButton = window.document.query('#debug');
186 debugButton.on.click.add((MouseEvent e) {
187 runCss(true);
188 });
terry@google.com64784aa12011-11-22 17:30:20 +0000189
terry@google.com59a6cf92011-12-20 22:51:16 +0000190 initCssWorld(false);
terry@google.com64784aa12011-11-22 17:30:20 +0000191}