OLD | NEW |
(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 } |
OLD | NEW |