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: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 } |
OLD | NEW |