| 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 |