OLD | NEW |
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 var_test; | 5 library var_test; |
6 | 6 |
| 7 import 'package:csslib/src/messages.dart'; |
7 import 'package:test/test.dart'; | 8 import 'package:test/test.dart'; |
8 | 9 |
9 import 'testing.dart'; | 10 import 'testing.dart'; |
10 | 11 |
11 compileAndValidate(String input, String generated) { | 12 compileAndValidate(String input, String generated) { |
12 var errors = []; | 13 var errors = <Message>[]; |
13 var stylesheet = compileCss(input, errors: errors, opts: options); | 14 var stylesheet = compileCss(input, errors: errors, opts: options); |
14 expect(stylesheet != null, true); | 15 expect(stylesheet != null, true); |
15 expect(errors.isEmpty, true, reason: errors.toString()); | 16 expect(errors.isEmpty, true, reason: errors.toString()); |
16 expect(prettyPrint(stylesheet), generated); | 17 expect(prettyPrint(stylesheet), generated); |
17 } | 18 } |
18 | 19 |
19 compilePolyfillAndValidate(String input, String generated) { | 20 compilePolyfillAndValidate(String input, String generated) { |
20 var errors = []; | 21 var errors = <Message>[]; |
21 var stylesheet = polyFillCompileCss(input, errors: errors, opts: options); | 22 var stylesheet = polyFillCompileCss(input, errors: errors, opts: options); |
22 expect(stylesheet != null, true); | 23 expect(stylesheet != null, true); |
23 expect(errors.isEmpty, true, reason: errors.toString()); | 24 expect(errors.isEmpty, true, reason: errors.toString()); |
24 expect(prettyPrint(stylesheet), generated); | 25 expect(prettyPrint(stylesheet), generated); |
25 } | 26 } |
26 | 27 |
27 void simpleVar() { | 28 void simpleVar() { |
28 final input = ''':root { | 29 final input = ''' |
| 30 :root { |
29 var-color-background: red; | 31 var-color-background: red; |
30 var-color-foreground: blue; | 32 var-color-foreground: blue; |
31 | 33 |
32 var-c: #00ff00; | 34 var-c: #00ff00; |
33 var-b: var(c); | 35 var-b: var(c); |
34 var-a: var(b); | 36 var-a: var(b); |
35 } | 37 } |
36 .testIt { | 38 .testIt { |
37 color: var(color-foreground); | 39 color: var(color-foreground); |
38 background: var(color-background); | 40 background: var(color-background); |
39 } | 41 } |
40 '''; | 42 '''; |
41 | 43 |
42 final generated = ''':root { | 44 final generated = ''' |
| 45 :root { |
43 var-color-background: #f00; | 46 var-color-background: #f00; |
44 var-color-foreground: #00f; | 47 var-color-foreground: #00f; |
45 var-c: #0f0; | 48 var-c: #0f0; |
46 var-b: var(c); | 49 var-b: var(c); |
47 var-a: var(b); | 50 var-a: var(b); |
48 } | 51 } |
49 .testIt { | 52 .testIt { |
50 color: var(color-foreground); | 53 color: var(color-foreground); |
51 background: var(color-background); | 54 background: var(color-background); |
52 }'''; | 55 }'''; |
53 | 56 |
54 final generatedPolyfill = ''':root { | 57 final generatedPolyfill = ''' |
| 58 :root { |
55 } | 59 } |
56 .testIt { | 60 .testIt { |
57 color: #00f; | 61 color: #00f; |
58 background: #f00; | 62 background: #f00; |
59 }'''; | 63 }'''; |
60 | 64 |
61 compileAndValidate(input, generated); | 65 compileAndValidate(input, generated); |
62 compilePolyfillAndValidate(input, generatedPolyfill); | 66 compilePolyfillAndValidate(input, generatedPolyfill); |
63 } | 67 } |
64 | 68 |
65 void expressionsVar() { | 69 void expressionsVar() { |
66 final input = ''':root { | 70 final input = ''' |
| 71 :root { |
67 var-color-background: red; | 72 var-color-background: red; |
68 var-color-foreground: blue; | 73 var-color-foreground: blue; |
69 | 74 |
70 var-c: #00ff00; | 75 var-c: #00ff00; |
71 var-b: var(c); | 76 var-b: var(c); |
72 var-a: var(b); | 77 var-a: var(b); |
73 | 78 |
74 var-image: url(test.png); | 79 var-image: url(test.png); |
75 | 80 |
76 var-b-width: 20cm; | 81 var-b-width: 20cm; |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
121 font-family: var(font-family); | 126 font-family: var(font-family); |
122 src: var(src-1); | 127 src: var(src-1); |
123 unicode-range: var(unicode-range-1); | 128 unicode-range: var(unicode-range-1); |
124 } | 129 } |
125 | 130 |
126 .foobar { | 131 .foobar { |
127 grid-columns: var(grid-columns); | 132 grid-columns: var(grid-columns); |
128 } | 133 } |
129 '''; | 134 '''; |
130 | 135 |
131 final generated = ''':root { | 136 final generated = ''' |
| 137 :root { |
132 var-color-background: #f00; | 138 var-color-background: #f00; |
133 var-color-foreground: #00f; | 139 var-color-foreground: #00f; |
134 var-c: #0f0; | 140 var-c: #0f0; |
135 var-b: var(c); | 141 var-b: var(c); |
136 var-a: var(b); | 142 var-a: var(b); |
137 var-image: url("test.png"); | 143 var-image: url("test.png"); |
138 var-b-width: 20cm; | 144 var-b-width: 20cm; |
139 var-m-width: 33%; | 145 var-m-width: 33%; |
140 var-b-height: 30em; | 146 var-b-height: 30em; |
141 var-width: .6in; | 147 var-width: .6in; |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
178 font-family: var(font-family); | 184 font-family: var(font-family); |
179 src: var(src-1); | 185 src: var(src-1); |
180 unicode-range: var(unicode-range-1); | 186 unicode-range: var(unicode-range-1); |
181 } | 187 } |
182 .foobar { | 188 .foobar { |
183 grid-columns: var(grid-columns); | 189 grid-columns: var(grid-columns); |
184 }'''; | 190 }'''; |
185 | 191 |
186 compileAndValidate(input, generated); | 192 compileAndValidate(input, generated); |
187 | 193 |
188 var generatedPolyfill = r''':root { | 194 var generatedPolyfill = r''' |
| 195 :root { |
189 } | 196 } |
190 .testIt { | 197 .testIt { |
191 color: #00f; | 198 color: #00f; |
192 background: #0f0; | 199 background: #0f0; |
193 background-image: url("test.png"); | 200 background-image: url("test.png"); |
194 border-width: 20cm; | 201 border-width: 20cm; |
195 margin-width: 33%; | 202 margin-width: 33%; |
196 border-height: 30em; | 203 border-height: 30em; |
197 width: .6in; | 204 width: .6in; |
198 length: 1.2in; | 205 length: 1.2in; |
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
264 | 271 |
265 .test-5 { | 272 .test-5 { |
266 background: var(test-color, var(a)) var(image) no-repeat right top; | 273 background: var(test-color, var(a)) var(image) no-repeat right top; |
267 } | 274 } |
268 | 275 |
269 .test-6 { | 276 .test-6 { |
270 border: red var(a-1, solid 20px); | 277 border: red var(a-1, solid 20px); |
271 } | 278 } |
272 '''; | 279 '''; |
273 | 280 |
274 final generated = ''':root { | 281 final generated = ''' |
| 282 :root { |
275 var-color-background: #f00; | 283 var-color-background: #f00; |
276 var-color-foreground: #00f; | 284 var-color-foreground: #00f; |
277 var-a: var(b, #0a0); | 285 var-a: var(b, #0a0); |
278 var-b: var(c, #0b0); | 286 var-b: var(c, #0b0); |
279 var-c: #0f0; | 287 var-c: #0f0; |
280 var-image: url("test.png"); | 288 var-image: url("test.png"); |
281 var-b-width: 20cm; | 289 var-b-width: 20cm; |
282 var-m-width: 33%; | 290 var-m-width: 33%; |
283 var-b-height: 30em; | 291 var-b-height: 30em; |
284 } | 292 } |
(...skipping 17 matching lines...) Expand all Loading... |
302 } | 310 } |
303 .test-5 { | 311 .test-5 { |
304 background: var(test-color, var(a)) var(image) no-repeat right top; | 312 background: var(test-color, var(a)) var(image) no-repeat right top; |
305 } | 313 } |
306 .test-6 { | 314 .test-6 { |
307 border: #f00 var(a-1, solid 20px); | 315 border: #f00 var(a-1, solid 20px); |
308 }'''; | 316 }'''; |
309 | 317 |
310 compileAndValidate(input, generated); | 318 compileAndValidate(input, generated); |
311 | 319 |
312 var generatedPolyfill = r''':root { | 320 var generatedPolyfill = r''' |
| 321 :root { |
313 } | 322 } |
314 .test { | 323 .test { |
315 background-color: #ffa500; | 324 background-color: #ffa500; |
316 } | 325 } |
317 body { | 326 body { |
318 background: #0a0 url("test.png") no-repeat right top; | 327 background: #0a0 url("test.png") no-repeat right top; |
319 } | 328 } |
320 div { | 329 div { |
321 background: #f00 url("img_tree.png") no-repeat right top; | 330 background: #f00 url("img_tree.png") no-repeat right top; |
322 } | 331 } |
(...skipping 10 matching lines...) Expand all Loading... |
333 background: #0a0 url("test.png") no-repeat right top; | 342 background: #0a0 url("test.png") no-repeat right top; |
334 } | 343 } |
335 .test-6 { | 344 .test-6 { |
336 border: #f00 solid 20px; | 345 border: #f00 solid 20px; |
337 }'''; | 346 }'''; |
338 | 347 |
339 compilePolyfillAndValidate(input, generatedPolyfill); | 348 compilePolyfillAndValidate(input, generatedPolyfill); |
340 } | 349 } |
341 | 350 |
342 void undefinedVars() { | 351 void undefinedVars() { |
343 final errors = []; | 352 final errors = <Message>[]; |
344 final input = ''':root { | 353 final input = ''' |
| 354 :root { |
345 var-color-background: red; | 355 var-color-background: red; |
346 var-color-foreground: blue; | 356 var-color-foreground: blue; |
347 | 357 |
348 var-a: var(b); | 358 var-a: var(b); |
349 var-b: var(c); | 359 var-b: var(c); |
350 var-c: #00ff00; | 360 var-c: #00ff00; |
351 | 361 |
352 var-one: var(two); | 362 var-one: var(two); |
353 var-two: var(one); | 363 var-two: var(one); |
354 | 364 |
(...skipping 12 matching lines...) Expand all Loading... |
367 } | 377 } |
368 .test-1 { | 378 .test-1 { |
369 color: var(c); | 379 color: var(c); |
370 } | 380 } |
371 .test-2 { | 381 .test-2 { |
372 color: var(one); | 382 color: var(one); |
373 background: var(six); | 383 background: var(six); |
374 } | 384 } |
375 '''; | 385 '''; |
376 | 386 |
377 final generatedPolyfill = ''':root { | 387 final generatedPolyfill = ''' |
| 388 :root { |
378 } | 389 } |
379 .testIt { | 390 .testIt { |
380 color: #00f; | 391 color: #00f; |
381 background: #f00; | 392 background: #f00; |
382 } | 393 } |
383 .test-1 { | 394 .test-1 { |
384 color: #0f0; | 395 color: #0f0; |
385 } | 396 } |
386 .test-2 { | 397 .test-2 { |
387 color: ; | 398 color: ; |
(...skipping 17 matching lines...) Expand all Loading... |
405 ' var-five: var(six);\n' | 416 ' var-five: var(six);\n' |
406 ' ^^^^', | 417 ' ^^^^', |
407 'error on line 16, column 18: Variable is not defined.\n' | 418 'error on line 16, column 18: Variable is not defined.\n' |
408 ' var-def-1: var(def-2);\n' | 419 ' var-def-1: var(def-2);\n' |
409 ' ^^^^^^', | 420 ' ^^^^^^', |
410 'error on line 17, column 18: Variable is not defined.\n' | 421 'error on line 17, column 18: Variable is not defined.\n' |
411 ' var-def-2: var(def-3);\n' | 422 ' var-def-2: var(def-3);\n' |
412 ' ^^^^^^', | 423 ' ^^^^^^', |
413 ]; | 424 ]; |
414 | 425 |
415 var generated = r''':root { | 426 var generated = r''' |
| 427 :root { |
416 var-color-background: #f00; | 428 var-color-background: #f00; |
417 var-color-foreground: #00f; | 429 var-color-foreground: #00f; |
418 var-a: var(b); | 430 var-a: var(b); |
419 var-b: var(c); | 431 var-b: var(c); |
420 var-c: #0f0; | 432 var-c: #0f0; |
421 var-one: var(two); | 433 var-one: var(two); |
422 var-two: var(one); | 434 var-two: var(one); |
423 var-four: var(five); | 435 var-four: var(five); |
424 var-five: var(six); | 436 var-five: var(six); |
425 var-six: var(four); | 437 var-six: var(four); |
(...skipping 17 matching lines...) Expand all Loading... |
443 compileAndValidate(input, generated); | 455 compileAndValidate(input, generated); |
444 | 456 |
445 var stylesheet = | 457 var stylesheet = |
446 polyFillCompileCss(input, errors: errors..clear(), opts: options); | 458 polyFillCompileCss(input, errors: errors..clear(), opts: options); |
447 | 459 |
448 expect(stylesheet != null, true); | 460 expect(stylesheet != null, true); |
449 | 461 |
450 expect(errors.length, errorStrings.length, reason: errors.toString()); | 462 expect(errors.length, errorStrings.length, reason: errors.toString()); |
451 testBitMap = 0; | 463 testBitMap = 0; |
452 | 464 |
453 outer: for (var error in errors) { | 465 outer: |
| 466 for (var error in errors) { |
454 var errorString = error.toString(); | 467 var errorString = error.toString(); |
455 for (int i = 0; i < errorStrings.length; i++) { | 468 for (int i = 0; i < errorStrings.length; i++) { |
456 if (errorString == errorStrings[i]) { | 469 if (errorString == errorStrings[i]) { |
457 testBitMap |= 1 << i; | 470 testBitMap |= 1 << i; |
458 continue outer; | 471 continue outer; |
459 } | 472 } |
460 } | 473 } |
461 fail("Unexpected error string: $errorString"); | 474 fail("Unexpected error string: $errorString"); |
462 } | 475 } |
463 expect(testBitMap, equals((1 << errorStrings.length) - 1)); | 476 expect(testBitMap, equals((1 << errorStrings.length) - 1)); |
464 expect(prettyPrint(stylesheet), generatedPolyfill); | 477 expect(prettyPrint(stylesheet), generatedPolyfill); |
465 } | 478 } |
466 | 479 |
467 parserVar() { | 480 parserVar() { |
468 final input = ''':root { | 481 final input = ''' |
| 482 :root { |
469 var-color-background: red; | 483 var-color-background: red; |
470 var-color-foreground: blue; | 484 var-color-foreground: blue; |
471 | 485 |
472 var-c: #00ff00; | 486 var-c: #00ff00; |
473 var-b: var(c); | 487 var-b: var(c); |
474 var-a: var(b); | 488 var-a: var(b); |
475 | 489 |
476 var-image: url(test.png); | 490 var-image: url(test.png); |
477 | 491 |
478 var-b-width: 20cm; | 492 var-b-width: 20cm; |
(...skipping 44 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
523 font-family: var(font-family); | 537 font-family: var(font-family); |
524 src: var(src-1); | 538 src: var(src-1); |
525 unicode-range: var(unicode-range-1); | 539 unicode-range: var(unicode-range-1); |
526 } | 540 } |
527 | 541 |
528 .foobar { | 542 .foobar { |
529 grid-columns: var(grid-columns); | 543 grid-columns: var(grid-columns); |
530 } | 544 } |
531 '''; | 545 '''; |
532 | 546 |
533 final generated = ''':root { | 547 final generated = ''' |
| 548 :root { |
534 var-color-background: #f00; | 549 var-color-background: #f00; |
535 var-color-foreground: #00f; | 550 var-color-foreground: #00f; |
536 var-c: #0f0; | 551 var-c: #0f0; |
537 var-b: var(c); | 552 var-b: var(c); |
538 var-a: var(b); | 553 var-a: var(b); |
539 var-image: url("test.png"); | 554 var-image: url("test.png"); |
540 var-b-width: 20cm; | 555 var-b-width: 20cm; |
541 var-m-width: 33%; | 556 var-m-width: 33%; |
542 var-b-height: 30em; | 557 var-b-height: 30em; |
543 var-width: .6in; | 558 var-width: .6in; |
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
580 font-family: var(font-family); | 595 font-family: var(font-family); |
581 src: var(src-1); | 596 src: var(src-1); |
582 unicode-range: var(unicode-range-1); | 597 unicode-range: var(unicode-range-1); |
583 } | 598 } |
584 .foobar { | 599 .foobar { |
585 grid-columns: var(grid-columns); | 600 grid-columns: var(grid-columns); |
586 }'''; | 601 }'''; |
587 | 602 |
588 compileAndValidate(input, generated); | 603 compileAndValidate(input, generated); |
589 | 604 |
590 var generatedPolyfill = r''':root { | 605 var generatedPolyfill = r''' |
| 606 :root { |
591 } | 607 } |
592 .testIt { | 608 .testIt { |
593 color: #00f; | 609 color: #00f; |
594 background: #0f0; | 610 background: #0f0; |
595 background-image: url("test.png"); | 611 background-image: url("test.png"); |
596 border-width: 20cm; | 612 border-width: 20cm; |
597 margin-width: 33%; | 613 margin-width: 33%; |
598 border-height: 30em; | 614 border-height: 30em; |
599 width: .6in; | 615 width: .6in; |
600 length: 1.2in; | 616 length: 1.2in; |
(...skipping 14 matching lines...) Expand all Loading... |
615 src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); | 631 src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
616 unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; | 632 unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; |
617 } | 633 } |
618 .foobar { | 634 .foobar { |
619 grid-columns: 10px ("content" 1fr 10px) [4]; | 635 grid-columns: 10px ("content" 1fr 10px) [4]; |
620 }'''; | 636 }'''; |
621 compilePolyfillAndValidate(input, generatedPolyfill); | 637 compilePolyfillAndValidate(input, generatedPolyfill); |
622 } | 638 } |
623 | 639 |
624 testVar() { | 640 testVar() { |
625 final errors = []; | 641 final errors = <Message>[]; |
626 final input = ''' | 642 final input = ''' |
627 @color-background: red; | 643 @color-background: red; |
628 @color-foreground: blue; | 644 @color-foreground: blue; |
629 | 645 |
630 .test { | 646 .test { |
631 background-color: var(color-background); | 647 background-color: var(color-background); |
632 color: var(color-foreground); | 648 color: var(color-foreground); |
633 } | 649 } |
634 '''; | 650 '''; |
635 final generated = ''' | 651 final generated = ''' |
(...skipping 15 matching lines...) Expand all Loading... |
651 | 667 |
652 final input2 = ''' | 668 final input2 = ''' |
653 @color-background: red; | 669 @color-background: red; |
654 @color-foreground: blue; | 670 @color-foreground: blue; |
655 | 671 |
656 .test { | 672 .test { |
657 background-color: @color-background; | 673 background-color: @color-background; |
658 color: @color-foreground; | 674 color: @color-foreground; |
659 } | 675 } |
660 '''; | 676 '''; |
661 final generated2 = '''var-color-background: #f00; | 677 final generated2 = ''' |
| 678 var-color-background: #f00; |
662 var-color-foreground: #00f; | 679 var-color-foreground: #00f; |
663 | 680 |
664 .test { | 681 .test { |
665 background-color: var(color-background); | 682 background-color: var(color-background); |
666 color: var(color-foreground); | 683 color: var(color-foreground); |
667 }'''; | 684 }'''; |
668 | 685 |
669 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); | 686 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); |
670 | 687 |
671 expect(stylesheet != null, true); | 688 expect(stylesheet != null, true); |
672 expect(errors.isEmpty, true, reason: errors.toString()); | 689 expect(errors.isEmpty, true, reason: errors.toString()); |
673 expect(prettyPrint(stylesheet), generated2); | 690 expect(prettyPrint(stylesheet), generated2); |
674 | 691 |
675 compileAndValidate(input2, generated2); | 692 compileAndValidate(input2, generated2); |
676 } | 693 } |
677 | 694 |
678 testLess() { | 695 testLess() { |
679 final errors = []; | 696 final errors = <Message>[]; |
680 final input = ''' | 697 final input = ''' |
681 @color-background: red; | 698 @color-background: red; |
682 @color-foreground: blue; | 699 @color-foreground: blue; |
683 | 700 |
684 .test { | 701 .test { |
685 background-color: var(color-background); | 702 background-color: var(color-background); |
686 color: var(color-foreground); | 703 color: var(color-foreground); |
687 } | 704 } |
688 '''; | 705 '''; |
689 final generated = '''var-color-background: #f00; | 706 final generated = ''' |
| 707 var-color-background: #f00; |
690 var-color-foreground: #00f; | 708 var-color-foreground: #00f; |
691 | 709 |
692 .test { | 710 .test { |
693 background-color: var(color-background); | 711 background-color: var(color-background); |
694 color: var(color-foreground); | 712 color: var(color-foreground); |
695 }'''; | 713 }'''; |
696 | 714 |
697 var stylesheet = parseCss(input, errors: errors, opts: simpleOptions); | 715 var stylesheet = parseCss(input, errors: errors, opts: simpleOptions); |
698 | 716 |
699 expect(stylesheet != null, true); | 717 expect(stylesheet != null, true); |
700 expect(errors.isEmpty, true, reason: errors.toString()); | 718 expect(errors.isEmpty, true, reason: errors.toString()); |
701 expect(prettyPrint(stylesheet), generated); | 719 expect(prettyPrint(stylesheet), generated); |
702 | 720 |
703 compileAndValidate(input, generated); | 721 compileAndValidate(input, generated); |
704 | 722 |
705 final input2 = ''' | 723 final input2 = ''' |
706 @color-background: red; | 724 @color-background: red; |
707 @color-foreground: blue; | 725 @color-foreground: blue; |
708 | 726 |
709 .test { | 727 .test { |
710 background-color: @color-background; | 728 background-color: @color-background; |
711 color: @color-foreground; | 729 color: @color-foreground; |
712 } | 730 } |
713 '''; | 731 '''; |
714 final generated2 = '''var-color-background: #f00; | 732 final generated2 = ''' |
| 733 var-color-background: #f00; |
715 var-color-foreground: #00f; | 734 var-color-foreground: #00f; |
716 | 735 |
717 .test { | 736 .test { |
718 background-color: var(color-background); | 737 background-color: var(color-background); |
719 color: var(color-foreground); | 738 color: var(color-foreground); |
720 }'''; | 739 }'''; |
721 | 740 |
722 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); | 741 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); |
723 | 742 |
724 expect(stylesheet != null, true); | 743 expect(stylesheet != null, true); |
725 expect(errors.isEmpty, true, reason: errors.toString()); | 744 expect(errors.isEmpty, true, reason: errors.toString()); |
726 expect(prettyPrint(stylesheet), generated2); | 745 expect(prettyPrint(stylesheet), generated2); |
727 | 746 |
728 compileAndValidate(input2, generated2); | 747 compileAndValidate(input2, generated2); |
729 } | 748 } |
730 | 749 |
731 void polyfill() { | 750 void polyfill() { |
732 compilePolyfillAndValidate(r''' | 751 compilePolyfillAndValidate( |
| 752 r''' |
733 @color-background: red; | 753 @color-background: red; |
734 @color-foreground: blue; | 754 @color-foreground: blue; |
735 .test { | 755 .test { |
736 background-color: @color-background; | 756 background-color: @color-background; |
737 color: @color-foreground; | 757 color: @color-foreground; |
738 }''', r'''.test { | 758 }''', |
| 759 r''' |
| 760 .test { |
739 background-color: #f00; | 761 background-color: #f00; |
740 color: #00f; | 762 color: #00f; |
741 }'''); | 763 }'''); |
742 } | 764 } |
743 | 765 |
744 void testIndirects() { | 766 void testIndirects() { |
745 compilePolyfillAndValidate(''' | 767 compilePolyfillAndValidate( |
| 768 ''' |
746 :root { | 769 :root { |
747 var-redef: #0f0; | 770 var-redef: #0f0; |
748 | 771 |
749 var-a1: #fff; | 772 var-a1: #fff; |
750 var-a2: var(a1); | 773 var-a2: var(a1); |
751 var-a3: var(a2); | 774 var-a3: var(a2); |
752 | 775 |
753 var-redef: #000; | 776 var-redef: #000; |
754 } | 777 } |
755 .test { | 778 .test { |
756 background-color: @a1; | 779 background-color: @a1; |
757 color: @a2; | 780 color: @a2; |
758 border-color: @a3; | 781 border-color: @a3; |
759 } | 782 } |
760 .test-1 { | 783 .test-1 { |
761 color: @redef; | 784 color: @redef; |
762 }''', r''':root { | 785 }''', |
| 786 r''' |
| 787 :root { |
763 } | 788 } |
764 .test { | 789 .test { |
765 background-color: #fff; | 790 background-color: #fff; |
766 color: #fff; | 791 color: #fff; |
767 border-color: #fff; | 792 border-color: #fff; |
768 } | 793 } |
769 .test-1 { | 794 .test-1 { |
770 color: #000; | 795 color: #000; |
771 }'''); | 796 }'''); |
772 } | 797 } |
773 | 798 |
774 void includes() { | 799 void includes() { |
775 var errors = []; | 800 var errors = <Message>[]; |
776 var file1Input = r''' | 801 var file1Input = r''' |
777 :root { | 802 :root { |
778 var-redef: #0f0; | 803 var-redef: #0f0; |
779 | 804 |
780 var-a1: #fff; | 805 var-a1: #fff; |
781 var-a2: var(a1); | 806 var-a2: var(a1); |
782 var-a3: var(a2); | 807 var-a3: var(a2); |
783 | 808 |
784 var-redef: #000; | 809 var-redef: #000; |
785 } | 810 } |
(...skipping 23 matching lines...) Expand all Loading... |
809 :root { | 834 :root { |
810 var-redef: #0c0; | 835 var-redef: #0c0; |
811 } | 836 } |
812 .test-main { | 837 .test-main { |
813 color: var(b3); | 838 color: var(b3); |
814 background-color: var(redef); | 839 background-color: var(redef); |
815 border-color: var(a3); | 840 border-color: var(a3); |
816 } | 841 } |
817 '''; | 842 '''; |
818 | 843 |
819 var generated1 = r''':root { | 844 var generated1 = r''' |
| 845 :root { |
820 var-redef: #0f0; | 846 var-redef: #0f0; |
821 var-a1: #fff; | 847 var-a1: #fff; |
822 var-a2: var(a1); | 848 var-a2: var(a1); |
823 var-a3: var(a2); | 849 var-a3: var(a2); |
824 var-redef: #000; | 850 var-redef: #000; |
825 } | 851 } |
826 .test-1 { | 852 .test-1 { |
827 background-color: var(a1); | 853 background-color: var(a1); |
828 color: var(a2); | 854 color: var(a2); |
829 border-color: var(a3); | 855 border-color: var(a3); |
830 } | 856 } |
831 .test-1a { | 857 .test-1a { |
832 color: var(redef); | 858 color: var(redef); |
833 }'''; | 859 }'''; |
834 | 860 |
835 var stylesheet1 = compileCss(file1Input, errors: errors, opts: options); | 861 var stylesheet1 = compileCss(file1Input, errors: errors, opts: options); |
836 expect(stylesheet1 != null, true); | 862 expect(stylesheet1 != null, true); |
837 expect(errors.isEmpty, true, reason: errors.toString()); | 863 expect(errors.isEmpty, true, reason: errors.toString()); |
838 expect(prettyPrint(stylesheet1), generated1); | 864 expect(prettyPrint(stylesheet1), generated1); |
839 | 865 |
840 var generated2 = r''':root { | 866 var generated2 = r''' |
| 867 :root { |
841 var-redef: #0b0; | 868 var-redef: #0b0; |
842 var-b3: var(a3); | 869 var-b3: var(a3); |
843 } | 870 } |
844 .test-2 { | 871 .test-2 { |
845 color: var(b3); | 872 color: var(b3); |
846 background-color: var(redef); | 873 background-color: var(redef); |
847 border-color: var(a3); | 874 border-color: var(a3); |
848 }'''; | 875 }'''; |
849 | 876 |
850 var stylesheet2 = compileCss(file2Input, | 877 var stylesheet2 = compileCss(file2Input, |
851 includes: [stylesheet1], errors: errors..clear(), opts: options); | 878 includes: [stylesheet1], errors: errors..clear(), opts: options); |
852 expect(stylesheet2 != null, true); | 879 expect(stylesheet2 != null, true); |
853 expect(errors.isEmpty, true, reason: errors.toString()); | 880 expect(errors.isEmpty, true, reason: errors.toString()); |
854 expect(prettyPrint(stylesheet2), generated2); | 881 expect(prettyPrint(stylesheet2), generated2); |
855 | 882 |
856 var generatedPolyfill1 = r''':root { | 883 var generatedPolyfill1 = r''' |
| 884 :root { |
857 } | 885 } |
858 .test-1 { | 886 .test-1 { |
859 background-color: #fff; | 887 background-color: #fff; |
860 color: #fff; | 888 color: #fff; |
861 border-color: #fff; | 889 border-color: #fff; |
862 } | 890 } |
863 .test-1a { | 891 .test-1a { |
864 color: #000; | 892 color: #000; |
865 }'''; | 893 }'''; |
866 var styleSheet1Polyfill = compileCss(file1Input, | 894 var styleSheet1Polyfill = compileCss(file1Input, |
867 errors: errors..clear(), polyfill: true, opts: options); | 895 errors: errors..clear(), polyfill: true, opts: options); |
868 expect(styleSheet1Polyfill != null, true); | 896 expect(styleSheet1Polyfill != null, true); |
869 expect(errors.isEmpty, true, reason: errors.toString()); | 897 expect(errors.isEmpty, true, reason: errors.toString()); |
870 expect(prettyPrint(styleSheet1Polyfill), generatedPolyfill1); | 898 expect(prettyPrint(styleSheet1Polyfill), generatedPolyfill1); |
871 | 899 |
872 var generatedPolyfill2 = r''':root { | 900 var generatedPolyfill2 = r''' |
| 901 :root { |
873 } | 902 } |
874 .test-2 { | 903 .test-2 { |
875 color: #fff; | 904 color: #fff; |
876 background-color: #0b0; | 905 background-color: #0b0; |
877 border-color: #fff; | 906 border-color: #fff; |
878 }'''; | 907 }'''; |
879 var styleSheet2Polyfill = compileCss(file2Input, | 908 var styleSheet2Polyfill = compileCss(file2Input, |
880 includes: [stylesheet1], | 909 includes: [stylesheet1], |
881 errors: errors..clear(), | 910 errors: errors..clear(), |
882 polyfill: true, | 911 polyfill: true, |
883 opts: options); | 912 opts: options); |
884 expect(styleSheet2Polyfill != null, true); | 913 expect(styleSheet2Polyfill != null, true); |
885 expect(errors.isEmpty, true, reason: errors.toString()); | 914 expect(errors.isEmpty, true, reason: errors.toString()); |
886 expect(prettyPrint(styleSheet2Polyfill), generatedPolyfill2); | 915 expect(prettyPrint(styleSheet2Polyfill), generatedPolyfill2); |
887 | 916 |
888 // Make sure includes didn't change. | 917 // Make sure includes didn't change. |
889 expect(prettyPrint(stylesheet1), generated1); | 918 expect(prettyPrint(stylesheet1), generated1); |
890 | 919 |
891 var generatedPolyfill = r''':root { | 920 var generatedPolyfill = r''' |
| 921 :root { |
892 } | 922 } |
893 .test-main { | 923 .test-main { |
894 color: #fff; | 924 color: #fff; |
895 background-color: #0c0; | 925 background-color: #0c0; |
896 border-color: #fff; | 926 border-color: #fff; |
897 }'''; | 927 }'''; |
898 var stylesheetPolyfill = compileCss(input, | 928 var stylesheetPolyfill = compileCss(input, |
899 includes: [stylesheet1, stylesheet2], | 929 includes: [stylesheet1, stylesheet2], |
900 errors: errors..clear(), | 930 errors: errors..clear(), |
901 polyfill: true, | 931 polyfill: true, |
(...skipping 13 matching lines...) Expand all Loading... |
915 test('Expressions var', expressionsVar); | 945 test('Expressions var', expressionsVar); |
916 test('Default value in var()', defaultVar); | 946 test('Default value in var()', defaultVar); |
917 test('CSS Parser only var', parserVar); | 947 test('CSS Parser only var', parserVar); |
918 test('Var syntax', testVar); | 948 test('Var syntax', testVar); |
919 test('Indirects', testIndirects); | 949 test('Indirects', testIndirects); |
920 test('Forward Refs', undefinedVars); | 950 test('Forward Refs', undefinedVars); |
921 test('Less syntax', testLess); | 951 test('Less syntax', testLess); |
922 test('Polyfill', polyfill); | 952 test('Polyfill', polyfill); |
923 test('Multi-file', includes); | 953 test('Multi-file', includes); |
924 } | 954 } |
OLD | NEW |