| 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 |