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