| // Copyright (c) 2013, the Dart project authors. Please see the AUTHORS file |
| // for details. All rights reserved. Use of this source code is governed by a |
| // BSD-style license that can be found in the LICENSE file. |
| |
| library var_test; |
| |
| import 'package:unittest/unittest.dart'; |
| import 'testing.dart'; |
| |
| List options = ['--no-colors', '--warnings_as_errors', 'memory']; |
| |
| compileAndValidate(String input, String generated) { |
| var errors = []; |
| var stylesheet = compileCss(input, errors: errors, opts: options); |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated); |
| } |
| |
| compilePolyfillAndValidate(String input, String generated) { |
| var errors = []; |
| var stylesheet = polyFillCompileCss(input, errors: errors, opts: options); |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated); |
| } |
| |
| void simpleVar() { |
| final input = ''':root { |
| var-color-background: red; |
| var-color-foreground: blue; |
| |
| var-c: #00ff00; |
| var-b: var(c); |
| var-a: var(b); |
| } |
| .testIt { |
| color: var(color-foreground); |
| background: var(color-background); |
| } |
| '''; |
| |
| final generated = ''':root { |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| var-c: #0f0; |
| var-b: var(c); |
| var-a: var(b); |
| } |
| .testIt { |
| color: var(color-foreground); |
| background: var(color-background); |
| }'''; |
| |
| final generatedPolyfill = ''':root { |
| } |
| .testIt { |
| color: #00f; |
| background: #f00; |
| }'''; |
| |
| compileAndValidate(input, generated); |
| compilePolyfillAndValidate(input, generatedPolyfill); |
| } |
| |
| void expressionsVar() { |
| final errors = []; |
| final input = ''':root { |
| var-color-background: red; |
| var-color-foreground: blue; |
| |
| var-c: #00ff00; |
| var-b: var(c); |
| var-a: var(b); |
| |
| var-image: url(test.png); |
| |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30EM; |
| var-width: .6in; |
| var-length: 1.2in; |
| var-web-stuff: -10Px; |
| var-rgba: rgba(10,20,255); |
| var-transition: color 0.4s; |
| var-transform: rotate(20deg); |
| var-content: "✔"; |
| var-text-shadow: 0 -1px 0 #bfbfbf; |
| var-font-family: Gentium; |
| var-src: url("http://example.com/fonts/Gentium.ttf"); |
| var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| } |
| |
| .testIt { |
| color: var(color-foreground); |
| background: var(c); |
| background-image: var(image); |
| |
| border-width: var(b-width); |
| margin-width: var(m-width); |
| border-height: var(b-height); |
| width: var(width); |
| length: var(length); |
| -web-stuff: var(web-stuff); |
| background-color: var(rgba); |
| |
| transition: var(transition); |
| transform: var(transform); |
| content: var(content); |
| text-shadow: var(text-shadow); |
| } |
| |
| @font-face { |
| font-family: var(font-family); |
| src: var(src); |
| unicode-range: var(unicode-range); |
| } |
| |
| @font-face { |
| font-family: var(font-family); |
| src: var(src-1); |
| unicode-range: var(unicode-range-1); |
| } |
| |
| .foobar { |
| grid-columns: var(grid-columns); |
| } |
| '''; |
| |
| final generated = ''':root { |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| var-c: #0f0; |
| var-b: var(c); |
| var-a: var(b); |
| var-image: url("test.png"); |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30em; |
| var-width: .6in; |
| var-length: 1.2in; |
| var-web-stuff: -10px; |
| var-rgba: rgba(10, 20, 255); |
| var-transition: color 0.4s; |
| var-transform: rotate(20deg); |
| var-content: "✔"; |
| var-text-shadow: 0 -1px 0 #bfbfbf; |
| var-font-family: Gentium; |
| var-src: url("http://example.com/fonts/Gentium.ttf"); |
| var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| } |
| .testIt { |
| color: var(color-foreground); |
| background: var(c); |
| background-image: var(image); |
| border-width: var(b-width); |
| margin-width: var(m-width); |
| border-height: var(b-height); |
| width: var(width); |
| length: var(length); |
| -web-stuff: var(web-stuff); |
| background-color: var(rgba); |
| transition: var(transition); |
| transform: var(transform); |
| content: var(content); |
| text-shadow: var(text-shadow); |
| } |
| @font-face { |
| font-family: var(font-family); |
| src: var(src); |
| unicode-range: var(unicode-range); |
| } |
| @font-face { |
| font-family: var(font-family); |
| src: var(src-1); |
| unicode-range: var(unicode-range-1); |
| } |
| .foobar { |
| grid-columns: var(grid-columns); |
| }'''; |
| |
| compileAndValidate(input, generated); |
| |
| var generatedPolyfill = r''':root { |
| } |
| .testIt { |
| color: #00f; |
| background: #0f0; |
| background-image: url("test.png"); |
| border-width: 20cm; |
| margin-width: 33%; |
| border-height: 30em; |
| width: .6in; |
| length: 1.2in; |
| -web-stuff: -10px; |
| background-color: rgba(10, 20, 255); |
| transition: color 0.4s; |
| transform: rotate(20deg); |
| content: "✔"; |
| text-shadow: 0 -1px 0 #bfbfbf; |
| } |
| @font-face { |
| font-family: Gentium; |
| src: url("http://example.com/fonts/Gentium.ttf"); |
| unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| } |
| @font-face { |
| font-family: Gentium; |
| src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; |
| } |
| .foobar { |
| grid-columns: 10px ("content" 1fr 10px) [4]; |
| }'''; |
| |
| compilePolyfillAndValidate(input, generatedPolyfill); |
| } |
| |
| void defaultVar() { |
| final errors = []; |
| final input = ''' |
| :root { |
| var-color-background: red; |
| var-color-foreground: blue; |
| |
| var-a: var(b, #0a0); |
| var-b: var(c, #0b0); |
| var-c: #00ff00; |
| |
| var-image: url(test.png); |
| |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30EM; |
| } |
| |
| .test { |
| background-color: var(test, orange); |
| } |
| |
| body { |
| background: var(a) var(image) no-repeat right top; |
| } |
| |
| div { |
| background: var(color-background) url('img_tree.png') no-repeat right top; |
| } |
| |
| .test-2 { |
| background: var(color-background) var(image-2, url('img_1.png')) |
| no-repeat right top; |
| } |
| |
| .test-3 { |
| background: var(color-background) var(image) no-repeat right top; |
| } |
| |
| .test-4 { |
| background: #ffff00 var(image) no-repeat right top; |
| } |
| |
| .test-5 { |
| background: var(test-color, var(a)) var(image) no-repeat right top; |
| } |
| |
| .test-6 { |
| border: red var(a-1, solid 20px); |
| } |
| '''; |
| |
| final generated = ''':root { |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| var-a: var(b, #0a0); |
| var-b: var(c, #0b0); |
| var-c: #0f0; |
| var-image: url("test.png"); |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30em; |
| } |
| .test { |
| background-color: var(test, #ffa500); |
| } |
| body { |
| background: var(a) var(image) no-repeat right top; |
| } |
| div { |
| background: var(color-background) url("img_tree.png") no-repeat right top; |
| } |
| .test-2 { |
| background: var(color-background) var(image-2, url("img_1.png")) no-repeat right top; |
| } |
| .test-3 { |
| background: var(color-background) var(image) no-repeat right top; |
| } |
| .test-4 { |
| background: #ff0 var(image) no-repeat right top; |
| } |
| .test-5 { |
| background: var(test-color, var(a)) var(image) no-repeat right top; |
| } |
| .test-6 { |
| border: #f00 var(a-1, solid 20px); |
| }'''; |
| |
| compileAndValidate(input, generated); |
| |
| var generatedPolyfill = r''':root { |
| } |
| .test { |
| background-color: #ffa500; |
| } |
| body { |
| background: #0a0 url("test.png") no-repeat right top; |
| } |
| div { |
| background: #f00 url("img_tree.png") no-repeat right top; |
| } |
| .test-2 { |
| background: #f00 url("img_1.png") no-repeat right top; |
| } |
| .test-3 { |
| background: #f00 url("test.png") no-repeat right top; |
| } |
| .test-4 { |
| background: #ff0 url("test.png") no-repeat right top; |
| } |
| .test-5 { |
| background: #0a0 url("test.png") no-repeat right top; |
| } |
| .test-6 { |
| border: #f00 solid 20px; |
| }'''; |
| |
| compilePolyfillAndValidate(input, generatedPolyfill); |
| } |
| |
| void undefinedVars() { |
| final errors = []; |
| final input = ''':root { |
| var-color-background: red; |
| var-color-foreground: blue; |
| |
| var-a: var(b); |
| var-b: var(c); |
| var-c: #00ff00; |
| |
| var-one: var(two); |
| var-two: var(one); |
| |
| var-four: var(five); |
| var-five: var(six); |
| var-six: var(four); |
| |
| var-def-1: var(def-2); |
| var-def-2: var(def-3); |
| var-def-3: var(def-2); |
| } |
| |
| .testIt { |
| color: var(color-foreground); |
| background: var(color-background); |
| } |
| .test-1 { |
| color: var(c); |
| } |
| .test-2 { |
| color: var(one); |
| background: var(six); |
| } |
| '''; |
| |
| final generatedPolyfill = ''':root { |
| } |
| .testIt { |
| color: #00f; |
| background: #f00; |
| } |
| .test-1 { |
| color: #0f0; |
| } |
| .test-2 { |
| color: ; |
| background: ; |
| }'''; |
| |
| var errorStrings = [ |
| 'error :5:14: Variable is not defined.\n' |
| ' var-a: var(b);\n' |
| ' ^^', |
| 'error :6:14: Variable is not defined.\n' |
| ' var-b: var(c);\n' |
| ' ^^', |
| 'error :9:16: Variable is not defined.\n' |
| ' var-one: var(two);\n' |
| ' ^^^^', |
| 'error :12:17: Variable is not defined.\n' |
| ' var-four: var(five);\n' |
| ' ^^^^^', |
| 'error :13:17: Variable is not defined.\n' |
| ' var-five: var(six);\n' |
| ' ^^^^', |
| 'error :16:18: Variable is not defined.\n' |
| ' var-def-1: var(def-2);\n' |
| ' ^^^^^^', |
| 'error :17:18: Variable is not defined.\n' |
| ' var-def-2: var(def-3);\n' |
| ' ^^^^^^', |
| ]; |
| |
| var generated = r''':root { |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| var-a: var(b); |
| var-b: var(c); |
| var-c: #0f0; |
| var-one: var(two); |
| var-two: var(one); |
| var-four: var(five); |
| var-five: var(six); |
| var-six: var(four); |
| var-def-1: var(def-2); |
| var-def-2: var(def-3); |
| var-def-3: var(def-2); |
| } |
| .testIt { |
| color: var(color-foreground); |
| background: var(color-background); |
| } |
| .test-1 { |
| color: var(c); |
| } |
| .test-2 { |
| color: var(one); |
| background: var(six); |
| }'''; |
| int testBitMap = 0; |
| |
| compileAndValidate(input, generated); |
| |
| var stylesheet = polyFillCompileCss(input, errors: errors..clear(), |
| opts: options); |
| |
| expect(stylesheet != null, true); |
| |
| expect(errors.length, errorStrings.length, reason: errors.toString()); |
| testBitMap = 0; |
| |
| outer: for (var error in errors) { |
| var errorString = error.toString(); |
| for (int i = 0; i < errorStrings.length; i++) { |
| if (errorString == errorStrings[i]) { |
| testBitMap |= 1 << i; |
| continue outer; |
| } |
| } |
| fail("Unexpected error string: $errorString"); |
| } |
| expect(testBitMap, equals((1 << errorStrings.length) - 1)); |
| expect(prettyPrint(stylesheet), generatedPolyfill); |
| } |
| |
| parserVar() { |
| final input = ''':root { |
| var-color-background: red; |
| var-color-foreground: blue; |
| |
| var-c: #00ff00; |
| var-b: var(c); |
| var-a: var(b); |
| |
| var-image: url(test.png); |
| |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30EM; |
| var-width: .6in; |
| var-length: 1.2in; |
| var-web-stuff: -10Px; |
| var-rgba: rgba(10,20,255); |
| var-transition: color 0.4s; |
| var-transform: rotate(20deg); |
| var-content: "✔"; |
| var-text-shadow: 0 -1px 0 #bfbfbf; |
| var-font-family: Gentium; |
| var-src: url("http://example.com/fonts/Gentium.ttf"); |
| var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| } |
| |
| .testIt { |
| color: var(color-foreground); |
| background: var(c); |
| background-image: var(image); |
| |
| border-width: var(b-width); |
| margin-width: var(m-width); |
| border-height: var(b-height); |
| width: var(width); |
| length: var(length); |
| -web-stuff: var(web-stuff); |
| background-color: var(rgba); |
| |
| transition: var(transition); |
| transform: var(transform); |
| content: var(content); |
| text-shadow: var(text-shadow); |
| } |
| |
| @font-face { |
| font-family: var(font-family); |
| src: var(src); |
| unicode-range: var(unicode-range); |
| } |
| |
| @font-face { |
| font-family: var(font-family); |
| src: var(src-1); |
| unicode-range: var(unicode-range-1); |
| } |
| |
| .foobar { |
| grid-columns: var(grid-columns); |
| } |
| '''; |
| |
| final generated = ''':root { |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| var-c: #0f0; |
| var-b: var(c); |
| var-a: var(b); |
| var-image: url("test.png"); |
| var-b-width: 20cm; |
| var-m-width: 33%; |
| var-b-height: 30em; |
| var-width: .6in; |
| var-length: 1.2in; |
| var-web-stuff: -10px; |
| var-rgba: rgba(10, 20, 255); |
| var-transition: color 0.4s; |
| var-transform: rotate(20deg); |
| var-content: "✔"; |
| var-text-shadow: 0 -1px 0 #bfbfbf; |
| var-font-family: Gentium; |
| var-src: url("http://example.com/fonts/Gentium.ttf"); |
| var-src-1: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| var-unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| var-unicode-range-1: U+0A-FF, U+980-9FF, U+????, U+3???; |
| var-grid-columns: 10px ("content" 1fr 10px) [4]; |
| } |
| .testIt { |
| color: var(color-foreground); |
| background: var(c); |
| background-image: var(image); |
| border-width: var(b-width); |
| margin-width: var(m-width); |
| border-height: var(b-height); |
| width: var(width); |
| length: var(length); |
| -web-stuff: var(web-stuff); |
| background-color: var(rgba); |
| transition: var(transition); |
| transform: var(transform); |
| content: var(content); |
| text-shadow: var(text-shadow); |
| } |
| @font-face { |
| font-family: var(font-family); |
| src: var(src); |
| unicode-range: var(unicode-range); |
| } |
| @font-face { |
| font-family: var(font-family); |
| src: var(src-1); |
| unicode-range: var(unicode-range-1); |
| } |
| .foobar { |
| grid-columns: var(grid-columns); |
| }'''; |
| |
| compileAndValidate(input, generated); |
| |
| var generatedPolyfill = r''':root { |
| } |
| .testIt { |
| color: #00f; |
| background: #0f0; |
| background-image: url("test.png"); |
| border-width: 20cm; |
| margin-width: 33%; |
| border-height: 30em; |
| width: .6in; |
| length: 1.2in; |
| -web-stuff: -10px; |
| background-color: rgba(10, 20, 255); |
| transition: color 0.4s; |
| transform: rotate(20deg); |
| content: "✔"; |
| text-shadow: 0 -1px 0 #bfbfbf; |
| } |
| @font-face { |
| font-family: Gentium; |
| src: url("http://example.com/fonts/Gentium.ttf"); |
| unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF; |
| } |
| @font-face { |
| font-family: Gentium; |
| src: local(Gentium Bold), local(Gentium-Bold), url("GentiumBold.ttf"); |
| unicode-range: U+0A-FF, U+980-9FF, U+????, U+3???; |
| } |
| .foobar { |
| grid-columns: 10px ("content" 1fr 10px) [4]; |
| }'''; |
| compilePolyfillAndValidate(input, generatedPolyfill); |
| } |
| |
| testVar() { |
| final errors = []; |
| final input = ''' |
| @color-background: red; |
| @color-foreground: blue; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| } |
| '''; |
| final generated = ''' |
| var-color-background: #f00; |
| var-color-foreground: #00f; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| }'''; |
| |
| var stylesheet = parseCss(input, errors: errors, |
| opts: ['--no-colors', 'memory']); |
| |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated); |
| |
| compileAndValidate(input, generated); |
| |
| final input2 = ''' |
| @color-background: red; |
| @color-foreground: blue; |
| |
| .test { |
| background-color: @color-background; |
| color: @color-foreground; |
| } |
| '''; |
| final generated2 = '''var-color-background: #f00; |
| var-color-foreground: #00f; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| }'''; |
| |
| stylesheet = parseCss(input, errors: errors..clear(), |
| opts: ['--no-colors', 'memory']); |
| |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated2); |
| |
| compileAndValidate(input2, generated2); |
| } |
| |
| testLess() { |
| final errors = []; |
| final input = ''' |
| @color-background: red; |
| @color-foreground: blue; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| } |
| '''; |
| final generated = '''var-color-background: #f00; |
| var-color-foreground: #00f; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| }'''; |
| |
| var stylesheet = parseCss(input, errors: errors, |
| opts: ['--no-colors', 'memory']); |
| |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated); |
| |
| compileAndValidate(input, generated); |
| |
| final input2 = ''' |
| @color-background: red; |
| @color-foreground: blue; |
| |
| .test { |
| background-color: @color-background; |
| color: @color-foreground; |
| } |
| '''; |
| final generated2 = '''var-color-background: #f00; |
| var-color-foreground: #00f; |
| |
| .test { |
| background-color: var(color-background); |
| color: var(color-foreground); |
| }'''; |
| |
| stylesheet = parseCss(input, errors: errors..clear(), |
| opts: ['--no-colors', 'memory']); |
| |
| expect(stylesheet != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet), generated2); |
| |
| compileAndValidate(input2, generated2); |
| } |
| |
| void polyfill() { |
| compilePolyfillAndValidate(r''' |
| @color-background: red; |
| @color-foreground: blue; |
| .test { |
| background-color: @color-background; |
| color: @color-foreground; |
| }''', r'''.test { |
| background-color: #f00; |
| color: #00f; |
| }'''); |
| } |
| |
| void testIndirects() { |
| compilePolyfillAndValidate(''' |
| :root { |
| var-redef: #0f0; |
| |
| var-a1: #fff; |
| var-a2: var(a1); |
| var-a3: var(a2); |
| |
| var-redef: #000; |
| } |
| .test { |
| background-color: @a1; |
| color: @a2; |
| border-color: @a3; |
| } |
| .test-1 { |
| color: @redef; |
| }''', r''':root { |
| } |
| .test { |
| background-color: #fff; |
| color: #fff; |
| border-color: #fff; |
| } |
| .test-1 { |
| color: #000; |
| }'''); |
| } |
| |
| void includes() { |
| var errors = []; |
| var file1Input = r''' |
| :root { |
| var-redef: #0f0; |
| |
| var-a1: #fff; |
| var-a2: var(a1); |
| var-a3: var(a2); |
| |
| var-redef: #000; |
| } |
| .test-1 { |
| background-color: @a1; |
| color: @a2; |
| border-color: @a3; |
| } |
| .test-1a { |
| color: @redef; |
| } |
| '''; |
| |
| var file2Input = r''' |
| :root { |
| var-redef: #0b0; |
| var-b3: var(a3); |
| } |
| .test-2 { |
| color: var(b3); |
| background-color: var(redef); |
| border-color: var(a3); |
| } |
| '''; |
| |
| var input = r''' |
| :root { |
| var-redef: #0c0; |
| } |
| .test-main { |
| color: var(b3); |
| background-color: var(redef); |
| border-color: var(a3); |
| } |
| '''; |
| |
| var generated1 = r''':root { |
| var-redef: #0f0; |
| var-a1: #fff; |
| var-a2: var(a1); |
| var-a3: var(a2); |
| var-redef: #000; |
| } |
| .test-1 { |
| background-color: var(a1); |
| color: var(a2); |
| border-color: var(a3); |
| } |
| .test-1a { |
| color: var(redef); |
| }'''; |
| |
| var stylesheet1 = compileCss(file1Input, errors: errors, opts: options); |
| expect(stylesheet1 != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet1), generated1); |
| |
| var generated2 = r''':root { |
| var-redef: #0b0; |
| var-b3: var(a3); |
| } |
| .test-2 { |
| color: var(b3); |
| background-color: var(redef); |
| border-color: var(a3); |
| }'''; |
| |
| var stylesheet2 = compileCss(file2Input, includes: [stylesheet1], |
| errors: errors..clear(), opts: options); |
| expect(stylesheet2 != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheet2), generated2); |
| |
| var generatedPolyfill1 = r''':root { |
| } |
| .test-1 { |
| background-color: #fff; |
| color: #fff; |
| border-color: #fff; |
| } |
| .test-1a { |
| color: #000; |
| }'''; |
| var styleSheet1Polyfill = compileCss(file1Input, errors: errors..clear(), |
| polyfill: true, opts: options); |
| expect(styleSheet1Polyfill != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(styleSheet1Polyfill), generatedPolyfill1); |
| |
| var generatedPolyfill2 = r''':root { |
| } |
| .test-2 { |
| color: #fff; |
| background-color: #0b0; |
| border-color: #fff; |
| }'''; |
| var styleSheet2Polyfill = compileCss(file2Input, includes: [stylesheet1], |
| errors: errors..clear(), polyfill: true, opts: options); |
| expect(styleSheet2Polyfill != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(styleSheet2Polyfill), generatedPolyfill2); |
| |
| // Make sure includes didn't change. |
| expect(prettyPrint(stylesheet1), generated1); |
| |
| var generatedPolyfill = r''':root { |
| } |
| .test-main { |
| color: #fff; |
| background-color: #0c0; |
| border-color: #fff; |
| }'''; |
| var stylesheetPolyfill = compileCss(input, |
| includes: [stylesheet1, stylesheet2], errors: errors..clear(), |
| polyfill: true, opts: options); |
| |
| expect(stylesheetPolyfill != null, true); |
| expect(errors.isEmpty, true, reason: errors.toString()); |
| expect(prettyPrint(stylesheetPolyfill), generatedPolyfill); |
| |
| // Make sure includes didn't change. |
| expect(prettyPrint(stylesheet1), generated1); |
| expect(prettyPrint(stylesheet2), generated2); |
| } |
| |
| main() { |
| test('Simple var', simpleVar); |
| test('Expressions var', expressionsVar); |
| test('Default value in var()', defaultVar); |
| test('CSS Parser only var', parserVar); |
| test('Var syntax', testVar); |
| test('Indirects', testIndirects); |
| test('Forward Refs', undefinedVars); |
| test('Less syntax', testLess); |
| test('Polyfill', polyfill); |
| test('Multi-file', includes); |
| } |