Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(117)

Side by Side Diff: packages/csslib/test/extend_test.dart

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

Powered by Google App Engine
This is Rietveld 408576698