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

Side by Side Diff: packages/csslib/test/mixin_test.dart

Issue 1400473008: Roll Observatory packages and add a roll script (Closed) Base URL: git@github.com:dart-lang/observatory_pub_packages.git@master
Patch Set: Created 5 years, 2 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
« no previous file with comments | « packages/csslib/test/extend_test.dart ('k') | packages/csslib/test/nested_test.dart » ('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 mixin_test;
6
7 import 'package:test/test.dart';
8
9 import 'testing.dart';
10
11 compileAndValidate(String input, String generated) {
12 var errors = [];
13 var stylesheet = compileCss(input, errors: errors, opts: options);
14 expect(stylesheet != null, true);
15 expect(errors.isEmpty, true, reason: errors.toString());
16 expect(prettyPrint(stylesheet), generated);
17 }
18
19 compilePolyfillAndValidate(String input, String generated) {
20 var errors = [];
21 var stylesheet = polyFillCompileCss(input, errors: errors, opts: options);
22 expect(stylesheet != null, true);
23 expect(errors.isEmpty, true, reason: errors.toString());
24 expect(prettyPrint(stylesheet), generated);
25 }
26
27 void topLevelMixin() {
28 compileAndValidate(r'''
29 @mixin silly-links {
30 a {
31 color: blue;
32 background-color: red;
33 }
34 }
35
36 @include silly-links;
37 ''', r'''a {
38 color: #00f;
39 background-color: #f00;
40 }''');
41 }
42
43 void topLevelMixinTwoIncludes() {
44 compileAndValidate(r'''
45 @mixin a {
46 a {
47 color: blue;
48 background-color: red;
49 }
50 }
51 @mixin b {
52 span {
53 color: black;
54 background-color: orange;
55 }
56 }
57 @include a;
58 @include b;
59 ''', r'''a {
60 color: #00f;
61 background-color: #f00;
62 }
63 span {
64 color: #000;
65 background-color: #ffa500;
66 }''');
67 }
68
69 /** Tests top-level mixins that includes another mixin. */
70 void topLevelMixinMultiRulesets() {
71 compileAndValidate(r'''
72 @mixin a {
73 a {
74 color: blue;
75 background-color: red;
76 }
77 }
78 @mixin b {
79 #foo-id {
80 border-top: 1px solid red;
81 border-bottom: 2px solid green;
82 }
83 }
84 @mixin c {
85 span {
86 color: black;
87 background-color: orange;
88 }
89 @include b;
90 }
91 @include a;
92 @include c;
93 ''', r'''a {
94 color: #00f;
95 background-color: #f00;
96 }
97 span {
98 color: #000;
99 background-color: #ffa500;
100 }
101 #foo-id {
102 border-top: 1px solid #f00;
103 border-bottom: 2px solid #008000;
104 }''');
105 }
106
107 void topLevelMixinDeeplyNestedRulesets() {
108 compileAndValidate(r'''
109 @mixin a {
110 a {
111 color: blue;
112 background-color: red;
113 }
114 }
115 @mixin b {
116 #foo-id {
117 border-top: 1px solid red;
118 border-bottom: 2px solid green;
119 }
120 }
121 @mixin f {
122 #split-bar div {
123 border: 1px solid lightgray;
124 }
125 }
126 @mixin e {
127 #split-bar:visited {
128 color: gray;
129 }
130 @include f;
131 }
132 @mixin d {
133 a:hover {
134 cursor: arrow;
135 }
136 @include e
137 }
138 @mixin c {
139 @include a;
140 span {
141 color: black;
142 background-color: orange;
143 }
144 @include b;
145 @include d;
146 }
147 @include c;
148 ''', r'''a {
149 color: #00f;
150 background-color: #f00;
151 }
152 span {
153 color: #000;
154 background-color: #ffa500;
155 }
156 #foo-id {
157 border-top: 1px solid #f00;
158 border-bottom: 2px solid #008000;
159 }
160 a:hover {
161 cursor: arrow;
162 }
163 #split-bar:visited {
164 color: #808080;
165 }
166 #split-bar div {
167 border: 1px solid #d3d3d3;
168 }''');
169 }
170
171 /** Tests selector groups and other combinators. */
172 void topLevelMixinSelectors() {
173 compileAndValidate(r'''
174 @mixin a {
175 a, b {
176 color: blue;
177 background-color: red;
178 }
179 div > span {
180 color: black;
181 background-color: orange;
182 }
183 }
184
185 @include a;
186 ''', r'''a, b {
187 color: #00f;
188 background-color: #f00;
189 }
190 div > span {
191 color: #000;
192 background-color: #ffa500;
193 }''');
194 }
195
196 void declSimpleMixin() {
197 compileAndValidate(r'''
198 @mixin div-border {
199 border: 2px dashed red;
200 }
201 div {
202 @include div-border;
203 }
204 ''', r'''div {
205 border: 2px dashed #f00;
206 }''');
207 }
208
209 void declMixinTwoIncludes() {
210 compileAndValidate(r'''
211 @mixin div-border {
212 border: 2px dashed red;
213 }
214 @mixin div-color {
215 color: blue;
216 }
217 div {
218 @include div-border;
219 @include div-color;
220 }
221 ''', r'''div {
222 border: 2px dashed #f00;
223 color: #00f;
224 }''');
225 }
226
227 void declMixinNestedIncludes() {
228 compileAndValidate(r'''
229 @mixin div-border {
230 border: 2px dashed red;
231 }
232 @mixin div-padding {
233 padding: .5em;
234 }
235 @mixin div-margin {
236 margin: 5px;
237 }
238 @mixin div-color {
239 @include div-padding;
240 color: blue;
241 @include div-margin;
242 }
243 div {
244 @include div-border;
245 @include div-color;
246 }
247 ''', r'''div {
248 border: 2px dashed #f00;
249 padding: .5em;
250 color: #00f;
251 margin: 5px;
252 }''');
253 }
254
255 void declMixinDeeperNestedIncludes() {
256 compileAndValidate(r'''
257 @mixin div-border {
258 border: 2px dashed red;
259 }
260 @mixin div-padding {
261 padding: .5em;
262 }
263 @mixin div-margin {
264 margin: 5px;
265 }
266 @mixin div-color {
267 @include div-padding;
268 @include div-margin;
269 }
270 div {
271 @include div-border;
272 @include div-color;
273 }
274 ''', r'''div {
275 border: 2px dashed #f00;
276 padding: .5em;
277 margin: 5px;
278 }''');
279 }
280
281 void mixinArg() {
282 compileAndValidate(r'''
283 @mixin div-border-1 {
284 border: 2px dashed red;
285 }
286 @mixin div-border-2() {
287 border: 22px solid blue;
288 }
289 @mixin div-left(@dist) {
290 margin-left: @dist;
291 }
292 @mixin div-right(var-margin) {
293 margin-right: var(margin);
294 }
295 div-1 {
296 @include div-left(10px);
297 @include div-right(100px);
298 @include div-border-1;
299 }
300 div-2 {
301 @include div-left(20em);
302 @include div-right(5in);
303 @include div-border-2();
304 }
305 div-3 {
306 @include div-border-1();
307 }
308 div-4 {
309 @include div-border-2;
310 }
311 ''', r'''div-1 {
312 margin-left: 10px;
313 margin-right: 100px;
314 border: 2px dashed #f00;
315 }
316 div-2 {
317 margin-left: 20em;
318 margin-right: 5in;
319 border: 22px solid #00f;
320 }
321 div-3 {
322 border: 2px dashed #f00;
323 }
324 div-4 {
325 border: 22px solid #00f;
326 }''');
327 }
328
329 void mixinArgs() {
330 compileAndValidate(r'''
331 @mixin box-shadow(@shadows...) {
332 -moz-box-shadow: @shadows;
333 -webkit-box-shadow: @shadows;
334 box-shadow: var(shadows);
335 }
336
337 .shadows {
338 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
339 }''', r'''
340 .shadowed {
341 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
342 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
343 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
344 }
345 ''');
346 }
347
348 void mixinManyArgs() {
349 compileAndValidate(r'''
350 @mixin border(@border-values) {
351 border: @border-values
352 }
353
354 .primary {
355 @include border(3px solid green);
356 }
357 ''', r'''
358 .primary {
359 border: 3px solid #008000;
360 }''');
361
362 compileAndValidate(r'''
363 @mixin setup(@border-color, @border-style, @border-size, @color) {
364 border: @border-size @border-style @border-color;
365 color: @color;
366 }
367
368 .primary {
369 @include setup(red, solid, 5px, blue);
370 }
371 ''', r'''
372 .primary {
373 border: 5px solid #f00;
374 color: #00f;
375 }''');
376
377 // Test passing a declaration that is multiple parameters.
378 compileAndValidate(r'''
379 @mixin colors(@text, @background, @border) {
380 color: @text;
381 background-color: @background;
382 border-color: @border;
383 }
384
385 @values: #ff0000, #00ff00, #0000ff;
386 .primary {
387 @include colors(@values);
388 }
389 ''', r'''var-values: #f00, #0f0, #00f;
390
391 .primary {
392 color: #f00;
393 background-color: #0f0;
394 border-color: #00f;
395 }''');
396
397 compilePolyfillAndValidate(r'''
398 @mixin colors(@text, @background, @border) {
399 color: @text;
400 background-color: @background;
401 border-color: @border;
402 }
403
404 @values: #ff0000, #00ff00, #0000ff;
405 .primary {
406 @include colors(@values);
407 }
408 ''', r'''.primary {
409 color: #f00;
410 background-color: #0f0;
411 border-color: #00f;
412 }''');
413 }
414
415 void badDeclarationInclude() {
416 final errors = [];
417 final input = r'''
418 @mixin a {
419 #foo-id {
420 color: red;
421 }
422 }
423 @mixin b {
424 span {
425 border: 2px dashed red;
426 @include a;
427 }
428 }
429 @include b;
430 ''';
431
432 var stylesheet = compileCss(input, errors: errors, opts: options);
433
434 expect(stylesheet != null, true);
435 expect(errors.isNotEmpty, true);
436 expect(errors.length, 1, reason: errors.toString());
437 var error = errors[0];
438 expect(error.message, 'Using top-level mixin a as a declaration');
439 expect(error.span.start.line, 8);
440 expect(error.span.end.offset, 105);
441 }
442
443 void badTopInclude() {
444 final errors = [];
445 final input = r'''
446 @mixin b {
447 color: red;
448 }
449
450 @mixin a {
451 span {
452 border: 2px dashed red;
453 }
454 @include b;
455 }
456
457 @include a;
458 ''';
459
460 var stylesheet = compileCss(input, errors: errors, opts: options);
461 expect(stylesheet != null, true);
462 expect(errors.length, 1, reason: errors.toString());
463 var error = errors[0];
464 expect(error.message, 'Using declaration mixin b as top-level mixin');
465 expect(error.span.start.line, 8);
466 expect(error.span.end.offset, 90);
467 }
468
469 void emptyMixin() {
470 final errors = [];
471 final input = r'''
472 @mixin a {
473 }
474 @mixin b {
475 border: 2px dashed red;
476 @include a;
477 }
478 div {
479 @include b;
480 }
481 ''';
482
483 var generated = r'''div {
484 border: 2px dashed #f00;
485 }''';
486
487 var stylesheet = compileCss(input, errors: errors, opts: options);
488
489 expect(stylesheet != null, true);
490 expect(errors.isEmpty, true, reason: errors.toString());
491 expect(prettyPrint(stylesheet), generated);
492 }
493
494 void undefinedTopLevel() {
495 final errors = [];
496 final input = r'''
497 @mixin a {
498 @include b;
499 }
500 @mixin b {
501 span {
502 border: 2px dashed red;
503 }
504 @include a;
505 }
506
507 @include b;
508
509 ''';
510
511 var stylesheet = compileCss(input, errors: errors, opts: options);
512
513 expect(stylesheet != null, true);
514 expect(errors.isNotEmpty, true);
515 expect(errors.length, 1, reason: errors.toString());
516 var error = errors[0];
517 expect(error.message, 'Undefined mixin b');
518 expect(error.span.start.line, 1);
519 expect(error.span.start.offset, 14);
520 }
521
522 void undefinedDeclaration() {
523 final errors = [];
524 final input = r'''
525 @mixin a {
526 @include b;
527 }
528 @mixin b {
529 border: 2px dashed red;
530 @include a;
531 }
532 div {
533 @include b;
534 }
535 ''';
536
537 var stylesheet = compileCss(input, errors: errors, opts: options);
538
539 expect(stylesheet != null, true);
540 expect(errors.isNotEmpty, true);
541 expect(errors.length, 1, reason: errors.toString());
542 var error = errors[0];
543 expect(error.message, 'Undefined mixin b');
544 expect(error.span.start.line, 1);
545 expect(error.span.start.offset, 14);
546 }
547
548 void includeGrammar() {
549 compileAndValidate(r'''
550 @mixin a {
551 foo { color: red }
552 }
553
554 @mixin b {
555 @include a;
556 @include a;
557 }
558
559 @include b;
560 ''', r'''foo {
561 color: #f00;
562 }
563 foo {
564 color: #f00;
565 }''');
566
567 compileAndValidate(r'''
568 @mixin a {
569 color: red
570 }
571
572 foo {
573 @include a;
574 @include a
575 }
576 ''', r'''foo {
577 color: #f00;
578 color: #f00;
579 }''');
580
581 var errors = [];
582 var input = r'''
583 @mixin a {
584 foo { color: red }
585 }
586
587 @mixin b {
588 @include a
589 @include a
590 }
591
592 @include b
593 ''';
594
595 var stylesheet = compileCss(input, errors: errors, opts: options);
596
597 expect(stylesheet != null, true);
598
599 expect(errors.isNotEmpty, true);
600 expect(errors.length, 6, reason: errors.toString());
601 var error = errors[0];
602 expect(error.message, 'parsing error expected ;');
603 expect(error.span.start.line, 6);
604 expect(error.span.end.offset, 69);
605 error = errors[1];
606 expect(error.message, 'expected :, but found }');
607 expect(error.span.start.line, 7);
608 expect(error.span.end.offset, 73);
609 error = errors[2];
610 expect(error.message, 'parsing error expected }');
611 expect(error.span.start.line, 9);
612 expect(error.span.end.offset, 83);
613 error = errors[3];
614 expect(error.message, 'expected {, but found end of file()');
615 expect(error.span.start.line, 9);
616 expect(error.span.end.offset, 86);
617 error = errors[4];
618 expect(error.message, 'expected }, but found end of file()');
619 expect(error.span.start.line, 10);
620 expect(error.span.end.offset, 86);
621 error = errors[5];
622 expect(error.message, 'Using top-level mixin a as a declaration');
623 expect(error.span.start.line, 5);
624 expect(error.span.end.offset, 56);
625 }
626
627 main() {
628 group('Basic mixin', () {
629 test('include grammar', includeGrammar);
630 test('empty mixin content', emptyMixin);
631 });
632
633 group('Top-level mixin', () {
634 test('simple mixin', topLevelMixin);
635 test('mixin with two @includes', topLevelMixinTwoIncludes);
636 test('multi rulesets', topLevelMixinMultiRulesets);
637 test('multi rulesets and nesting', topLevelMixinDeeplyNestedRulesets);
638 test('selector groups', topLevelMixinSelectors);
639 });
640
641 group('Declaration mixin', () {
642 test('simple', declSimpleMixin);
643 test('with two @includes', declMixinTwoIncludes);
644 test('with includes', declMixinNestedIncludes);
645 test('with deeper nesting', declMixinDeeperNestedIncludes);
646 });
647
648 group('Mixin arguments', () {
649 test('simple arg', mixinArg);
650 test('multiple args and var decls as args', mixinManyArgs);
651 });
652
653 group('Mixin warnings', () {
654 test('undefined top-level', undefinedTopLevel);
655 test('undefined declaration', undefinedDeclaration);
656 test('detect bad top-level as declaration', badDeclarationInclude);
657 test('detect bad declaration as top-level', badTopInclude);
658 });
659 }
OLDNEW
« no previous file with comments | « packages/csslib/test/extend_test.dart ('k') | packages/csslib/test/nested_test.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698