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