| Index: pkg/csslib/test/var_test.dart
|
| diff --git a/pkg/csslib/test/var_test.dart b/pkg/csslib/test/var_test.dart
|
| deleted file mode 100644
|
| index 0ec2852423e48ce400ea24899e4db063110f3ca4..0000000000000000000000000000000000000000
|
| --- a/pkg/csslib/test/var_test.dart
|
| +++ /dev/null
|
| @@ -1,926 +0,0 @@
|
| -// 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 on line 5, column 14: Variable is not defined.\n'
|
| - ' var-a: var(b);\n'
|
| - ' ^^',
|
| - 'error on line 6, column 14: Variable is not defined.\n'
|
| - ' var-b: var(c);\n'
|
| - ' ^^',
|
| - 'error on line 9, column 16: Variable is not defined.\n'
|
| - ' var-one: var(two);\n'
|
| - ' ^^^^',
|
| - 'error on line 12, column 17: Variable is not defined.\n'
|
| - ' var-four: var(five);\n'
|
| - ' ^^^^^',
|
| - 'error on line 13, column 17: Variable is not defined.\n'
|
| - ' var-five: var(six);\n'
|
| - ' ^^^^',
|
| - 'error on line 16, column 18: Variable is not defined.\n'
|
| - ' var-def-1: var(def-2);\n'
|
| - ' ^^^^^^',
|
| - 'error on line 17, column 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);
|
| -}
|
|
|