| 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 var_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 simpleVar() { |
| 28 final input = ''':root { |
| 29 var-color-background: red; |
| 30 var-color-foreground: blue; |
| 31 |
| 32 var-c: #00ff00; |
| 33 var-b: var(c); |
| 34 var-a: var(b); |
| 35 } |
| 36 .testIt { |
| 37 color: var(color-foreground); |
| 38 background: var(color-background); |
| 39 } |
| 40 '''; |
| 41 |
| 42 final generated = ''':root { |
| 43 var-color-background: #f00; |
| 44 var-color-foreground: #00f; |
| 45 var-c: #0f0; |
| 46 var-b: var(c); |
| 47 var-a: var(b); |
| 48 } |
| 49 .testIt { |
| 50 color: var(color-foreground); |
| 51 background: var(color-background); |
| 52 }'''; |
| 53 |
| 54 final generatedPolyfill = ''':root { |
| 55 } |
| 56 .testIt { |
| 57 color: #00f; |
| 58 background: #f00; |
| 59 }'''; |
| 60 |
| 61 compileAndValidate(input, generated); |
| 62 compilePolyfillAndValidate(input, generatedPolyfill); |
| 63 } |
| 64 |
| 65 void expressionsVar() { |
| 66 final input = ''':root { |
| 67 var-color-background: red; |
| 68 var-color-foreground: blue; |
| 69 |
| 70 var-c: #00ff00; |
| 71 var-b: var(c); |
| 72 var-a: var(b); |
| 73 |
| 74 var-image: url(test.png); |
| 75 |
| 76 var-b-width: 20cm; |
| 77 var-m-width: 33%; |
| 78 var-b-height: 30EM; |
| 79 var-width: .6in; |
| 80 var-length: 1.2in; |
| 81 var-web-stuff: -10Px; |
| 82 var-rgba: rgba(10,20,255); |
| 83 var-transition: color 0.4s; |
| 84 var-transform: rotate(20deg); |
| 85 var-content: "✔"; |
| 86 var-text-shadow: 0 -1px 0 #bfbfbf; |
| 87 var-font-family: Gentium; |
| 88 var-src: url("http://example.com/fonts/Gentium.ttf"); |
| 89 var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 90 var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 91 var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 92 var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| 93 } |
| 94 |
| 95 .testIt { |
| 96 color: var(color-foreground); |
| 97 background: var(c); |
| 98 background-image: var(image); |
| 99 |
| 100 border-width: var(b-width); |
| 101 margin-width: var(m-width); |
| 102 border-height: var(b-height); |
| 103 width: var(width); |
| 104 length: var(length); |
| 105 -web-stuff: var(web-stuff); |
| 106 background-color: var(rgba); |
| 107 |
| 108 transition: var(transition); |
| 109 transform: var(transform); |
| 110 content: var(content); |
| 111 text-shadow: var(text-shadow); |
| 112 } |
| 113 |
| 114 @font-face { |
| 115 font-family: var(font-family); |
| 116 src: var(src); |
| 117 unicode-range: var(unicode-range); |
| 118 } |
| 119 |
| 120 @font-face { |
| 121 font-family: var(font-family); |
| 122 src: var(src-1); |
| 123 unicode-range: var(unicode-range-1); |
| 124 } |
| 125 |
| 126 .foobar { |
| 127 grid-columns: var(grid-columns); |
| 128 } |
| 129 '''; |
| 130 |
| 131 final generated = ''':root { |
| 132 var-color-background: #f00; |
| 133 var-color-foreground: #00f; |
| 134 var-c: #0f0; |
| 135 var-b: var(c); |
| 136 var-a: var(b); |
| 137 var-image: url("test.png"); |
| 138 var-b-width: 20cm; |
| 139 var-m-width: 33%; |
| 140 var-b-height: 30em; |
| 141 var-width: .6in; |
| 142 var-length: 1.2in; |
| 143 var-web-stuff: -10px; |
| 144 var-rgba: rgba(10, 20, 255); |
| 145 var-transition: color 0.4s; |
| 146 var-transform: rotate(20deg); |
| 147 var-content: "✔"; |
| 148 var-text-shadow: 0 -1px 0 #bfbfbf; |
| 149 var-font-family: Gentium; |
| 150 var-src: url("http://example.com/fonts/Gentium.ttf"); |
| 151 var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 152 var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 153 var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 154 var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| 155 } |
| 156 .testIt { |
| 157 color: var(color-foreground); |
| 158 background: var(c); |
| 159 background-image: var(image); |
| 160 border-width: var(b-width); |
| 161 margin-width: var(m-width); |
| 162 border-height: var(b-height); |
| 163 width: var(width); |
| 164 length: var(length); |
| 165 -web-stuff: var(web-stuff); |
| 166 background-color: var(rgba); |
| 167 transition: var(transition); |
| 168 transform: var(transform); |
| 169 content: var(content); |
| 170 text-shadow: var(text-shadow); |
| 171 } |
| 172 @font-face { |
| 173 font-family: var(font-family); |
| 174 src: var(src); |
| 175 unicode-range: var(unicode-range); |
| 176 } |
| 177 @font-face { |
| 178 font-family: var(font-family); |
| 179 src: var(src-1); |
| 180 unicode-range: var(unicode-range-1); |
| 181 } |
| 182 .foobar { |
| 183 grid-columns: var(grid-columns); |
| 184 }'''; |
| 185 |
| 186 compileAndValidate(input, generated); |
| 187 |
| 188 var generatedPolyfill = r''':root { |
| 189 } |
| 190 .testIt { |
| 191 color: #00f; |
| 192 background: #0f0; |
| 193 background-image: url("test.png"); |
| 194 border-width: 20cm; |
| 195 margin-width: 33%; |
| 196 border-height: 30em; |
| 197 width: .6in; |
| 198 length: 1.2in; |
| 199 -web-stuff: -10px; |
| 200 background-color: rgba(10, 20, 255); |
| 201 transition: color 0.4s; |
| 202 transform: rotate(20deg); |
| 203 content: "✔"; |
| 204 text-shadow: 0 -1px 0 #bfbfbf; |
| 205 } |
| 206 @font-face { |
| 207 font-family: Gentium; |
| 208 src: url("http://example.com/fonts/Gentium.ttf"); |
| 209 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 210 } |
| 211 @font-face { |
| 212 font-family: Gentium; |
| 213 src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 214 unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 215 } |
| 216 .foobar { |
| 217 grid-columns: 10px ("content" 1fr 10px) [4]; |
| 218 }'''; |
| 219 |
| 220 compilePolyfillAndValidate(input, generatedPolyfill); |
| 221 } |
| 222 |
| 223 void defaultVar() { |
| 224 final input = ''' |
| 225 :root { |
| 226 var-color-background: red; |
| 227 var-color-foreground: blue; |
| 228 |
| 229 var-a: var(b, #0a0); |
| 230 var-b: var(c, #0b0); |
| 231 var-c: #00ff00; |
| 232 |
| 233 var-image: url(test.png); |
| 234 |
| 235 var-b-width: 20cm; |
| 236 var-m-width: 33%; |
| 237 var-b-height: 30EM; |
| 238 } |
| 239 |
| 240 .test { |
| 241 background-color: var(test, orange); |
| 242 } |
| 243 |
| 244 body { |
| 245 background: var(a) var(image) no-repeat right top; |
| 246 } |
| 247 |
| 248 div { |
| 249 background: var(color-background) url('img_tree.png') no-repeat right top; |
| 250 } |
| 251 |
| 252 .test-2 { |
| 253 background: var(color-background) var(image-2, url('img_1.png')) |
| 254 no-repeat right top; |
| 255 } |
| 256 |
| 257 .test-3 { |
| 258 background: var(color-background) var(image) no-repeat right top; |
| 259 } |
| 260 |
| 261 .test-4 { |
| 262 background: #ffff00 var(image) no-repeat right top; |
| 263 } |
| 264 |
| 265 .test-5 { |
| 266 background: var(test-color, var(a)) var(image) no-repeat right top; |
| 267 } |
| 268 |
| 269 .test-6 { |
| 270 border: red var(a-1, solid 20px); |
| 271 } |
| 272 '''; |
| 273 |
| 274 final generated = ''':root { |
| 275 var-color-background: #f00; |
| 276 var-color-foreground: #00f; |
| 277 var-a: var(b, #0a0); |
| 278 var-b: var(c, #0b0); |
| 279 var-c: #0f0; |
| 280 var-image: url("test.png"); |
| 281 var-b-width: 20cm; |
| 282 var-m-width: 33%; |
| 283 var-b-height: 30em; |
| 284 } |
| 285 .test { |
| 286 background-color: var(test, #ffa500); |
| 287 } |
| 288 body { |
| 289 background: var(a) var(image) no-repeat right top; |
| 290 } |
| 291 div { |
| 292 background: var(color-background) url("img_tree.png") no-repeat right top; |
| 293 } |
| 294 .test-2 { |
| 295 background: var(color-background) var(image-2, url("img_1.png")) no-repeat rig
ht top; |
| 296 } |
| 297 .test-3 { |
| 298 background: var(color-background) var(image) no-repeat right top; |
| 299 } |
| 300 .test-4 { |
| 301 background: #ff0 var(image) no-repeat right top; |
| 302 } |
| 303 .test-5 { |
| 304 background: var(test-color, var(a)) var(image) no-repeat right top; |
| 305 } |
| 306 .test-6 { |
| 307 border: #f00 var(a-1, solid 20px); |
| 308 }'''; |
| 309 |
| 310 compileAndValidate(input, generated); |
| 311 |
| 312 var generatedPolyfill = r''':root { |
| 313 } |
| 314 .test { |
| 315 background-color: #ffa500; |
| 316 } |
| 317 body { |
| 318 background: #0a0 url("test.png") no-repeat right top; |
| 319 } |
| 320 div { |
| 321 background: #f00 url("img_tree.png") no-repeat right top; |
| 322 } |
| 323 .test-2 { |
| 324 background: #f00 url("img_1.png") no-repeat right top; |
| 325 } |
| 326 .test-3 { |
| 327 background: #f00 url("test.png") no-repeat right top; |
| 328 } |
| 329 .test-4 { |
| 330 background: #ff0 url("test.png") no-repeat right top; |
| 331 } |
| 332 .test-5 { |
| 333 background: #0a0 url("test.png") no-repeat right top; |
| 334 } |
| 335 .test-6 { |
| 336 border: #f00 solid 20px; |
| 337 }'''; |
| 338 |
| 339 compilePolyfillAndValidate(input, generatedPolyfill); |
| 340 } |
| 341 |
| 342 void undefinedVars() { |
| 343 final errors = []; |
| 344 final input = ''':root { |
| 345 var-color-background: red; |
| 346 var-color-foreground: blue; |
| 347 |
| 348 var-a: var(b); |
| 349 var-b: var(c); |
| 350 var-c: #00ff00; |
| 351 |
| 352 var-one: var(two); |
| 353 var-two: var(one); |
| 354 |
| 355 var-four: var(five); |
| 356 var-five: var(six); |
| 357 var-six: var(four); |
| 358 |
| 359 var-def-1: var(def-2); |
| 360 var-def-2: var(def-3); |
| 361 var-def-3: var(def-2); |
| 362 } |
| 363 |
| 364 .testIt { |
| 365 color: var(color-foreground); |
| 366 background: var(color-background); |
| 367 } |
| 368 .test-1 { |
| 369 color: var(c); |
| 370 } |
| 371 .test-2 { |
| 372 color: var(one); |
| 373 background: var(six); |
| 374 } |
| 375 '''; |
| 376 |
| 377 final generatedPolyfill = ''':root { |
| 378 } |
| 379 .testIt { |
| 380 color: #00f; |
| 381 background: #f00; |
| 382 } |
| 383 .test-1 { |
| 384 color: #0f0; |
| 385 } |
| 386 .test-2 { |
| 387 color: ; |
| 388 background: ; |
| 389 }'''; |
| 390 |
| 391 var errorStrings = [ |
| 392 'error on line 5, column 14: Variable is not defined.\n' |
| 393 ' var-a: var(b);\n' |
| 394 ' ^^', |
| 395 'error on line 6, column 14: Variable is not defined.\n' |
| 396 ' var-b: var(c);\n' |
| 397 ' ^^', |
| 398 'error on line 9, column 16: Variable is not defined.\n' |
| 399 ' var-one: var(two);\n' |
| 400 ' ^^^^', |
| 401 'error on line 12, column 17: Variable is not defined.\n' |
| 402 ' var-four: var(five);\n' |
| 403 ' ^^^^^', |
| 404 'error on line 13, column 17: Variable is not defined.\n' |
| 405 ' var-five: var(six);\n' |
| 406 ' ^^^^', |
| 407 'error on line 16, column 18: Variable is not defined.\n' |
| 408 ' var-def-1: var(def-2);\n' |
| 409 ' ^^^^^^', |
| 410 'error on line 17, column 18: Variable is not defined.\n' |
| 411 ' var-def-2: var(def-3);\n' |
| 412 ' ^^^^^^', |
| 413 ]; |
| 414 |
| 415 var generated = r''':root { |
| 416 var-color-background: #f00; |
| 417 var-color-foreground: #00f; |
| 418 var-a: var(b); |
| 419 var-b: var(c); |
| 420 var-c: #0f0; |
| 421 var-one: var(two); |
| 422 var-two: var(one); |
| 423 var-four: var(five); |
| 424 var-five: var(six); |
| 425 var-six: var(four); |
| 426 var-def-1: var(def-2); |
| 427 var-def-2: var(def-3); |
| 428 var-def-3: var(def-2); |
| 429 } |
| 430 .testIt { |
| 431 color: var(color-foreground); |
| 432 background: var(color-background); |
| 433 } |
| 434 .test-1 { |
| 435 color: var(c); |
| 436 } |
| 437 .test-2 { |
| 438 color: var(one); |
| 439 background: var(six); |
| 440 }'''; |
| 441 int testBitMap = 0; |
| 442 |
| 443 compileAndValidate(input, generated); |
| 444 |
| 445 var stylesheet = |
| 446 polyFillCompileCss(input, errors: errors..clear(), opts: options); |
| 447 |
| 448 expect(stylesheet != null, true); |
| 449 |
| 450 expect(errors.length, errorStrings.length, reason: errors.toString()); |
| 451 testBitMap = 0; |
| 452 |
| 453 outer: for (var error in errors) { |
| 454 var errorString = error.toString(); |
| 455 for (int i = 0; i < errorStrings.length; i++) { |
| 456 if (errorString == errorStrings[i]) { |
| 457 testBitMap |= 1 << i; |
| 458 continue outer; |
| 459 } |
| 460 } |
| 461 fail("Unexpected error string: $errorString"); |
| 462 } |
| 463 expect(testBitMap, equals((1 << errorStrings.length) - 1)); |
| 464 expect(prettyPrint(stylesheet), generatedPolyfill); |
| 465 } |
| 466 |
| 467 parserVar() { |
| 468 final input = ''':root { |
| 469 var-color-background: red; |
| 470 var-color-foreground: blue; |
| 471 |
| 472 var-c: #00ff00; |
| 473 var-b: var(c); |
| 474 var-a: var(b); |
| 475 |
| 476 var-image: url(test.png); |
| 477 |
| 478 var-b-width: 20cm; |
| 479 var-m-width: 33%; |
| 480 var-b-height: 30EM; |
| 481 var-width: .6in; |
| 482 var-length: 1.2in; |
| 483 var-web-stuff: -10Px; |
| 484 var-rgba: rgba(10,20,255); |
| 485 var-transition: color 0.4s; |
| 486 var-transform: rotate(20deg); |
| 487 var-content: "✔"; |
| 488 var-text-shadow: 0 -1px 0 #bfbfbf; |
| 489 var-font-family: Gentium; |
| 490 var-src: url("http://example.com/fonts/Gentium.ttf"); |
| 491 var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 492 var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 493 var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 494 var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| 495 } |
| 496 |
| 497 .testIt { |
| 498 color: var(color-foreground); |
| 499 background: var(c); |
| 500 background-image: var(image); |
| 501 |
| 502 border-width: var(b-width); |
| 503 margin-width: var(m-width); |
| 504 border-height: var(b-height); |
| 505 width: var(width); |
| 506 length: var(length); |
| 507 -web-stuff: var(web-stuff); |
| 508 background-color: var(rgba); |
| 509 |
| 510 transition: var(transition); |
| 511 transform: var(transform); |
| 512 content: var(content); |
| 513 text-shadow: var(text-shadow); |
| 514 } |
| 515 |
| 516 @font-face { |
| 517 font-family: var(font-family); |
| 518 src: var(src); |
| 519 unicode-range: var(unicode-range); |
| 520 } |
| 521 |
| 522 @font-face { |
| 523 font-family: var(font-family); |
| 524 src: var(src-1); |
| 525 unicode-range: var(unicode-range-1); |
| 526 } |
| 527 |
| 528 .foobar { |
| 529 grid-columns: var(grid-columns); |
| 530 } |
| 531 '''; |
| 532 |
| 533 final generated = ''':root { |
| 534 var-color-background: #f00; |
| 535 var-color-foreground: #00f; |
| 536 var-c: #0f0; |
| 537 var-b: var(c); |
| 538 var-a: var(b); |
| 539 var-image: url("test.png"); |
| 540 var-b-width: 20cm; |
| 541 var-m-width: 33%; |
| 542 var-b-height: 30em; |
| 543 var-width: .6in; |
| 544 var-length: 1.2in; |
| 545 var-web-stuff: -10px; |
| 546 var-rgba: rgba(10, 20, 255); |
| 547 var-transition: color 0.4s; |
| 548 var-transform: rotate(20deg); |
| 549 var-content: "✔"; |
| 550 var-text-shadow: 0 -1px 0 #bfbfbf; |
| 551 var-font-family: Gentium; |
| 552 var-src: url("http://example.com/fonts/Gentium.ttf"); |
| 553 var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 554 var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 555 var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 556 var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| 557 } |
| 558 .testIt { |
| 559 color: var(color-foreground); |
| 560 background: var(c); |
| 561 background-image: var(image); |
| 562 border-width: var(b-width); |
| 563 margin-width: var(m-width); |
| 564 border-height: var(b-height); |
| 565 width: var(width); |
| 566 length: var(length); |
| 567 -web-stuff: var(web-stuff); |
| 568 background-color: var(rgba); |
| 569 transition: var(transition); |
| 570 transform: var(transform); |
| 571 content: var(content); |
| 572 text-shadow: var(text-shadow); |
| 573 } |
| 574 @font-face { |
| 575 font-family: var(font-family); |
| 576 src: var(src); |
| 577 unicode-range: var(unicode-range); |
| 578 } |
| 579 @font-face { |
| 580 font-family: var(font-family); |
| 581 src: var(src-1); |
| 582 unicode-range: var(unicode-range-1); |
| 583 } |
| 584 .foobar { |
| 585 grid-columns: var(grid-columns); |
| 586 }'''; |
| 587 |
| 588 compileAndValidate(input, generated); |
| 589 |
| 590 var generatedPolyfill = r''':root { |
| 591 } |
| 592 .testIt { |
| 593 color: #00f; |
| 594 background: #0f0; |
| 595 background-image: url("test.png"); |
| 596 border-width: 20cm; |
| 597 margin-width: 33%; |
| 598 border-height: 30em; |
| 599 width: .6in; |
| 600 length: 1.2in; |
| 601 -web-stuff: -10px; |
| 602 background-color: rgba(10, 20, 255); |
| 603 transition: color 0.4s; |
| 604 transform: rotate(20deg); |
| 605 content: "✔"; |
| 606 text-shadow: 0 -1px 0 #bfbfbf; |
| 607 } |
| 608 @font-face { |
| 609 font-family: Gentium; |
| 610 src: url("http://example.com/fonts/Gentium.ttf"); |
| 611 unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| 612 } |
| 613 @font-face { |
| 614 font-family: Gentium; |
| 615 src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| 616 unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; |
| 617 } |
| 618 .foobar { |
| 619 grid-columns: 10px ("content" 1fr 10px) [4]; |
| 620 }'''; |
| 621 compilePolyfillAndValidate(input, generatedPolyfill); |
| 622 } |
| 623 |
| 624 testVar() { |
| 625 final errors = []; |
| 626 final input = ''' |
| 627 @color-background: red; |
| 628 @color-foreground: blue; |
| 629 |
| 630 .test { |
| 631 background-color: var(color-background); |
| 632 color: var(color-foreground); |
| 633 } |
| 634 '''; |
| 635 final generated = ''' |
| 636 var-color-background: #f00; |
| 637 var-color-foreground: #00f; |
| 638 |
| 639 .test { |
| 640 background-color: var(color-background); |
| 641 color: var(color-foreground); |
| 642 }'''; |
| 643 |
| 644 var stylesheet = parseCss(input, errors: errors, opts: simpleOptions); |
| 645 |
| 646 expect(stylesheet != null, true); |
| 647 expect(errors.isEmpty, true, reason: errors.toString()); |
| 648 expect(prettyPrint(stylesheet), generated); |
| 649 |
| 650 compileAndValidate(input, generated); |
| 651 |
| 652 final input2 = ''' |
| 653 @color-background: red; |
| 654 @color-foreground: blue; |
| 655 |
| 656 .test { |
| 657 background-color: @color-background; |
| 658 color: @color-foreground; |
| 659 } |
| 660 '''; |
| 661 final generated2 = '''var-color-background: #f00; |
| 662 var-color-foreground: #00f; |
| 663 |
| 664 .test { |
| 665 background-color: var(color-background); |
| 666 color: var(color-foreground); |
| 667 }'''; |
| 668 |
| 669 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); |
| 670 |
| 671 expect(stylesheet != null, true); |
| 672 expect(errors.isEmpty, true, reason: errors.toString()); |
| 673 expect(prettyPrint(stylesheet), generated2); |
| 674 |
| 675 compileAndValidate(input2, generated2); |
| 676 } |
| 677 |
| 678 testLess() { |
| 679 final errors = []; |
| 680 final input = ''' |
| 681 @color-background: red; |
| 682 @color-foreground: blue; |
| 683 |
| 684 .test { |
| 685 background-color: var(color-background); |
| 686 color: var(color-foreground); |
| 687 } |
| 688 '''; |
| 689 final generated = '''var-color-background: #f00; |
| 690 var-color-foreground: #00f; |
| 691 |
| 692 .test { |
| 693 background-color: var(color-background); |
| 694 color: var(color-foreground); |
| 695 }'''; |
| 696 |
| 697 var stylesheet = parseCss(input, errors: errors, opts: simpleOptions); |
| 698 |
| 699 expect(stylesheet != null, true); |
| 700 expect(errors.isEmpty, true, reason: errors.toString()); |
| 701 expect(prettyPrint(stylesheet), generated); |
| 702 |
| 703 compileAndValidate(input, generated); |
| 704 |
| 705 final input2 = ''' |
| 706 @color-background: red; |
| 707 @color-foreground: blue; |
| 708 |
| 709 .test { |
| 710 background-color: @color-background; |
| 711 color: @color-foreground; |
| 712 } |
| 713 '''; |
| 714 final generated2 = '''var-color-background: #f00; |
| 715 var-color-foreground: #00f; |
| 716 |
| 717 .test { |
| 718 background-color: var(color-background); |
| 719 color: var(color-foreground); |
| 720 }'''; |
| 721 |
| 722 stylesheet = parseCss(input, errors: errors..clear(), opts: simpleOptions); |
| 723 |
| 724 expect(stylesheet != null, true); |
| 725 expect(errors.isEmpty, true, reason: errors.toString()); |
| 726 expect(prettyPrint(stylesheet), generated2); |
| 727 |
| 728 compileAndValidate(input2, generated2); |
| 729 } |
| 730 |
| 731 void polyfill() { |
| 732 compilePolyfillAndValidate(r''' |
| 733 @color-background: red; |
| 734 @color-foreground: blue; |
| 735 .test { |
| 736 background-color: @color-background; |
| 737 color: @color-foreground; |
| 738 }''', r'''.test { |
| 739 background-color: #f00; |
| 740 color: #00f; |
| 741 }'''); |
| 742 } |
| 743 |
| 744 void testIndirects() { |
| 745 compilePolyfillAndValidate(''' |
| 746 :root { |
| 747 var-redef: #0f0; |
| 748 |
| 749 var-a1: #fff; |
| 750 var-a2: var(a1); |
| 751 var-a3: var(a2); |
| 752 |
| 753 var-redef: #000; |
| 754 } |
| 755 .test { |
| 756 background-color: @a1; |
| 757 color: @a2; |
| 758 border-color: @a3; |
| 759 } |
| 760 .test-1 { |
| 761 color: @redef; |
| 762 }''', r''':root { |
| 763 } |
| 764 .test { |
| 765 background-color: #fff; |
| 766 color: #fff; |
| 767 border-color: #fff; |
| 768 } |
| 769 .test-1 { |
| 770 color: #000; |
| 771 }'''); |
| 772 } |
| 773 |
| 774 void includes() { |
| 775 var errors = []; |
| 776 var file1Input = r''' |
| 777 :root { |
| 778 var-redef: #0f0; |
| 779 |
| 780 var-a1: #fff; |
| 781 var-a2: var(a1); |
| 782 var-a3: var(a2); |
| 783 |
| 784 var-redef: #000; |
| 785 } |
| 786 .test-1 { |
| 787 background-color: @a1; |
| 788 color: @a2; |
| 789 border-color: @a3; |
| 790 } |
| 791 .test-1a { |
| 792 color: @redef; |
| 793 } |
| 794 '''; |
| 795 |
| 796 var file2Input = r''' |
| 797 :root { |
| 798 var-redef: #0b0; |
| 799 var-b3: var(a3); |
| 800 } |
| 801 .test-2 { |
| 802 color: var(b3); |
| 803 background-color: var(redef); |
| 804 border-color: var(a3); |
| 805 } |
| 806 '''; |
| 807 |
| 808 var input = r''' |
| 809 :root { |
| 810 var-redef: #0c0; |
| 811 } |
| 812 .test-main { |
| 813 color: var(b3); |
| 814 background-color: var(redef); |
| 815 border-color: var(a3); |
| 816 } |
| 817 '''; |
| 818 |
| 819 var generated1 = r''':root { |
| 820 var-redef: #0f0; |
| 821 var-a1: #fff; |
| 822 var-a2: var(a1); |
| 823 var-a3: var(a2); |
| 824 var-redef: #000; |
| 825 } |
| 826 .test-1 { |
| 827 background-color: var(a1); |
| 828 color: var(a2); |
| 829 border-color: var(a3); |
| 830 } |
| 831 .test-1a { |
| 832 color: var(redef); |
| 833 }'''; |
| 834 |
| 835 var stylesheet1 = compileCss(file1Input, errors: errors, opts: options); |
| 836 expect(stylesheet1 != null, true); |
| 837 expect(errors.isEmpty, true, reason: errors.toString()); |
| 838 expect(prettyPrint(stylesheet1), generated1); |
| 839 |
| 840 var generated2 = r''':root { |
| 841 var-redef: #0b0; |
| 842 var-b3: var(a3); |
| 843 } |
| 844 .test-2 { |
| 845 color: var(b3); |
| 846 background-color: var(redef); |
| 847 border-color: var(a3); |
| 848 }'''; |
| 849 |
| 850 var stylesheet2 = compileCss(file2Input, |
| 851 includes: [stylesheet1], errors: errors..clear(), opts: options); |
| 852 expect(stylesheet2 != null, true); |
| 853 expect(errors.isEmpty, true, reason: errors.toString()); |
| 854 expect(prettyPrint(stylesheet2), generated2); |
| 855 |
| 856 var generatedPolyfill1 = r''':root { |
| 857 } |
| 858 .test-1 { |
| 859 background-color: #fff; |
| 860 color: #fff; |
| 861 border-color: #fff; |
| 862 } |
| 863 .test-1a { |
| 864 color: #000; |
| 865 }'''; |
| 866 var styleSheet1Polyfill = compileCss(file1Input, |
| 867 errors: errors..clear(), polyfill: true, opts: options); |
| 868 expect(styleSheet1Polyfill != null, true); |
| 869 expect(errors.isEmpty, true, reason: errors.toString()); |
| 870 expect(prettyPrint(styleSheet1Polyfill), generatedPolyfill1); |
| 871 |
| 872 var generatedPolyfill2 = r''':root { |
| 873 } |
| 874 .test-2 { |
| 875 color: #fff; |
| 876 background-color: #0b0; |
| 877 border-color: #fff; |
| 878 }'''; |
| 879 var styleSheet2Polyfill = compileCss(file2Input, |
| 880 includes: [stylesheet1], |
| 881 errors: errors..clear(), |
| 882 polyfill: true, |
| 883 opts: options); |
| 884 expect(styleSheet2Polyfill != null, true); |
| 885 expect(errors.isEmpty, true, reason: errors.toString()); |
| 886 expect(prettyPrint(styleSheet2Polyfill), generatedPolyfill2); |
| 887 |
| 888 // Make sure includes didn't change. |
| 889 expect(prettyPrint(stylesheet1), generated1); |
| 890 |
| 891 var generatedPolyfill = r''':root { |
| 892 } |
| 893 .test-main { |
| 894 color: #fff; |
| 895 background-color: #0c0; |
| 896 border-color: #fff; |
| 897 }'''; |
| 898 var stylesheetPolyfill = compileCss(input, |
| 899 includes: [stylesheet1, stylesheet2], |
| 900 errors: errors..clear(), |
| 901 polyfill: true, |
| 902 opts: options); |
| 903 |
| 904 expect(stylesheetPolyfill != null, true); |
| 905 expect(errors.isEmpty, true, reason: errors.toString()); |
| 906 expect(prettyPrint(stylesheetPolyfill), generatedPolyfill); |
| 907 |
| 908 // Make sure includes didn't change. |
| 909 expect(prettyPrint(stylesheet1), generated1); |
| 910 expect(prettyPrint(stylesheet2), generated2); |
| 911 } |
| 912 |
| 913 main() { |
| 914 test('Simple var', simpleVar); |
| 915 test('Expressions var', expressionsVar); |
| 916 test('Default value in var()', defaultVar); |
| 917 test('CSS Parser only var', parserVar); |
| 918 test('Var syntax', testVar); |
| 919 test('Indirects', testIndirects); |
| 920 test('Forward Refs', undefinedVars); |
| 921 test('Less syntax', testLess); |
| 922 test('Polyfill', polyfill); |
| 923 test('Multi-file', includes); |
| 924 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1400473008:
Roll Observatory packages and add a roll script (Closed)
Base URL: git@github.com:dart-lang/observatory_pub_packages.git@master