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 extend_test; | |
6 | |
7 import 'package:unittest/unittest.dart'; | |
8 import 'testing.dart'; | |
9 | |
10 var options = ['--warnings_as_errors', '--no-colors', 'memory']; | |
11 | |
12 compileAndValidate(String input, String generated) { | |
13 var errors = []; | |
14 var stylesheet = compileCss(input, errors: errors, opts: options); | |
15 expect(stylesheet != null, true); | |
16 expect(errors.isEmpty, true, reason: errors.toString()); | |
17 expect(prettyPrint(stylesheet), generated); | |
18 } | |
19 | |
20 void simpleExtend() { | |
21 compileAndValidate(r''' | |
22 .error { | |
23 border: 1px red; | |
24 background-color: #fdd; | |
25 } | |
26 .seriousError { | |
27 @extend .error; | |
28 border-width: 3px; | |
29 } | |
30 ''', r'''.error, .seriousError { | |
31 border: 1px #f00; | |
32 background-color: #fdd; | |
33 } | |
34 .seriousError { | |
35 border-width: 3px; | |
36 }'''); | |
37 } | |
38 | |
39 void complexSelectors() { | |
40 compileAndValidate(r''' | |
41 .error { | |
42 border: 1px #f00; | |
43 background-color: #fdd; | |
44 } | |
45 .error.intrusion { | |
46 background-image: url("/image/hacked.png"); | |
47 } | |
48 .seriousError { | |
49 @extend .error; | |
50 border-width: 3px; | |
51 } | |
52 ''', r'''.error, .seriousError { | |
53 border: 1px #f00; | |
54 background-color: #fdd; | |
55 } | |
56 .error.intrusion, .seriousError.intrusion { | |
57 background-image: url("/image/hacked.png"); | |
58 } | |
59 .seriousError { | |
60 border-width: 3px; | |
61 }'''); | |
62 | |
63 compileAndValidate(r''' | |
64 a:hover { | |
65 text-decoration: underline; | |
66 } | |
67 .hoverlink { | |
68 @extend a:hover; | |
69 } | |
70 ''', r'''a:hover, .hoverlink { | |
71 text-decoration: underline; | |
72 } | |
73 .hoverlink { | |
74 }'''); | |
75 } | |
76 | |
77 void multipleExtends() { | |
78 compileAndValidate(r''' | |
79 .error { | |
80 border: 1px #f00; | |
81 background-color: #fdd; | |
82 } | |
83 .attention { | |
84 font-size: 3em; | |
85 background-color: #ff0; | |
86 } | |
87 .seriousError { | |
88 @extend .error; | |
89 @extend .attention; | |
90 border-width: 3px; | |
91 } | |
92 ''', r'''.error, .seriousError { | |
93 border: 1px #f00; | |
94 background-color: #fdd; | |
95 } | |
96 .attention, .seriousError { | |
97 font-size: 3em; | |
98 background-color: #ff0; | |
99 } | |
100 .seriousError { | |
101 border-width: 3px; | |
102 }'''); | |
103 } | |
104 | |
105 void chaining() { | |
106 compileAndValidate(r''' | |
107 .error { | |
108 border: 1px #f00; | |
109 background-color: #fdd; | |
110 } | |
111 .seriousError { | |
112 @extend .error; | |
113 border-width: 3px; | |
114 } | |
115 .criticalError { | |
116 @extend .seriousError; | |
117 position: fixed; | |
118 top: 10%; | |
119 bottom: 10%; | |
120 left: 10%; | |
121 right: 10%; | |
122 } | |
123 ''', r'''.error, .seriousError, .criticalError { | |
124 border: 1px #f00; | |
125 background-color: #fdd; | |
126 } | |
127 .seriousError, .criticalError { | |
128 border-width: 3px; | |
129 } | |
130 .criticalError { | |
131 position: fixed; | |
132 top: 10%; | |
133 bottom: 10%; | |
134 left: 10%; | |
135 right: 10%; | |
136 }'''); | |
137 } | |
138 | |
139 void nestedSelectors() { | |
140 compileAndValidate(r''' | |
141 a { | |
142 color: blue; | |
143 &:hover { | |
144 text-decoration: underline; | |
145 } | |
146 } | |
147 | |
148 #fake-links .link { | |
149 @extend a; | |
150 } | |
151 ''', r'''a, #fake-links .link { | |
152 color: #00f; | |
153 } | |
154 a:hover, #fake-links .link:hover { | |
155 text-decoration: underline; | |
156 } | |
157 #fake-links .link { | |
158 }'''); | |
159 } | |
160 | |
161 void nestedMulty() { | |
162 compileAndValidate(r''' | |
163 .btn { | |
164 display: inline-block; | |
165 } | |
166 | |
167 input[type="checkbox"].toggle-button { | |
168 color: red; | |
169 | |
170 + label { | |
171 @extend .btn; | |
172 } | |
173 } | |
174 ''', r'''.btn, input[type="checkbox"].toggle-button label { | |
175 display: inline-block; | |
176 } | |
177 input[type="checkbox"].toggle-button { | |
178 color: #f00; | |
179 } | |
180 input[type="checkbox"].toggle-button label { | |
181 }'''); | |
182 } | |
183 | |
184 void nWayExtends() { | |
185 compileAndValidate(r''' | |
186 .btn > .btn { | |
187 margin-left: 5px; | |
188 } | |
189 input.second + label { | |
190 @extend .btn; | |
191 } | |
192 ''', '.btn > .btn, ' | |
193 'input.second + label > .btn, ' | |
194 '.btn > input.second + label, ' | |
195 'input.second + label > input.second + label, ' | |
196 'input.second + label > input.second + label {\n' | |
197 ' margin-left: 5px;\n}\n' | |
198 'input.second + label {\n' | |
199 '}'); | |
200 | |
201 // TODO(terry): Optimize merge selectors would be: | |
202 // | |
203 // .btn + .btn, input.second + label + .btn, input.second.btn + label { | |
204 // margin-left: 5px; | |
205 // } | |
206 // input.second + label { | |
207 // color: blue; | |
208 // } | |
209 compileAndValidate(r''' | |
210 .btn + .btn { | |
211 margin-left: 5px; | |
212 } | |
213 input.second + label { | |
214 @extend .btn; | |
215 color: blue; | |
216 } | |
217 ''', '.btn + .btn, ' | |
218 'input.second + label + .btn, ' | |
219 '.btn + input.second + label, ' | |
220 'input.second + label + input.second + label, ' | |
221 'input.second + label + input.second + label {\n' | |
222 ' margin-left: 5px;\n}\n' | |
223 'input.second + label {\n' | |
224 ' color: #00f;\n}'); | |
225 } | |
226 | |
227 main() { | |
228 test("Simple Extend", simpleExtend); | |
229 test("complex", complexSelectors); | |
230 test("multiple", multipleExtends); | |
231 test("chaining", chaining); | |
232 test("nested selectors", nestedSelectors); | |
233 test("nested many selector sequences", nestedMulty); | |
234 test("N-way extends", nWayExtends); | |
235 } | |
OLD | NEW |