| 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 css_test; |
| 6 |
| 7 import 'package:unittest/compact_vm_config.dart'; |
| 8 import 'package:unittest/unittest.dart'; |
| 9 import 'package:polymer/src/messages.dart'; |
| 10 |
| 11 import 'testing.dart'; |
| 12 |
| 13 test_simple_var() { |
| 14 Map createFiles() { |
| 15 return { |
| 16 'index.html': |
| 17 '<!DOCTYPE html>' |
| 18 '<html lang="en">' |
| 19 '<head>' |
| 20 '<meta charset="utf-8">' |
| 21 '</head>' |
| 22 '<body>' |
| 23 '<style>' |
| 24 '@main_color: var(b);' |
| 25 '@b: var(c);' |
| 26 '@c: red;' |
| 27 '</style>' |
| 28 '<style>' |
| 29 '.test { color: var(main_color); }' |
| 30 '</style>' |
| 31 '<script type="application/dart">main() {}</script>' |
| 32 '</body>' |
| 33 '</html>', |
| 34 }; |
| 35 } |
| 36 |
| 37 var messages = new Messages.silent(); |
| 38 var compiler = createCompiler(createFiles(), messages, errors: true, |
| 39 scopedCss: true); |
| 40 |
| 41 compiler.run().then(expectAsync1((e) { |
| 42 MockFileSystem fs = compiler.fileSystem; |
| 43 expect(fs.readCount, equals({ |
| 44 'index.html': 1, |
| 45 }), reason: 'Actual:\n ${fs.readCount}'); |
| 46 |
| 47 var htmlInfo = compiler.info['index.html']; |
| 48 expect(htmlInfo.styleSheets.length, 2); |
| 49 expect(prettyPrintCss(htmlInfo.styleSheets[0]), ''); |
| 50 expect(prettyPrintCss(htmlInfo.styleSheets[1]), '.test { color: red; }'); |
| 51 |
| 52 var outputs = compiler.output.map((o) => o.path); |
| 53 expect(outputs, equals([ |
| 54 'out/index.html.dart', |
| 55 'out/index.html.dart.map', |
| 56 'out/index.html_bootstrap.dart', |
| 57 'out/index.html', |
| 58 ])); |
| 59 })); |
| 60 } |
| 61 |
| 62 test_var() { |
| 63 Map createFiles() { |
| 64 return { |
| 65 'index.html': |
| 66 '<!DOCTYPE html>' |
| 67 '<html lang="en">' |
| 68 '<head>' |
| 69 '<meta charset="utf-8">' |
| 70 '</head>' |
| 71 '<body>' |
| 72 '<style>' |
| 73 '@main-color: var(b);' |
| 74 '@b: var(c);' |
| 75 '@c: red;' |
| 76 '@d: var(main-color-1, green);' |
| 77 '@border-pen: solid;' |
| 78 '@inset: 5px;' |
| 79 '@frame-color: solid orange;' |
| 80 '@big-border: 2px 2px 2px;' |
| 81 '@border-stuff: 3px dashed var(main-color);' |
| 82 '@border-2: 3px var(big-border) dashed var(main-color-1, green);' |
| 83 '@blue-border: bold var(not-found, 1px 10px blue)' |
| 84 '</style>' |
| 85 '<style>' |
| 86 '.test-1 { color: var(main-color-1, blue); }' |
| 87 '.test-2 { color: var(main-color-1, var(main-color)); }' |
| 88 '.test-3 { color: var(d, yellow); }' |
| 89 '.test-4 { color: var(d-1, yellow); }' |
| 90 '.test-5 { color: var(d-1, var(d)); }' |
| 91 '.test-6 { border: var(inset) var(border-pen) var(d); }' |
| 92 '.test-7 { border: 10px var(border-pen) var(d); }' |
| 93 '.test-8 { border: 20px var(border-pen) yellow; }' |
| 94 '.test-9 { border: 30px dashed var(d); }' |
| 95 '.test-10 { border: 40px var(frame-color);}' |
| 96 '.test-11 { border: 40px var(frame-color-1, blue);}' |
| 97 '.test-12 { border: 40px var(frame-color-1, solid blue);}' |
| 98 '.test-13 {' |
| 99 'border: 40px var(x1, var(x2, var(x3, var(frame-color)));' |
| 100 '}' |
| 101 '.test-14 { border: 40px var(x1, var(frame-color); }' |
| 102 '.test-15 { border: 40px var(x1, solid blue);}' |
| 103 '.test-16 { border: 1px 1px 2px 3px var(frame-color);}' |
| 104 '.test-17 { border: 1px 1px 2px 3px var(x1, solid blue);}' |
| 105 '.test-18 { border: 1px 1px 2px var(border-stuff);}' |
| 106 '.test-19 { border: var(big-border) var(border-stuff);}' |
| 107 '.test-20 { border: var(border-2);}' |
| 108 '.test-21 { border: var(blue-border);}' |
| 109 '</style>' |
| 110 '<script type="application/dart">main() {}</script>' |
| 111 '</body>' |
| 112 '</html>', |
| 113 }; |
| 114 } |
| 115 |
| 116 var messages = new Messages.silent(); |
| 117 var compiler = createCompiler(createFiles(), messages, errors: true, |
| 118 scopedCss: true); |
| 119 |
| 120 compiler.run().then(expectAsync1((e) { |
| 121 MockFileSystem fs = compiler.fileSystem; |
| 122 expect(fs.readCount, equals({ |
| 123 'index.html': 1, |
| 124 }), reason: 'Actual:\n ${fs.readCount}'); |
| 125 |
| 126 var htmlInfo = compiler.info['index.html']; |
| 127 expect(htmlInfo.styleSheets.length, 2); |
| 128 expect(prettyPrintCss(htmlInfo.styleSheets[0]), ''); |
| 129 expect(prettyPrintCss(htmlInfo.styleSheets[1]), |
| 130 '.test-1 { color: blue; } ' |
| 131 '.test-2 { color: red; } ' |
| 132 '.test-3 { color: green; } ' |
| 133 '.test-4 { color: yellow; } ' |
| 134 '.test-5 { color: green; } ' |
| 135 '.test-6 { border: 5px solid green; } ' |
| 136 '.test-7 { border: 10px solid green; } ' |
| 137 '.test-8 { border: 20px solid yellow; } ' |
| 138 '.test-9 { border: 30px dashed green; } ' |
| 139 '.test-10 { border: 40px solid orange; } ' |
| 140 '.test-11 { border: 40px blue; } ' |
| 141 '.test-12 { border: 40px solid blue; } ' |
| 142 '.test-13 { border: 40px solid orange; } ' |
| 143 '.test-14 { border: 40px solid orange; } ' |
| 144 '.test-15 { border: 40px solid blue; } ' |
| 145 '.test-16 { border: 1px 1px 2px 3px solid orange; } ' |
| 146 '.test-17 { border: 1px 1px 2px 3px solid blue; } ' |
| 147 '.test-18 { border: 1px 1px 2px 3px dashed red; } ' |
| 148 '.test-19 { border: 2px 2px 2px 3px dashed red; } ' |
| 149 '.test-20 { border: 3px 2px 2px 2px dashed green; } ' |
| 150 '.test-21 { border: bold 1px 10px blue; }'); |
| 151 var outputs = compiler.output.map((o) => o.path); |
| 152 expect(outputs, equals([ |
| 153 'out/index.html.dart', |
| 154 'out/index.html.dart.map', |
| 155 'out/index.html_bootstrap.dart', |
| 156 'out/index.html', |
| 157 ])); |
| 158 })); |
| 159 } |
| 160 |
| 161 test_simple_import() { |
| 162 Map createFiles() { |
| 163 return { |
| 164 'foo.css': r'''@main_color: var(b); |
| 165 @b: var(c); |
| 166 @c: red;''', |
| 167 'index.html': |
| 168 '<!DOCTYPE html>' |
| 169 '<html lang="en">' |
| 170 '<head>' |
| 171 '<meta charset="utf-8">' |
| 172 '</head>' |
| 173 '<body>' |
| 174 '<style>' |
| 175 '@import "foo.css";' |
| 176 '.test { color: var(main_color); }' |
| 177 '</style>' |
| 178 '<script type="application/dart">main() {}</script>' |
| 179 '</body>' |
| 180 '</html>', |
| 181 }; |
| 182 } |
| 183 |
| 184 var messages = new Messages.silent(); |
| 185 var compiler = createCompiler(createFiles(), messages, errors: true, |
| 186 scopedCss: true); |
| 187 |
| 188 compiler.run().then(expectAsync1((e) { |
| 189 MockFileSystem fs = compiler.fileSystem; |
| 190 expect(fs.readCount, equals({ |
| 191 'foo.css': 1, |
| 192 'index.html': 1, |
| 193 }), reason: 'Actual:\n ${fs.readCount}'); |
| 194 |
| 195 var cssInfo = compiler.info['foo.css']; |
| 196 expect(cssInfo.styleSheets.length, 1); |
| 197 expect(prettyPrintCss(cssInfo.styleSheets[0]), ''); |
| 198 |
| 199 var htmlInfo = compiler.info['index.html']; |
| 200 expect(htmlInfo.styleSheets.length, 1); |
| 201 expect(prettyPrintCss(htmlInfo.styleSheets[0]), |
| 202 '@import url(foo.css); .test { color: red; }'); |
| 203 |
| 204 var outputs = compiler.output.map((o) => o.path); |
| 205 expect(outputs, equals([ |
| 206 'out/index.html.dart', |
| 207 'out/index.html.dart.map', |
| 208 'out/index.html_bootstrap.dart', |
| 209 'out/foo.css', |
| 210 'out/index.html', |
| 211 ])); |
| 212 })); |
| 213 } |
| 214 |
| 215 test_imports() { |
| 216 Map createFiles() { |
| 217 return { |
| 218 'first.css': |
| 219 '@import "third.css";' |
| 220 '@main-width: var(main-width-b);' |
| 221 '@main-width-b: var(main-width-c);' |
| 222 '@main-width-c: var(wide-width);', |
| 223 'second.css': |
| 224 '@import "fourth.css";' |
| 225 '@main-color: var(main-color-b);' |
| 226 '@main-color-b: var(main-color-c);' |
| 227 '@main-color-c: var(color-value);', |
| 228 'third.css': |
| 229 '@wide-width: var(wide-width-b);' |
| 230 '@wide-width-b: var(wide-width-c);' |
| 231 '@wide-width-c: 100px;', |
| 232 'fourth.css': |
| 233 '@color-value: var(color-value-b);' |
| 234 '@color-value-b: var(color-value-c);' |
| 235 '@color-value-c: red;', |
| 236 'index.html': |
| 237 '<!DOCTYPE html>' |
| 238 '<html lang="en">' |
| 239 '<head>' |
| 240 '<meta charset="utf-8">' |
| 241 '<link rel="stylesheet" href="first.css">' |
| 242 '</head>' |
| 243 '<body>' |
| 244 '<style>' |
| 245 '@import "first.css";' |
| 246 '@import "second.css";' |
| 247 '.test-1 { color: var(main-color); }' |
| 248 '.test-2 { width: var(main-width); }' |
| 249 '</style>' |
| 250 '<script type="application/dart">main() {}</script>' |
| 251 '</body>' |
| 252 '</html>', |
| 253 }; |
| 254 } |
| 255 |
| 256 var messages = new Messages.silent(); |
| 257 var compiler = createCompiler(createFiles(), messages, errors: true, |
| 258 scopedCss: true); |
| 259 |
| 260 compiler.run().then(expectAsync1((e) { |
| 261 MockFileSystem fs = compiler.fileSystem; |
| 262 expect(fs.readCount, equals({ |
| 263 'first.css': 1, |
| 264 'second.css': 1, |
| 265 'third.css': 1, |
| 266 'fourth.css': 1, |
| 267 'index.html': 1, |
| 268 }), reason: 'Actual:\n ${fs.readCount}'); |
| 269 |
| 270 var firstInfo = compiler.info['first.css']; |
| 271 expect(firstInfo.styleSheets.length, 1); |
| 272 expect(prettyPrintCss(firstInfo.styleSheets[0]), '@import url(third.css);'); |
| 273 |
| 274 var secondInfo = compiler.info['second.css']; |
| 275 expect(secondInfo.styleSheets.length, 1); |
| 276 expect(prettyPrintCss(secondInfo.styleSheets[0]), |
| 277 '@import url(fourth.css);'); |
| 278 |
| 279 var thirdInfo = compiler.info['third.css']; |
| 280 expect(thirdInfo.styleSheets.length, 1); |
| 281 expect(prettyPrintCss(thirdInfo.styleSheets[0]), ''); |
| 282 |
| 283 var fourthInfo = compiler.info['fourth.css']; |
| 284 expect(fourthInfo.styleSheets.length, 1); |
| 285 expect(prettyPrintCss(fourthInfo.styleSheets[0]), ''); |
| 286 |
| 287 var htmlInfo = compiler.info['index.html']; |
| 288 expect(htmlInfo.styleSheets.length, 1); |
| 289 expect(prettyPrintCss(htmlInfo.styleSheets[0]), |
| 290 '@import url(first.css); ' |
| 291 '@import url(second.css); ' |
| 292 '.test-1 { color: red; } ' |
| 293 '.test-2 { width: 100px; }'); |
| 294 |
| 295 var outputs = compiler.output.map((o) => o.path); |
| 296 expect(outputs, equals([ |
| 297 'out/index.html.dart', |
| 298 'out/index.html.dart.map', |
| 299 'out/index.html_bootstrap.dart', |
| 300 'out/first.css', |
| 301 'out/second.css', |
| 302 'out/third.css', |
| 303 'out/fourth.css', |
| 304 'out/index.html', |
| 305 ])); |
| 306 })); |
| 307 } |
| 308 |
| 309 test_component_var() { |
| 310 Map createFiles() { |
| 311 return { |
| 312 'index.html': '<!DOCTYPE html>' |
| 313 '<html lang="en">' |
| 314 '<head>' |
| 315 '<meta charset="utf-8">' |
| 316 '<link rel="import" href="foo.html">' |
| 317 '</head>' |
| 318 '<body>' |
| 319 '<x-foo></x-foo>' |
| 320 '<script type="application/dart">main() {}</script>' |
| 321 '</body>' |
| 322 '</html>', |
| 323 'foo.html': '<!DOCTYPE html>' |
| 324 '<html lang="en">' |
| 325 '<head>' |
| 326 '<meta charset="utf-8">' |
| 327 '</head>' |
| 328 '<body>' |
| 329 '<polymer-element name="x-foo" constructor="Foo">' |
| 330 '<template>' |
| 331 '<style scoped>' |
| 332 '@import "foo.css";' |
| 333 '.main { color: var(main_color); }' |
| 334 '.test-background { ' |
| 335 'background: url(http://www.foo.com/bar.png);' |
| 336 '}' |
| 337 '</style>' |
| 338 '</template>' |
| 339 '</polymer-element>' |
| 340 '</body>' |
| 341 '</html>', |
| 342 'foo.css': r'''@main_color: var(b); |
| 343 @b: var(c); |
| 344 @c: red; |
| 345 |
| 346 @one: var(two); |
| 347 @two: var(one); |
| 348 |
| 349 @four: var(five); |
| 350 @five: var(six); |
| 351 @six: var(four); |
| 352 |
| 353 @def-1: var(def-2); |
| 354 @def-2: var(def-3); |
| 355 @def-3: var(def-2);''', |
| 356 }; |
| 357 } |
| 358 |
| 359 test('var- and Less @define', () { |
| 360 var messages = new Messages.silent(); |
| 361 var compiler = createCompiler(createFiles(), messages, errors: true, |
| 362 scopedCss: true); |
| 363 |
| 364 compiler.run().then(expectAsync1((e) { |
| 365 MockFileSystem fs = compiler.fileSystem; |
| 366 expect(fs.readCount, equals({ |
| 367 'index.html': 1, |
| 368 'foo.html': 1, |
| 369 'foo.css': 1 |
| 370 }), reason: 'Actual:\n ${fs.readCount}'); |
| 371 |
| 372 var cssInfo = compiler.info['foo.css']; |
| 373 expect(cssInfo.styleSheets.length, 1); |
| 374 var htmlInfo = compiler.info['foo.html']; |
| 375 expect(htmlInfo.styleSheets.length, 0); |
| 376 expect(htmlInfo.declaredComponents.length, 1); |
| 377 expect(htmlInfo.declaredComponents[0].styleSheets.length, 1); |
| 378 |
| 379 var outputs = compiler.output.map((o) => o.path); |
| 380 expect(outputs, equals([ |
| 381 'out/foo.html.dart', |
| 382 'out/foo.html.dart.map', |
| 383 'out/index.html.dart', |
| 384 'out/index.html.dart.map', |
| 385 'out/index.html_bootstrap.dart', |
| 386 'out/foo.css', |
| 387 'out/index.html.css', |
| 388 'out/index.html', |
| 389 ])); |
| 390 |
| 391 for (var file in compiler.output) { |
| 392 if (file.path == 'out/index.html.css') { |
| 393 expect(file.contents, |
| 394 '/* Auto-generated from components style tags. */\n' |
| 395 '/* DO NOT EDIT. */\n\n' |
| 396 '/* ==================================================== \n' |
| 397 ' Component x-foo stylesheet \n' |
| 398 ' ==================================================== */\n' |
| 399 '@import "foo.css";\n' |
| 400 '[is="x-foo"] .main {\n' |
| 401 ' color: #f00;\n' |
| 402 '}\n' |
| 403 '[is="x-foo"] .test-background {\n' |
| 404 ' background: url("http://www.foo.com/bar.png");\n' |
| 405 '}\n\n'); |
| 406 } else if (file.path == 'out/foo.css') { |
| 407 expect(file.contents, |
| 408 '/* Auto-generated from style sheet href = foo.css */\n' |
| 409 '/* DO NOT EDIT. */\n\n\n\n'); |
| 410 } |
| 411 } |
| 412 |
| 413 // Check for warning messages about var- cycles. |
| 414 expect(messages.messages.length, 8); |
| 415 |
| 416 var errorMessage = messages.messages[0]; |
| 417 expect(errorMessage.message, contains('var cycle detected var-def-1')); |
| 418 expect(errorMessage.span, isNotNull); |
| 419 expect(errorMessage.span.start.line, 11); |
| 420 expect(errorMessage.span.start.column, 22); |
| 421 expect(errorMessage.span.text, '@def-1: var(def-2)'); |
| 422 |
| 423 errorMessage = messages.messages[1]; |
| 424 expect(errorMessage.message, contains('var cycle detected var-five')); |
| 425 expect(errorMessage.span, isNotNull); |
| 426 expect(errorMessage.span.start.line, 8); |
| 427 expect(errorMessage.span.start.column, 22); |
| 428 expect(errorMessage.span.text, '@five: var(six)'); |
| 429 |
| 430 errorMessage = messages.messages[2]; |
| 431 expect(errorMessage.message, contains('var cycle detected var-six')); |
| 432 expect(errorMessage.span, isNotNull); |
| 433 expect(errorMessage.span.start.line, 9); |
| 434 expect(errorMessage.span.start.column, 22); |
| 435 expect(errorMessage.span.text, '@six: var(four)'); |
| 436 |
| 437 errorMessage = messages.messages[3]; |
| 438 expect(errorMessage.message, contains('var cycle detected var-def-3')); |
| 439 expect(errorMessage.span, isNotNull); |
| 440 expect(errorMessage.span.start.line, 13); |
| 441 expect(errorMessage.span.start.column, 22); |
| 442 expect(errorMessage.span.text, '@def-3: var(def-2)'); |
| 443 |
| 444 errorMessage = messages.messages[4]; |
| 445 expect(errorMessage.message, contains('var cycle detected var-two')); |
| 446 expect(errorMessage.span, isNotNull); |
| 447 expect(errorMessage.span.start.line, 5); |
| 448 expect(errorMessage.span.start.column, 22); |
| 449 expect(errorMessage.span.text, '@two: var(one)'); |
| 450 |
| 451 errorMessage = messages.messages[5]; |
| 452 expect(errorMessage.message, contains('var cycle detected var-def-2')); |
| 453 expect(errorMessage.span, isNotNull); |
| 454 expect(errorMessage.span.start.line, 12); |
| 455 expect(errorMessage.span.start.column, 22); |
| 456 expect(errorMessage.span.text, '@def-2: var(def-3)'); |
| 457 |
| 458 errorMessage = messages.messages[6]; |
| 459 expect(errorMessage.message, contains('var cycle detected var-one')); |
| 460 expect(errorMessage.span, isNotNull); |
| 461 expect(errorMessage.span.start.line, 4); |
| 462 expect(errorMessage.span.start.column, 22); |
| 463 expect(errorMessage.span.text, '@one: var(two)'); |
| 464 |
| 465 errorMessage = messages.messages[7]; |
| 466 expect(errorMessage.message, contains('var cycle detected var-four')); |
| 467 expect(errorMessage.span, isNotNull); |
| 468 expect(errorMessage.span.start.line, 7); |
| 469 expect(errorMessage.span.start.column, 22); |
| 470 expect(errorMessage.span.text, '@four: var(five)'); |
| 471 })); |
| 472 }); |
| 473 } |
| 474 |
| 475 test_pseudo_element() { |
| 476 var messages = new Messages.silent(); |
| 477 var compiler = createCompiler({ |
| 478 'index.html': '<head>' |
| 479 '<link rel="import" href="foo.html">' |
| 480 '<style>' |
| 481 '.test::x-foo { background-color: red; }' |
| 482 '.test::x-foo1 { color: blue; }' |
| 483 '.test::x-foo2 { color: green; }' |
| 484 '</style>' |
| 485 '<body>' |
| 486 '<x-foo class=test></x-foo>' |
| 487 '<x-foo></x-foo>' |
| 488 '<script type="application/dart">main() {}</script>', |
| 489 'foo.html': '<head>' |
| 490 '<body><polymer-element name="x-foo" constructor="Foo">' |
| 491 '<template>' |
| 492 '<div pseudo="x-foo">' |
| 493 '<div>Test</div>' |
| 494 '</div>' |
| 495 '<div pseudo="x-foo1 x-foo2">' |
| 496 '<div>Test</div>' |
| 497 '</div>' |
| 498 '</template>', |
| 499 }, messages, scopedCss: true); |
| 500 |
| 501 compiler.run().then(expectAsync1((e) { |
| 502 MockFileSystem fs = compiler.fileSystem; |
| 503 expect(fs.readCount, equals({ |
| 504 'index.html': 1, |
| 505 'foo.html': 1, |
| 506 }), reason: 'Actual:\n ${fs.readCount}'); |
| 507 |
| 508 var outputs = compiler.output.map((o) => o.path); |
| 509 expect(outputs, equals([ |
| 510 'out/foo.html.dart', |
| 511 'out/foo.html.dart.map', |
| 512 'out/index.html.dart', |
| 513 'out/index.html.dart.map', |
| 514 'out/index.html_bootstrap.dart', |
| 515 'out/index.html', |
| 516 ])); |
| 517 expect(compiler.output.last.contents, contains( |
| 518 '<div pseudo="x-foo_0">' |
| 519 '<div>Test</div>' |
| 520 '</div>' |
| 521 '<div pseudo="x-foo1_1 x-foo2_2">' |
| 522 '<div>Test</div>' |
| 523 '</div>')); |
| 524 expect(compiler.output.last.contents, contains( |
| 525 '<style>.test > *[pseudo="x-foo_0"] {\n' |
| 526 ' background-color: #f00;\n' |
| 527 '}\n' |
| 528 '.test > *[pseudo="x-foo1_1"] {\n' |
| 529 ' color: #00f;\n' |
| 530 '}\n' |
| 531 '.test > *[pseudo="x-foo2_2"] {\n' |
| 532 ' color: #008000;\n' |
| 533 '}' |
| 534 '</style>')); |
| 535 })); |
| 536 } |
| 537 |
| 538 main() { |
| 539 useCompactVMConfiguration(); |
| 540 |
| 541 test('test_simple_var', test_simple_var); |
| 542 test('test_var', test_var); |
| 543 test('test_simple_import', test_simple_import); |
| 544 test('test_imports', test_imports); |
| 545 test('test_component_var', test_component_var); |
| 546 test('test_pseudo_element', test_pseudo_element); |
| 547 } |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 23224003:
move polymer.dart into dart svn (Closed)
Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart