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