Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(175)

Side by Side Diff: pkg/polymer/test/css_test.dart

Issue 23224003: move polymer.dart into dart svn (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: add --deploy to todomvc sample Created 7 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « pkg/polymer/test/compiler_test.dart ('k') | pkg/polymer/test/data/unit/event_path_test.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 // Copyright (c) 2013, 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
5 library css_test;
6
7 import 'package:unittest/compact_vm_config.dart';
8 import 'package:unittest/unittest.dart';
9 import 'package:polymer/src/messages.dart';
10
11 import 'testing.dart';
12
13 test_simple_var() {
14 Map createFiles() {
15 return {
16 'index.html':
17 '<!DOCTYPE html>'
18 '<html lang="en">'
19 '<head>'
20 '<meta charset="utf-8">'
21 '</head>'
22 '<body>'
23 '<style>'
24 '@main_color: var(b);'
25 '@b: var(c);'
26 '@c: red;'
27 '</style>'
28 '<style>'
29 '.test { color: var(main_color); }'
30 '</style>'
31 '<script type="application/dart">main() {}</script>'
32 '</body>'
33 '</html>',
34 };
35 }
36
37 var messages = new Messages.silent();
38 var compiler = createCompiler(createFiles(), messages, errors: true,
39 scopedCss: true);
40
41 compiler.run().then(expectAsync1((e) {
42 MockFileSystem fs = compiler.fileSystem;
43 expect(fs.readCount, equals({
44 'index.html': 1,
45 }), reason: 'Actual:\n ${fs.readCount}');
46
47 var htmlInfo = compiler.info['index.html'];
48 expect(htmlInfo.styleSheets.length, 2);
49 expect(prettyPrintCss(htmlInfo.styleSheets[0]), '');
50 expect(prettyPrintCss(htmlInfo.styleSheets[1]), '.test { color: red; }');
51
52 var outputs = compiler.output.map((o) => o.path);
53 expect(outputs, equals([
54 'out/index.html.dart',
55 'out/index.html.dart.map',
56 'out/index.html_bootstrap.dart',
57 'out/index.html',
58 ]));
59 }));
60 }
61
62 test_var() {
63 Map createFiles() {
64 return {
65 'index.html':
66 '<!DOCTYPE html>'
67 '<html lang="en">'
68 '<head>'
69 '<meta charset="utf-8">'
70 '</head>'
71 '<body>'
72 '<style>'
73 '@main-color: var(b);'
74 '@b: var(c);'
75 '@c: red;'
76 '@d: var(main-color-1, green);'
77 '@border-pen: solid;'
78 '@inset: 5px;'
79 '@frame-color: solid orange;'
80 '@big-border: 2px 2px 2px;'
81 '@border-stuff: 3px dashed var(main-color);'
82 '@border-2: 3px var(big-border) dashed var(main-color-1, green);'
83 '@blue-border: bold var(not-found, 1px 10px blue)'
84 '</style>'
85 '<style>'
86 '.test-1 { color: var(main-color-1, blue); }'
87 '.test-2 { color: var(main-color-1, var(main-color)); }'
88 '.test-3 { color: var(d, yellow); }'
89 '.test-4 { color: var(d-1, yellow); }'
90 '.test-5 { color: var(d-1, var(d)); }'
91 '.test-6 { border: var(inset) var(border-pen) var(d); }'
92 '.test-7 { border: 10px var(border-pen) var(d); }'
93 '.test-8 { border: 20px var(border-pen) yellow; }'
94 '.test-9 { border: 30px dashed var(d); }'
95 '.test-10 { border: 40px var(frame-color);}'
96 '.test-11 { border: 40px var(frame-color-1, blue);}'
97 '.test-12 { border: 40px var(frame-color-1, solid blue);}'
98 '.test-13 {'
99 'border: 40px var(x1, var(x2, var(x3, var(frame-color)));'
100 '}'
101 '.test-14 { border: 40px var(x1, var(frame-color); }'
102 '.test-15 { border: 40px var(x1, solid blue);}'
103 '.test-16 { border: 1px 1px 2px 3px var(frame-color);}'
104 '.test-17 { border: 1px 1px 2px 3px var(x1, solid blue);}'
105 '.test-18 { border: 1px 1px 2px var(border-stuff);}'
106 '.test-19 { border: var(big-border) var(border-stuff);}'
107 '.test-20 { border: var(border-2);}'
108 '.test-21 { border: var(blue-border);}'
109 '</style>'
110 '<script type="application/dart">main() {}</script>'
111 '</body>'
112 '</html>',
113 };
114 }
115
116 var messages = new Messages.silent();
117 var compiler = createCompiler(createFiles(), messages, errors: true,
118 scopedCss: true);
119
120 compiler.run().then(expectAsync1((e) {
121 MockFileSystem fs = compiler.fileSystem;
122 expect(fs.readCount, equals({
123 'index.html': 1,
124 }), reason: 'Actual:\n ${fs.readCount}');
125
126 var htmlInfo = compiler.info['index.html'];
127 expect(htmlInfo.styleSheets.length, 2);
128 expect(prettyPrintCss(htmlInfo.styleSheets[0]), '');
129 expect(prettyPrintCss(htmlInfo.styleSheets[1]),
130 '.test-1 { color: blue; } '
131 '.test-2 { color: red; } '
132 '.test-3 { color: green; } '
133 '.test-4 { color: yellow; } '
134 '.test-5 { color: green; } '
135 '.test-6 { border: 5px solid green; } '
136 '.test-7 { border: 10px solid green; } '
137 '.test-8 { border: 20px solid yellow; } '
138 '.test-9 { border: 30px dashed green; } '
139 '.test-10 { border: 40px solid orange; } '
140 '.test-11 { border: 40px blue; } '
141 '.test-12 { border: 40px solid blue; } '
142 '.test-13 { border: 40px solid orange; } '
143 '.test-14 { border: 40px solid orange; } '
144 '.test-15 { border: 40px solid blue; } '
145 '.test-16 { border: 1px 1px 2px 3px solid orange; } '
146 '.test-17 { border: 1px 1px 2px 3px solid blue; } '
147 '.test-18 { border: 1px 1px 2px 3px dashed red; } '
148 '.test-19 { border: 2px 2px 2px 3px dashed red; } '
149 '.test-20 { border: 3px 2px 2px 2px dashed green; } '
150 '.test-21 { border: bold 1px 10px blue; }');
151 var outputs = compiler.output.map((o) => o.path);
152 expect(outputs, equals([
153 'out/index.html.dart',
154 'out/index.html.dart.map',
155 'out/index.html_bootstrap.dart',
156 'out/index.html',
157 ]));
158 }));
159 }
160
161 test_simple_import() {
162 Map createFiles() {
163 return {
164 'foo.css': r'''@main_color: var(b);
165 @b: var(c);
166 @c: red;''',
167 'index.html':
168 '<!DOCTYPE html>'
169 '<html lang="en">'
170 '<head>'
171 '<meta charset="utf-8">'
172 '</head>'
173 '<body>'
174 '<style>'
175 '@import "foo.css";'
176 '.test { color: var(main_color); }'
177 '</style>'
178 '<script type="application/dart">main() {}</script>'
179 '</body>'
180 '</html>',
181 };
182 }
183
184 var messages = new Messages.silent();
185 var compiler = createCompiler(createFiles(), messages, errors: true,
186 scopedCss: true);
187
188 compiler.run().then(expectAsync1((e) {
189 MockFileSystem fs = compiler.fileSystem;
190 expect(fs.readCount, equals({
191 'foo.css': 1,
192 'index.html': 1,
193 }), reason: 'Actual:\n ${fs.readCount}');
194
195 var cssInfo = compiler.info['foo.css'];
196 expect(cssInfo.styleSheets.length, 1);
197 expect(prettyPrintCss(cssInfo.styleSheets[0]), '');
198
199 var htmlInfo = compiler.info['index.html'];
200 expect(htmlInfo.styleSheets.length, 1);
201 expect(prettyPrintCss(htmlInfo.styleSheets[0]),
202 '@import url(foo.css); .test { color: red; }');
203
204 var outputs = compiler.output.map((o) => o.path);
205 expect(outputs, equals([
206 'out/index.html.dart',
207 'out/index.html.dart.map',
208 'out/index.html_bootstrap.dart',
209 'out/foo.css',
210 'out/index.html',
211 ]));
212 }));
213 }
214
215 test_imports() {
216 Map createFiles() {
217 return {
218 'first.css':
219 '@import "third.css";'
220 '@main-width: var(main-width-b);'
221 '@main-width-b: var(main-width-c);'
222 '@main-width-c: var(wide-width);',
223 'second.css':
224 '@import "fourth.css";'
225 '@main-color: var(main-color-b);'
226 '@main-color-b: var(main-color-c);'
227 '@main-color-c: var(color-value);',
228 'third.css':
229 '@wide-width: var(wide-width-b);'
230 '@wide-width-b: var(wide-width-c);'
231 '@wide-width-c: 100px;',
232 'fourth.css':
233 '@color-value: var(color-value-b);'
234 '@color-value-b: var(color-value-c);'
235 '@color-value-c: red;',
236 'index.html':
237 '<!DOCTYPE html>'
238 '<html lang="en">'
239 '<head>'
240 '<meta charset="utf-8">'
241 '<link rel="stylesheet" href="first.css">'
242 '</head>'
243 '<body>'
244 '<style>'
245 '@import "first.css";'
246 '@import "second.css";'
247 '.test-1 { color: var(main-color); }'
248 '.test-2 { width: var(main-width); }'
249 '</style>'
250 '<script type="application/dart">main() {}</script>'
251 '</body>'
252 '</html>',
253 };
254 }
255
256 var messages = new Messages.silent();
257 var compiler = createCompiler(createFiles(), messages, errors: true,
258 scopedCss: true);
259
260 compiler.run().then(expectAsync1((e) {
261 MockFileSystem fs = compiler.fileSystem;
262 expect(fs.readCount, equals({
263 'first.css': 1,
264 'second.css': 1,
265 'third.css': 1,
266 'fourth.css': 1,
267 'index.html': 1,
268 }), reason: 'Actual:\n ${fs.readCount}');
269
270 var firstInfo = compiler.info['first.css'];
271 expect(firstInfo.styleSheets.length, 1);
272 expect(prettyPrintCss(firstInfo.styleSheets[0]), '@import url(third.css);');
273
274 var secondInfo = compiler.info['second.css'];
275 expect(secondInfo.styleSheets.length, 1);
276 expect(prettyPrintCss(secondInfo.styleSheets[0]),
277 '@import url(fourth.css);');
278
279 var thirdInfo = compiler.info['third.css'];
280 expect(thirdInfo.styleSheets.length, 1);
281 expect(prettyPrintCss(thirdInfo.styleSheets[0]), '');
282
283 var fourthInfo = compiler.info['fourth.css'];
284 expect(fourthInfo.styleSheets.length, 1);
285 expect(prettyPrintCss(fourthInfo.styleSheets[0]), '');
286
287 var htmlInfo = compiler.info['index.html'];
288 expect(htmlInfo.styleSheets.length, 1);
289 expect(prettyPrintCss(htmlInfo.styleSheets[0]),
290 '@import url(first.css); '
291 '@import url(second.css); '
292 '.test-1 { color: red; } '
293 '.test-2 { width: 100px; }');
294
295 var outputs = compiler.output.map((o) => o.path);
296 expect(outputs, equals([
297 'out/index.html.dart',
298 'out/index.html.dart.map',
299 'out/index.html_bootstrap.dart',
300 'out/first.css',
301 'out/second.css',
302 'out/third.css',
303 'out/fourth.css',
304 'out/index.html',
305 ]));
306 }));
307 }
308
309 test_component_var() {
310 Map createFiles() {
311 return {
312 'index.html': '<!DOCTYPE html>'
313 '<html lang="en">'
314 '<head>'
315 '<meta charset="utf-8">'
316 '<link rel="import" href="foo.html">'
317 '</head>'
318 '<body>'
319 '<x-foo></x-foo>'
320 '<script type="application/dart">main() {}</script>'
321 '</body>'
322 '</html>',
323 'foo.html': '<!DOCTYPE html>'
324 '<html lang="en">'
325 '<head>'
326 '<meta charset="utf-8">'
327 '</head>'
328 '<body>'
329 '<polymer-element name="x-foo" constructor="Foo">'
330 '<template>'
331 '<style scoped>'
332 '@import "foo.css";'
333 '.main { color: var(main_color); }'
334 '.test-background { '
335 'background: url(http://www.foo.com/bar.png);'
336 '}'
337 '</style>'
338 '</template>'
339 '</polymer-element>'
340 '</body>'
341 '</html>',
342 'foo.css': r'''@main_color: var(b);
343 @b: var(c);
344 @c: red;
345
346 @one: var(two);
347 @two: var(one);
348
349 @four: var(five);
350 @five: var(six);
351 @six: var(four);
352
353 @def-1: var(def-2);
354 @def-2: var(def-3);
355 @def-3: var(def-2);''',
356 };
357 }
358
359 test('var- and Less @define', () {
360 var messages = new Messages.silent();
361 var compiler = createCompiler(createFiles(), messages, errors: true,
362 scopedCss: true);
363
364 compiler.run().then(expectAsync1((e) {
365 MockFileSystem fs = compiler.fileSystem;
366 expect(fs.readCount, equals({
367 'index.html': 1,
368 'foo.html': 1,
369 'foo.css': 1
370 }), reason: 'Actual:\n ${fs.readCount}');
371
372 var cssInfo = compiler.info['foo.css'];
373 expect(cssInfo.styleSheets.length, 1);
374 var htmlInfo = compiler.info['foo.html'];
375 expect(htmlInfo.styleSheets.length, 0);
376 expect(htmlInfo.declaredComponents.length, 1);
377 expect(htmlInfo.declaredComponents[0].styleSheets.length, 1);
378
379 var outputs = compiler.output.map((o) => o.path);
380 expect(outputs, equals([
381 'out/foo.html.dart',
382 'out/foo.html.dart.map',
383 'out/index.html.dart',
384 'out/index.html.dart.map',
385 'out/index.html_bootstrap.dart',
386 'out/foo.css',
387 'out/index.html.css',
388 'out/index.html',
389 ]));
390
391 for (var file in compiler.output) {
392 if (file.path == 'out/index.html.css') {
393 expect(file.contents,
394 '/* Auto-generated from components style tags. */\n'
395 '/* DO NOT EDIT. */\n\n'
396 '/* ==================================================== \n'
397 ' Component x-foo stylesheet \n'
398 ' ==================================================== */\n'
399 '@import "foo.css";\n'
400 '[is="x-foo"] .main {\n'
401 ' color: #f00;\n'
402 '}\n'
403 '[is="x-foo"] .test-background {\n'
404 ' background: url("http://www.foo.com/bar.png");\n'
405 '}\n\n');
406 } else if (file.path == 'out/foo.css') {
407 expect(file.contents,
408 '/* Auto-generated from style sheet href = foo.css */\n'
409 '/* DO NOT EDIT. */\n\n\n\n');
410 }
411 }
412
413 // Check for warning messages about var- cycles.
414 expect(messages.messages.length, 8);
415
416 var errorMessage = messages.messages[0];
417 expect(errorMessage.message, contains('var cycle detected var-def-1'));
418 expect(errorMessage.span, isNotNull);
419 expect(errorMessage.span.start.line, 11);
420 expect(errorMessage.span.start.column, 22);
421 expect(errorMessage.span.text, '@def-1: var(def-2)');
422
423 errorMessage = messages.messages[1];
424 expect(errorMessage.message, contains('var cycle detected var-five'));
425 expect(errorMessage.span, isNotNull);
426 expect(errorMessage.span.start.line, 8);
427 expect(errorMessage.span.start.column, 22);
428 expect(errorMessage.span.text, '@five: var(six)');
429
430 errorMessage = messages.messages[2];
431 expect(errorMessage.message, contains('var cycle detected var-six'));
432 expect(errorMessage.span, isNotNull);
433 expect(errorMessage.span.start.line, 9);
434 expect(errorMessage.span.start.column, 22);
435 expect(errorMessage.span.text, '@six: var(four)');
436
437 errorMessage = messages.messages[3];
438 expect(errorMessage.message, contains('var cycle detected var-def-3'));
439 expect(errorMessage.span, isNotNull);
440 expect(errorMessage.span.start.line, 13);
441 expect(errorMessage.span.start.column, 22);
442 expect(errorMessage.span.text, '@def-3: var(def-2)');
443
444 errorMessage = messages.messages[4];
445 expect(errorMessage.message, contains('var cycle detected var-two'));
446 expect(errorMessage.span, isNotNull);
447 expect(errorMessage.span.start.line, 5);
448 expect(errorMessage.span.start.column, 22);
449 expect(errorMessage.span.text, '@two: var(one)');
450
451 errorMessage = messages.messages[5];
452 expect(errorMessage.message, contains('var cycle detected var-def-2'));
453 expect(errorMessage.span, isNotNull);
454 expect(errorMessage.span.start.line, 12);
455 expect(errorMessage.span.start.column, 22);
456 expect(errorMessage.span.text, '@def-2: var(def-3)');
457
458 errorMessage = messages.messages[6];
459 expect(errorMessage.message, contains('var cycle detected var-one'));
460 expect(errorMessage.span, isNotNull);
461 expect(errorMessage.span.start.line, 4);
462 expect(errorMessage.span.start.column, 22);
463 expect(errorMessage.span.text, '@one: var(two)');
464
465 errorMessage = messages.messages[7];
466 expect(errorMessage.message, contains('var cycle detected var-four'));
467 expect(errorMessage.span, isNotNull);
468 expect(errorMessage.span.start.line, 7);
469 expect(errorMessage.span.start.column, 22);
470 expect(errorMessage.span.text, '@four: var(five)');
471 }));
472 });
473 }
474
475 test_pseudo_element() {
476 var messages = new Messages.silent();
477 var compiler = createCompiler({
478 'index.html': '<head>'
479 '<link rel="import" href="foo.html">'
480 '<style>'
481 '.test::x-foo { background-color: red; }'
482 '.test::x-foo1 { color: blue; }'
483 '.test::x-foo2 { color: green; }'
484 '</style>'
485 '<body>'
486 '<x-foo class=test></x-foo>'
487 '<x-foo></x-foo>'
488 '<script type="application/dart">main() {}</script>',
489 'foo.html': '<head>'
490 '<body><polymer-element name="x-foo" constructor="Foo">'
491 '<template>'
492 '<div pseudo="x-foo">'
493 '<div>Test</div>'
494 '</div>'
495 '<div pseudo="x-foo1 x-foo2">'
496 '<div>Test</div>'
497 '</div>'
498 '</template>',
499 }, messages, scopedCss: true);
500
501 compiler.run().then(expectAsync1((e) {
502 MockFileSystem fs = compiler.fileSystem;
503 expect(fs.readCount, equals({
504 'index.html': 1,
505 'foo.html': 1,
506 }), reason: 'Actual:\n ${fs.readCount}');
507
508 var outputs = compiler.output.map((o) => o.path);
509 expect(outputs, equals([
510 'out/foo.html.dart',
511 'out/foo.html.dart.map',
512 'out/index.html.dart',
513 'out/index.html.dart.map',
514 'out/index.html_bootstrap.dart',
515 'out/index.html',
516 ]));
517 expect(compiler.output.last.contents, contains(
518 '<div pseudo="x-foo_0">'
519 '<div>Test</div>'
520 '</div>'
521 '<div pseudo="x-foo1_1 x-foo2_2">'
522 '<div>Test</div>'
523 '</div>'));
524 expect(compiler.output.last.contents, contains(
525 '<style>.test > *[pseudo="x-foo_0"] {\n'
526 ' background-color: #f00;\n'
527 '}\n'
528 '.test > *[pseudo="x-foo1_1"] {\n'
529 ' color: #00f;\n'
530 '}\n'
531 '.test > *[pseudo="x-foo2_2"] {\n'
532 ' color: #008000;\n'
533 '}'
534 '</style>'));
535 }));
536 }
537
538 main() {
539 useCompactVMConfiguration();
540
541 test('test_simple_var', test_simple_var);
542 test('test_var', test_var);
543 test('test_simple_import', test_simple_import);
544 test('test_imports', test_imports);
545 test('test_component_var', test_component_var);
546 test('test_pseudo_element', test_pseudo_element);
547 }
OLDNEW
« no previous file with comments | « pkg/polymer/test/compiler_test.dart ('k') | pkg/polymer/test/data/unit/event_path_test.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698