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