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

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

Issue 3015713002: Roll to pickup pool changes
Patch Set: Created 3 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/var_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
1 // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file 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 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. 3 // BSD-style license that can be found in the LICENSE file.
4 4
5 library mixin_test; 5 library mixin_test;
6 6
7 import 'package:csslib/src/messages.dart'; 7 import 'package:csslib/src/messages.dart';
8 import 'package:test/test.dart'; 8 import 'package:test/test.dart';
9 9
10 import 'testing.dart'; 10 import 'testing.dart';
11 11
12 compileAndValidate(String input, String generated) { 12 compileAndValidate(String input, String generated) {
13 var errors = <Message>[]; 13 var errors = <Message>[];
14 var stylesheet = compileCss(input, errors: errors, opts: options); 14 var stylesheet = compileCss(input, errors: errors, opts: options);
15 expect(stylesheet != null, true); 15 expect(stylesheet != null, true);
16 expect(errors.isEmpty, true, reason: errors.toString()); 16 expect(errors.isEmpty, true, reason: errors.toString());
17 expect(prettyPrint(stylesheet), generated); 17 expect(prettyPrint(stylesheet), generated);
18 } 18 }
19 19
20 compilePolyfillAndValidate(String input, String generated) { 20 compilePolyfillAndValidate(String input, String generated) {
21 var errors = <Message>[]; 21 var errors = <Message>[];
22 var stylesheet = polyFillCompileCss(input, errors: errors, opts: options); 22 var stylesheet = polyFillCompileCss(input, errors: errors, opts: options);
23 expect(stylesheet != null, true); 23 expect(stylesheet != null, true);
24 expect(errors.isEmpty, true, reason: errors.toString()); 24 expect(errors.isEmpty, true, reason: errors.toString());
25 expect(prettyPrint(stylesheet), generated); 25 expect(prettyPrint(stylesheet), generated);
26 } 26 }
27 27
28 void topLevelMixin() { 28 void topLevelMixin() {
29 compileAndValidate( 29 compileAndValidate(r'''
30 r'''
31 @mixin silly-links { 30 @mixin silly-links {
32 a { 31 a {
33 color: blue; 32 color: blue;
34 background-color: red; 33 background-color: red;
35 } 34 }
36 } 35 }
37 36
38 @include silly-links; 37 @include silly-links;
39 ''', 38 ''', r'''
40 r'''
41 a { 39 a {
42 color: #00f; 40 color: #00f;
43 background-color: #f00; 41 background-color: #f00;
44 }'''); 42 }''');
45 } 43 }
46 44
47 void topLevelMixinTwoIncludes() { 45 void topLevelMixinTwoIncludes() {
48 compileAndValidate( 46 compileAndValidate(r'''
49 r'''
50 @mixin a { 47 @mixin a {
51 a { 48 a {
52 color: blue; 49 color: blue;
53 background-color: red; 50 background-color: red;
54 } 51 }
55 } 52 }
56 @mixin b { 53 @mixin b {
57 span { 54 span {
58 color: black; 55 color: black;
59 background-color: orange; 56 background-color: orange;
60 } 57 }
61 } 58 }
62 @include a; 59 @include a;
63 @include b; 60 @include b;
64 ''', 61 ''', r'''
65 r'''
66 a { 62 a {
67 color: #00f; 63 color: #00f;
68 background-color: #f00; 64 background-color: #f00;
69 } 65 }
70 span { 66 span {
71 color: #000; 67 color: #000;
72 background-color: #ffa500; 68 background-color: #ffa500;
73 }'''); 69 }''');
74 } 70 }
75 71
76 /** Tests top-level mixins that includes another mixin. */ 72 /** Tests top-level mixins that includes another mixin. */
77 void topLevelMixinMultiRulesets() { 73 void topLevelMixinMultiRulesets() {
78 compileAndValidate( 74 compileAndValidate(r'''
79 r'''
80 @mixin a { 75 @mixin a {
81 a { 76 a {
82 color: blue; 77 color: blue;
83 background-color: red; 78 background-color: red;
84 } 79 }
85 } 80 }
86 @mixin b { 81 @mixin b {
87 #foo-id { 82 #foo-id {
88 border-top: 1px solid red; 83 border-top: 1px solid red;
89 border-bottom: 2px solid green; 84 border-bottom: 2px solid green;
90 } 85 }
91 } 86 }
92 @mixin c { 87 @mixin c {
93 span { 88 span {
94 color: black; 89 color: black;
95 background-color: orange; 90 background-color: orange;
96 } 91 }
97 @include b; 92 @include b;
98 } 93 }
99 @include a; 94 @include a;
100 @include c; 95 @include c;
101 ''', 96 ''', r'''
102 r'''
103 a { 97 a {
104 color: #00f; 98 color: #00f;
105 background-color: #f00; 99 background-color: #f00;
106 } 100 }
107 span { 101 span {
108 color: #000; 102 color: #000;
109 background-color: #ffa500; 103 background-color: #ffa500;
110 } 104 }
111 #foo-id { 105 #foo-id {
112 border-top: 1px solid #f00; 106 border-top: 1px solid #f00;
113 border-bottom: 2px solid #008000; 107 border-bottom: 2px solid #008000;
114 }'''); 108 }''');
115 } 109 }
116 110
117 void topLevelMixinDeeplyNestedRulesets() { 111 void topLevelMixinDeeplyNestedRulesets() {
118 compileAndValidate( 112 compileAndValidate(r'''
119 r'''
120 @mixin a { 113 @mixin a {
121 a { 114 a {
122 color: blue; 115 color: blue;
123 background-color: red; 116 background-color: red;
124 } 117 }
125 } 118 }
126 @mixin b { 119 @mixin b {
127 #foo-id { 120 #foo-id {
128 border-top: 1px solid red; 121 border-top: 1px solid red;
129 border-bottom: 2px solid green; 122 border-bottom: 2px solid green;
(...skipping 19 matching lines...) Expand all
149 @mixin c { 142 @mixin c {
150 @include a; 143 @include a;
151 span { 144 span {
152 color: black; 145 color: black;
153 background-color: orange; 146 background-color: orange;
154 } 147 }
155 @include b; 148 @include b;
156 @include d; 149 @include d;
157 } 150 }
158 @include c; 151 @include c;
159 ''', 152 ''', r'''
160 r'''
161 a { 153 a {
162 color: #00f; 154 color: #00f;
163 background-color: #f00; 155 background-color: #f00;
164 } 156 }
165 span { 157 span {
166 color: #000; 158 color: #000;
167 background-color: #ffa500; 159 background-color: #ffa500;
168 } 160 }
169 #foo-id { 161 #foo-id {
170 border-top: 1px solid #f00; 162 border-top: 1px solid #f00;
171 border-bottom: 2px solid #008000; 163 border-bottom: 2px solid #008000;
172 } 164 }
173 a:hover { 165 a:hover {
174 cursor: arrow; 166 cursor: arrow;
175 } 167 }
176 #split-bar:visited { 168 #split-bar:visited {
177 color: #808080; 169 color: #808080;
178 } 170 }
179 #split-bar div { 171 #split-bar div {
180 border: 1px solid #d3d3d3; 172 border: 1px solid #d3d3d3;
181 }'''); 173 }''');
182 } 174 }
183 175
184 /** Tests selector groups and other combinators. */ 176 /** Tests selector groups and other combinators. */
185 void topLevelMixinSelectors() { 177 void topLevelMixinSelectors() {
186 compileAndValidate( 178 compileAndValidate(r'''
187 r'''
188 @mixin a { 179 @mixin a {
189 a, b { 180 a, b {
190 color: blue; 181 color: blue;
191 background-color: red; 182 background-color: red;
192 } 183 }
193 div > span { 184 div > span {
194 color: black; 185 color: black;
195 background-color: orange; 186 background-color: orange;
196 } 187 }
197 } 188 }
198 189
199 @include a; 190 @include a;
200 ''', 191 ''', r'''
201 r'''
202 a, b { 192 a, b {
203 color: #00f; 193 color: #00f;
204 background-color: #f00; 194 background-color: #f00;
205 } 195 }
206 div > span { 196 div > span {
207 color: #000; 197 color: #000;
208 background-color: #ffa500; 198 background-color: #ffa500;
209 }'''); 199 }''');
210 } 200 }
211 201
212 void declSimpleMixin() { 202 void declSimpleMixin() {
213 compileAndValidate( 203 compileAndValidate(r'''
214 r'''
215 @mixin div-border { 204 @mixin div-border {
216 border: 2px dashed red; 205 border: 2px dashed red;
217 } 206 }
218 div { 207 div {
219 @include div-border; 208 @include div-border;
220 } 209 }
221 ''', 210 ''', r'''
222 r'''
223 div { 211 div {
224 border: 2px dashed #f00; 212 border: 2px dashed #f00;
225 }'''); 213 }''');
226 } 214 }
227 215
228 void declMixinTwoIncludes() { 216 void declMixinTwoIncludes() {
229 compileAndValidate( 217 compileAndValidate(r'''
230 r'''
231 @mixin div-border { 218 @mixin div-border {
232 border: 2px dashed red; 219 border: 2px dashed red;
233 } 220 }
234 @mixin div-color { 221 @mixin div-color {
235 color: blue; 222 color: blue;
236 } 223 }
237 div { 224 div {
238 @include div-border; 225 @include div-border;
239 @include div-color; 226 @include div-color;
240 } 227 }
241 ''', 228 ''', r'''
242 r'''
243 div { 229 div {
244 border: 2px dashed #f00; 230 border: 2px dashed #f00;
245 color: #00f; 231 color: #00f;
246 }'''); 232 }''');
247 } 233 }
248 234
249 void declMixinNestedIncludes() { 235 void declMixinNestedIncludes() {
250 compileAndValidate( 236 compileAndValidate(r'''
251 r'''
252 @mixin div-border { 237 @mixin div-border {
253 border: 2px dashed red; 238 border: 2px dashed red;
254 } 239 }
255 @mixin div-padding { 240 @mixin div-padding {
256 padding: .5em; 241 padding: .5em;
257 } 242 }
258 @mixin div-margin { 243 @mixin div-margin {
259 margin: 5px; 244 margin: 5px;
260 } 245 }
261 @mixin div-color { 246 @mixin div-color {
262 @include div-padding; 247 @include div-padding;
263 color: blue; 248 color: blue;
264 @include div-margin; 249 @include div-margin;
265 } 250 }
266 div { 251 div {
267 @include div-border; 252 @include div-border;
268 @include div-color; 253 @include div-color;
269 } 254 }
270 ''', 255 ''', r'''
271 r'''
272 div { 256 div {
273 border: 2px dashed #f00; 257 border: 2px dashed #f00;
274 padding: .5em; 258 padding: .5em;
275 color: #00f; 259 color: #00f;
276 margin: 5px; 260 margin: 5px;
277 }'''); 261 }''');
278 } 262 }
279 263
280 void declMixinDeeperNestedIncludes() { 264 void declMixinDeeperNestedIncludes() {
281 compileAndValidate( 265 compileAndValidate(r'''
282 r'''
283 @mixin div-border { 266 @mixin div-border {
284 border: 2px dashed red; 267 border: 2px dashed red;
285 } 268 }
286 @mixin div-padding { 269 @mixin div-padding {
287 padding: .5em; 270 padding: .5em;
288 } 271 }
289 @mixin div-margin { 272 @mixin div-margin {
290 margin: 5px; 273 margin: 5px;
291 } 274 }
292 @mixin div-color { 275 @mixin div-color {
293 @include div-padding; 276 @include div-padding;
294 @include div-margin; 277 @include div-margin;
295 } 278 }
296 div { 279 div {
297 @include div-border; 280 @include div-border;
298 @include div-color; 281 @include div-color;
299 } 282 }
300 ''', 283 ''', r'''
301 r'''
302 div { 284 div {
303 border: 2px dashed #f00; 285 border: 2px dashed #f00;
304 padding: .5em; 286 padding: .5em;
305 margin: 5px; 287 margin: 5px;
306 }'''); 288 }''');
307 } 289 }
308 290
309 void mixinArg() { 291 void mixinArg() {
310 compileAndValidate( 292 compileAndValidate(r'''
311 r'''
312 @mixin div-border-1 { 293 @mixin div-border-1 {
313 border: 2px dashed red; 294 border: 2px dashed red;
314 } 295 }
315 @mixin div-border-2() { 296 @mixin div-border-2() {
316 border: 22px solid blue; 297 border: 22px solid blue;
317 } 298 }
318 @mixin div-left(@dist) { 299 @mixin div-left(@dist) {
319 margin-left: @dist; 300 margin-left: @dist;
320 } 301 }
321 @mixin div-right(var-margin) { 302 @mixin div-right(var-margin) {
322 margin-right: var(margin); 303 margin-right: var(margin);
323 } 304 }
324 div-1 { 305 div-1 {
325 @include div-left(10px); 306 @include div-left(10px);
326 @include div-right(100px); 307 @include div-right(100px);
327 @include div-border-1; 308 @include div-border-1;
328 } 309 }
329 div-2 { 310 div-2 {
330 @include div-left(20em); 311 @include div-left(20em);
331 @include div-right(5in); 312 @include div-right(5in);
332 @include div-border-2(); 313 @include div-border-2();
333 } 314 }
334 div-3 { 315 div-3 {
335 @include div-border-1(); 316 @include div-border-1();
336 } 317 }
337 div-4 { 318 div-4 {
338 @include div-border-2; 319 @include div-border-2;
339 } 320 }
340 ''', 321 ''', r'''
341 r'''
342 div-1 { 322 div-1 {
343 margin-left: 10px; 323 margin-left: 10px;
344 margin-right: 100px; 324 margin-right: 100px;
345 border: 2px dashed #f00; 325 border: 2px dashed #f00;
346 } 326 }
347 div-2 { 327 div-2 {
348 margin-left: 20em; 328 margin-left: 20em;
349 margin-right: 5in; 329 margin-right: 5in;
350 border: 22px solid #00f; 330 border: 22px solid #00f;
351 } 331 }
352 div-3 { 332 div-3 {
353 border: 2px dashed #f00; 333 border: 2px dashed #f00;
354 } 334 }
355 div-4 { 335 div-4 {
356 border: 22px solid #00f; 336 border: 22px solid #00f;
357 }'''); 337 }''');
358 } 338 }
359 339
360 void mixinArgs() { 340 void mixinArgs() {
361 compileAndValidate( 341 compileAndValidate(r'''
362 r'''
363 @mixin box-shadow(@shadows...) { 342 @mixin box-shadow(@shadows...) {
364 -moz-box-shadow: @shadows; 343 -moz-box-shadow: @shadows;
365 -webkit-box-shadow: @shadows; 344 -webkit-box-shadow: @shadows;
366 box-shadow: var(shadows); 345 box-shadow: var(shadows);
367 } 346 }
368 347
369 .shadows { 348 .shadows {
370 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999); 349 @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
371 }''', 350 }''', r'''
372 r'''
373 .shadowed { 351 .shadowed {
374 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; 352 -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
375 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; 353 -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
376 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999; 354 box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
377 } 355 }
378 '''); 356 ''');
379 } 357 }
380 358
381 void mixinManyArgs() { 359 void mixinManyArgs() {
382 compileAndValidate( 360 compileAndValidate(r'''
383 r'''
384 @mixin border(@border-values) { 361 @mixin border(@border-values) {
385 border: @border-values 362 border: @border-values
386 } 363 }
387 364
388 .primary { 365 .primary {
389 @include border(3px solid green); 366 @include border(3px solid green);
390 } 367 }
391 ''', 368 ''', r'''
392 r'''
393 .primary { 369 .primary {
394 border: 3px solid #008000; 370 border: 3px solid #008000;
395 }'''); 371 }''');
396 372
397 compileAndValidate( 373 compileAndValidate(r'''
398 r'''
399 @mixin setup(@border-color, @border-style, @border-size, @color) { 374 @mixin setup(@border-color, @border-style, @border-size, @color) {
400 border: @border-size @border-style @border-color; 375 border: @border-size @border-style @border-color;
401 color: @color; 376 color: @color;
402 } 377 }
403 378
404 .primary { 379 .primary {
405 @include setup(red, solid, 5px, blue); 380 @include setup(red, solid, 5px, blue);
406 } 381 }
407 ''', 382 ''', r'''
408 r'''
409 .primary { 383 .primary {
410 border: 5px solid #f00; 384 border: 5px solid #f00;
411 color: #00f; 385 color: #00f;
412 }'''); 386 }''');
413 387
414 // Test passing a declaration that is multiple parameters. 388 // Test passing a declaration that is multiple parameters.
415 compileAndValidate( 389 compileAndValidate(r'''
416 r'''
417 @mixin colors(@text, @background, @border) { 390 @mixin colors(@text, @background, @border) {
418 color: @text; 391 color: @text;
419 background-color: @background; 392 background-color: @background;
420 border-color: @border; 393 border-color: @border;
421 } 394 }
422 395
423 @values: #ff0000, #00ff00, #0000ff; 396 @values: #ff0000, #00ff00, #0000ff;
424 .primary { 397 .primary {
425 @include colors(@values); 398 @include colors(@values);
426 } 399 }
427 ''', 400 ''', r'''
428 r'''
429 var-values: #f00, #0f0, #00f; 401 var-values: #f00, #0f0, #00f;
430 402
431 .primary { 403 .primary {
432 color: #f00; 404 color: #f00;
433 background-color: #0f0; 405 background-color: #0f0;
434 border-color: #00f; 406 border-color: #00f;
435 }'''); 407 }''');
436 408
437 compilePolyfillAndValidate( 409 compilePolyfillAndValidate(r'''
438 r'''
439 @mixin colors(@text, @background, @border) { 410 @mixin colors(@text, @background, @border) {
440 color: @text; 411 color: @text;
441 background-color: @background; 412 background-color: @background;
442 border-color: @border; 413 border-color: @border;
443 } 414 }
444 415
445 @values: #ff0000, #00ff00, #0000ff; 416 @values: #ff0000, #00ff00, #0000ff;
446 .primary { 417 .primary {
447 @include colors(@values); 418 @include colors(@values);
448 } 419 }
449 ''', 420 ''', r'''
450 r'''
451 .primary { 421 .primary {
452 color: #f00; 422 color: #f00;
453 background-color: #0f0; 423 background-color: #0f0;
454 border-color: #00f; 424 border-color: #00f;
455 }'''); 425 }''');
456 } 426 }
457 427
458 void badDeclarationInclude() { 428 void badDeclarationInclude() {
459 final errors = <Message>[]; 429 final errors = <Message>[];
460 final input = r''' 430 final input = r'''
(...skipping 122 matching lines...) Expand 10 before | Expand all | Expand 10 after
583 expect(stylesheet != null, true); 553 expect(stylesheet != null, true);
584 expect(errors.isNotEmpty, true); 554 expect(errors.isNotEmpty, true);
585 expect(errors.length, 1, reason: errors.toString()); 555 expect(errors.length, 1, reason: errors.toString());
586 var error = errors[0]; 556 var error = errors[0];
587 expect(error.message, 'Undefined mixin b'); 557 expect(error.message, 'Undefined mixin b');
588 expect(error.span.start.line, 1); 558 expect(error.span.start.line, 1);
589 expect(error.span.start.offset, 14); 559 expect(error.span.start.offset, 14);
590 } 560 }
591 561
592 void includeGrammar() { 562 void includeGrammar() {
593 compileAndValidate( 563 compileAndValidate(r'''
594 r'''
595 @mixin a { 564 @mixin a {
596 foo { color: red } 565 foo { color: red }
597 } 566 }
598 567
599 @mixin b { 568 @mixin b {
600 @include a; 569 @include a;
601 @include a; 570 @include a;
602 } 571 }
603 572
604 @include b; 573 @include b;
605 ''', 574 ''', r'''
606 r'''
607 foo { 575 foo {
608 color: #f00; 576 color: #f00;
609 } 577 }
610 foo { 578 foo {
611 color: #f00; 579 color: #f00;
612 }'''); 580 }''');
613 581
614 compileAndValidate( 582 compileAndValidate(r'''
615 r'''
616 @mixin a { 583 @mixin a {
617 color: red 584 color: red
618 } 585 }
619 586
620 foo { 587 foo {
621 @include a; 588 @include a;
622 @include a 589 @include a
623 } 590 }
624 ''', 591 ''', r'''
625 r'''
626 foo { 592 foo {
627 color: #f00; 593 color: #f00;
628 color: #f00; 594 color: #f00;
629 }'''); 595 }''');
630 596
631 var errors = <Message>[]; 597 var errors = <Message>[];
632 var input = r''' 598 var input = r'''
633 @mixin a { 599 @mixin a {
634 foo { color: red } 600 foo { color: red }
635 } 601 }
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after
700 test('multiple args and var decls as args', mixinManyArgs); 666 test('multiple args and var decls as args', mixinManyArgs);
701 }); 667 });
702 668
703 group('Mixin warnings', () { 669 group('Mixin warnings', () {
704 test('undefined top-level', undefinedTopLevel); 670 test('undefined top-level', undefinedTopLevel);
705 test('undefined declaration', undefinedDeclaration); 671 test('undefined declaration', undefinedDeclaration);
706 test('detect bad top-level as declaration', badDeclarationInclude); 672 test('detect bad top-level as declaration', badDeclarationInclude);
707 test('detect bad declaration as top-level', badTopInclude); 673 test('detect bad declaration as top-level', badTopInclude);
708 }); 674 });
709 } 675 }
OLDNEW
« no previous file with comments | « packages/csslib/test/extend_test.dart ('k') | packages/csslib/test/var_test.dart » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698