aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem/_element.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/bem/_element.scss')
-rw-r--r--test/bem/_element.scss792
1 files changed, 396 insertions, 396 deletions
diff --git a/test/bem/_element.scss b/test/bem/_element.scss
index c8839de..dd4efd4 100644
--- a/test/bem/_element.scss
+++ b/test/bem/_element.scss
@@ -22,473 +22,473 @@
22// 22//
23 23
24@include it('element') { 24@include it('element') {
25 @include assert('single element') { /// 1 /// 25 @include assert('single element') { /// 1 ///
26 @include output { 26 @include output {
27 @include bem.block('something') { 27 @include bem.block('something') {
28 @include bem.elem('child') { 28 @include bem.elem('child') {
29 font-size: 2em; 29 font-size: 2em;
30 } 30 }
31 } 31 }
32 } 32 }
33 33
34 @include expect { 34 @include expect {
35 .something__child { 35 .something__child {
36 font-size: 2em; 36 font-size: 2em;
37 } 37 }
38 } 38 }
39 } 39 }
40 40
41 @include assert('single element, manual selector in-between') { /// 2 /// 41 @include assert('single element, manual selector in-between') { /// 2 ///
42 @include output(false) { 42 @include output(false) {
43 @include bem.block('something') { 43 @include bem.block('something') {
44 &:hover { 44 &:hover {
45 @include bem.elem('child1') { 45 @include bem.elem('child1') {
46 font-size: 2em; 46 font-size: 2em;
47 } 47 }
48 } 48 }
49 49
50 .test & { 50 .test & {
51 @include bem.elem('child2') { 51 @include bem.elem('child2') {
52 font-size: 2em; 52 font-size: 2em;
53 } 53 }
54 } 54 }
55 } 55 }
56 } 56 }
57 57
58 @include expect(false) { 58 @include expect(false) {
59 .something:hover .something__child1 { 59 .something:hover .something__child1 {
60 font-size: 2em; 60 font-size: 2em;
61 } 61 }
62 62
63 .test .something__child2 { 63 .test .something__child2 {
64 font-size: 2em; 64 font-size: 2em;
65 } 65 }
66 } 66 }
67 } 67 }
68 68
69 @include assert('single element, modifier in-between') { /// 3 /// 69 @include assert('single element, modifier in-between') { /// 3 ///
70 @include output { 70 @include output {
71 @include bem.block('something') { 71 @include bem.block('something') {
72 @include bem.modifier('mod') { 72 @include bem.modifier('mod') {
73 @include bem.elem('child') { 73 @include bem.elem('child') {
74 font-size: 2em; 74 font-size: 2em;
75 } 75 }
76 } 76 }
77 } 77 }
78 } 78 }
79 79
80 @include expect { 80 @include expect {
81 .something--mod .something__child { 81 .something--mod .something__child {
82 font-size: 2em; 82 font-size: 2em;
83 } 83 }
84 } 84 }
85 } 85 }
86 86
87 @include assert('single element, nested') { /// 4 /// 87 @include assert('single element, nested') { /// 4 ///
88 @include output { 88 @include output {
89 @include bem.block('something') { 89 @include bem.block('something') {
90 @include bem.elem('child') { 90 @include bem.elem('child') {
91 font-size: 2em; 91 font-size: 2em;
92 92
93 @include bem.elem('subchild') { 93 @include bem.elem('subchild') {
94 font-size: 3em; 94 font-size: 3em;
95 } 95 }
96 } 96 }
97 } 97 }
98 } 98 }
99 99
100 @include expect { 100 @include expect {
101 .something__child { 101 .something__child {
102 font-size: 2em; 102 font-size: 2em;
103 } 103 }
104 104
105 .something__child .something__subchild { 105 .something__child .something__subchild {
106 font-size: 3em; 106 font-size: 3em;
107 } 107 }
108 } 108 }
109 } 109 }
110 110
111 @include assert('single element, nested, manual selector in-between') { /// 5 /// 111 @include assert('single element, nested, manual selector in-between') { /// 5 ///
112 @include output(false) { 112 @include output(false) {
113 @include bem.block('something') { 113 @include bem.block('something') {
114 &:hover { 114 &:hover {
115 @include bem.elem('child1') { 115 @include bem.elem('child1') {
116 font-size: 2em; 116 font-size: 2em;
117 117
118 @include bem.elem('subchild1') { 118 @include bem.elem('subchild1') {
119 font-size: 3em; 119 font-size: 3em;
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 .test & { 124 .test & {
125 @include bem.elem('child2') { 125 @include bem.elem('child2') {
126 font-size: 2em; 126 font-size: 2em;
127 127
128 @include bem.elem('subchild2') { 128 @include bem.elem('subchild2') {
129 font-size: 3em; 129 font-size: 3em;
130 } 130 }
131 } 131 }
132 } 132 }
133 133
134 @include bem.elem('child3') { 134 @include bem.elem('child3') {
135 font-size: 2em; 135 font-size: 2em;
136 136
137 &:hover { 137 &:hover {
138 @include bem.elem('subchild3') { 138 @include bem.elem('subchild3') {
139 font-size: 3em; 139 font-size: 3em;
140 } 140 }
141 } 141 }
142 142
143 .test & { 143 .test & {
144 @include bem.elem('subchild4') { 144 @include bem.elem('subchild4') {
145 font-size: 3em; 145 font-size: 3em;
146 } 146 }
147 } 147 }
148 } 148 }
149 } 149 }
150 } 150 }
151 151
152 @include expect(false) { 152 @include expect(false) {
153 .something:hover .something__child1 { 153 .something:hover .something__child1 {
154 font-size: 2em; 154 font-size: 2em;
155 } 155 }
156 156
157 .something:hover .something__child1 .something__subchild1 { 157 .something:hover .something__child1 .something__subchild1 {
158 font-size: 3em; 158 font-size: 3em;
159 } 159 }
160 160
161 .test .something__child2 { 161 .test .something__child2 {
162 font-size: 2em; 162 font-size: 2em;
163 } 163 }
164 164
165 .test .something__child2 .something__subchild2 { 165 .test .something__child2 .something__subchild2 {
166 font-size: 3em; 166 font-size: 3em;
167 } 167 }
168 168
169 .something__child3 { 169 .something__child3 {
170 font-size: 2em; 170 font-size: 2em;
171 } 171 }
172 172
173 .something__child3:hover .something__subchild3 { 173 .something__child3:hover .something__subchild3 {
174 font-size: 3em; 174 font-size: 3em;
175 } 175 }
176 176
177 .test .something__child3 .something__subchild4 { 177 .test .something__child3 .something__subchild4 {
178 font-size: 3em; 178 font-size: 3em;
179 } 179 }
180 } 180 }
181 } 181 }
182 182
183 @include assert('single element, nested, modifier in-between') { /// 6 /// 183 @include assert('single element, nested, modifier in-between') { /// 6 ///
184 @include output { 184 @include output {
185 @include bem.block('something') { 185 @include bem.block('something') {
186 @include bem.modifier('mod') { 186 @include bem.modifier('mod') {
187 @include bem.elem('child') { 187 @include bem.elem('child') {
188 font-size: 2em; 188 font-size: 2em;
189 189
190 @include bem.elem('subchild') { 190 @include bem.elem('subchild') {
191 font-size: 3em; 191 font-size: 3em;
192 } 192 }
193 } 193 }
194 } 194 }
195 195
196 @include bem.elem('child') { 196 @include bem.elem('child') {
197 font-size: 2em; 197 font-size: 2em;
198 198
199 @include bem.modifier('mod') { 199 @include bem.modifier('mod') {
200 @include bem.elem('subchild') { 200 @include bem.elem('subchild') {
201 font-size: 3em; 201 font-size: 3em;
202 } 202 }
203 } 203 }
204 } 204 }
205 } 205 }
206 } 206 }
207 207
208 @include expect { 208 @include expect {
209 .something--mod .something__child { 209 .something--mod .something__child {
210 font-size: 2em; 210 font-size: 2em;
211 } 211 }
212 212
213 .something--mod .something__child .something__subchild { 213 .something--mod .something__child .something__subchild {
214 font-size: 3em; 214 font-size: 3em;
215 } 215 }
216 216
217 .something__child { 217 .something__child {
218 font-size: 2em; 218 font-size: 2em;
219 } 219 }
220 220
221 .something__child--mod .something__subchild { 221 .something__child--mod .something__subchild {
222 font-size: 3em; 222 font-size: 3em;
223 } 223 }
224 } 224 }
225 } 225 }
226 226
227 @include assert('single element, in at-theme') { /// 7 /// 227 @include assert('single element, in at-theme') { /// 7 ///
228 @include output(false) { 228 @include output(false) {
229 @include bem.block('something') { 229 @include bem.block('something') {
230 @include bem.at-theme('dark') { 230 @include bem.at-theme('dark') {
231 @include bem.elem('child') { 231 @include bem.elem('child') {
232 font-size: 2em; 232 font-size: 2em;
233 } 233 }
234 } 234 }
235 } 235 }
236 } 236 }
237 237
238 @include expect(false) { 238 @include expect(false) {
239 .t-dark .something__child, 239 .t-dark .something__child,
240 [class*=' t-'] .t-dark .something__child, 240 [class*=' t-'] .t-dark .something__child,
241 [class^='t-'] .t-dark .something__child { 241 [class^='t-'] .t-dark .something__child {
242 font-size: 2em; 242 font-size: 2em;
243 } 243 }
244 } 244 }
245 } 245 }
246 246
247 @include assert('multiple elements') { /// 8 /// 247 @include assert('multiple elements') { /// 8 ///
248 @include output { 248 @include output {
249 @include bem.block('something') { 249 @include bem.block('something') {
250 @include bem.elem('child1', 'child2') { 250 @include bem.elem('child1', 'child2') {
251 font-size: 2em; 251 font-size: 2em;
252 } 252 }
253 } 253 }
254 } 254 }
255 255
256 @include expect { 256 @include expect {
257 .something__child1, 257 .something__child1,
258 .something__child2 { 258 .something__child2 {
259 font-size: 2em; 259 font-size: 2em;
260 } 260 }
261 } 261 }
262 } 262 }
263 263
264 @include assert('multiple elements, manual selector in-between') { /// 9 /// 264 @include assert('multiple elements, manual selector in-between') { /// 9 ///
265 @include output(false) { 265 @include output(false) {
266 @include bem.block('something') { 266 @include bem.block('something') {
267 &:hover { 267 &:hover {
268 @include bem.elem('child1', 'child2') { 268 @include bem.elem('child1', 'child2') {
269 font-size: 2em; 269 font-size: 2em;
270 } 270 }
271 } 271 }
272 272
273 .test & { 273 .test & {
274 @include bem.elem('child3', 'child4') { 274 @include bem.elem('child3', 'child4') {
275 font-size: 2em; 275 font-size: 2em;
276 } 276 }
277 } 277 }
278 } 278 }
279 } 279 }
280 280
281 @include expect(false) { 281 @include expect(false) {
282 .something:hover .something__child1, 282 .something:hover .something__child1,
283 .something:hover .something__child2 { 283 .something:hover .something__child2 {
284 font-size: 2em; 284 font-size: 2em;
285 } 285 }
286 286
287 .test .something__child3, 287 .test .something__child3,
288 .test .something__child4 { 288 .test .something__child4 {
289 font-size: 2em; 289 font-size: 2em;
290 } 290 }
291 } 291 }
292 } 292 }
293 293
294 @include assert('multiple elements, modifier in-between') { /// 10 /// 294 @include assert('multiple elements, modifier in-between') { /// 10 ///
295 @include output { 295 @include output {
296 @include bem.block('something') { 296 @include bem.block('something') {
297 @include bem.modifier('mod') { 297 @include bem.modifier('mod') {
298 @include bem.elem('child1', 'child2') { 298 @include bem.elem('child1', 'child2') {
299 font-size: 2em; 299 font-size: 2em;
300 } 300 }
301 } 301 }
302 } 302 }
303 } 303 }
304 304
305 @include expect { 305 @include expect {
306 .something--mod .something__child1, 306 .something--mod .something__child1,
307 .something--mod .something__child2 { 307 .something--mod .something__child2 {
308 font-size: 2em; 308 font-size: 2em;
309 } 309 }
310 } 310 }
311 } 311 }
312 312
313 @include assert('multiple elements, nested') { /// 11 /// 313 @include assert('multiple elements, nested') { /// 11 ///
314 @include output { 314 @include output {
315 @include bem.block('something') { 315 @include bem.block('something') {
316 @include bem.elem('child1', 'child2') { 316 @include bem.elem('child1', 'child2') {
317 font-size: 2em; 317 font-size: 2em;
318 318
319 @include bem.elem('subchild1') { 319 @include bem.elem('subchild1') {
320 font-size: 3em; 320 font-size: 3em;
321 } 321 }
322 } 322 }
323 323
324 @include bem.elem('child3') { 324 @include bem.elem('child3') {
325 font-size: 2em; 325 font-size: 2em;
326 326
327 @include bem.elem('subchild2', 'subchild3') { 327 @include bem.elem('subchild2', 'subchild3') {
328 font-size: 3em; 328 font-size: 3em;
329 } 329 }
330 } 330 }
331 } 331 }
332 } 332 }
333 333
334 @include expect { 334 @include expect {
335 .something__child1, 335 .something__child1,
336 .something__child2 { 336 .something__child2 {
337 font-size: 2em; 337 font-size: 2em;
338 } 338 }
339 339
340 .something__child1 .something__subchild1, 340 .something__child1 .something__subchild1,
341 .something__child2 .something__subchild1 { 341 .something__child2 .something__subchild1 {
342 font-size: 3em; 342 font-size: 3em;
343 } 343 }
344 344
345 .something__child3 { 345 .something__child3 {
346 font-size: 2em; 346 font-size: 2em;
347 } 347 }
348 348
349 .something__child3 .something__subchild2, 349 .something__child3 .something__subchild2,
350 .something__child3 .something__subchild3 { 350 .something__child3 .something__subchild3 {
351 font-size: 3em; 351 font-size: 3em;
352 } 352 }
353 } 353 }
354 } 354 }
355 355
356 @include assert('multiple elements, nested, manual selector in-between') { /// 12 /// 356 @include assert('multiple elements, nested, manual selector in-between') { /// 12 ///
357 @include output(false) { 357 @include output(false) {
358 @include bem.block('something') { 358 @include bem.block('something') {
359 @include bem.elem('child1', 'child2') { 359 @include bem.elem('child1', 'child2') {
360 font-size: 2em; 360 font-size: 2em;
361 361
362 &:hover { 362 &:hover {
363 @include bem.elem('subchild1') { 363 @include bem.elem('subchild1') {
364 font-size: 3em; 364 font-size: 3em;
365 } 365 }
366 } 366 }
367 367
368 .test & { 368 .test & {
369 @include bem.elem('subchild2') { 369 @include bem.elem('subchild2') {
370 font-size: 3em; 370 font-size: 3em;
371 } 371 }
372 } 372 }
373 } 373 }
374 374
375 @include bem.elem('child3') { 375 @include bem.elem('child3') {
376 font-size: 2em; 376 font-size: 2em;
377 377
378 &:hover { 378 &:hover {
379 @include bem.elem('subchild3', 'subchild4') { 379 @include bem.elem('subchild3', 'subchild4') {
380 font-size: 3em; 380 font-size: 3em;
381 } 381 }
382 } 382 }
383 383
384 .test & { 384 .test & {
385 @include bem.elem('subchild5', 'subchild6') { 385 @include bem.elem('subchild5', 'subchild6') {
386 font-size: 3em; 386 font-size: 3em;
387 } 387 }
388 } 388 }
389 } 389 }
390 } 390 }
391 } 391 }
392 392
393 @include expect(false) { 393 @include expect(false) {
394 .something__child1, 394 .something__child1,
395 .something__child2 { 395 .something__child2 {
396 font-size: 2em; 396 font-size: 2em;
397 } 397 }
398 398
399 .something__child1:hover .something__subchild1, 399 .something__child1:hover .something__subchild1,
400 .something__child2:hover .something__subchild1 { 400 .something__child2:hover .something__subchild1 {
401 font-size: 3em; 401 font-size: 3em;
402 } 402 }
403 403
404 .test .something__child1 .something__subchild2, 404 .test .something__child1 .something__subchild2,
405 .test .something__child2 .something__subchild2 { 405 .test .something__child2 .something__subchild2 {
406 font-size: 3em; 406 font-size: 3em;
407 } 407 }
408 408
409 .something__child3 { 409 .something__child3 {
410 font-size: 2em; 410 font-size: 2em;
411 } 411 }
412 412
413 .something__child3:hover .something__subchild3, 413 .something__child3:hover .something__subchild3,
414 .something__child3:hover .something__subchild4 { 414 .something__child3:hover .something__subchild4 {
415 font-size: 3em; 415 font-size: 3em;
416 } 416 }
417 417
418 .test .something__child3 .something__subchild5, 418 .test .something__child3 .something__subchild5,
419 .test .something__child3 .something__subchild6 { 419 .test .something__child3 .something__subchild6 {
420 font-size: 3em; 420 font-size: 3em;
421 } 421 }
422 } 422 }
423 } 423 }
424 424
425 @include assert('multiple elements, nested, modifier in-between') { /// 13 /// 425 @include assert('multiple elements, nested, modifier in-between') { /// 13 ///
426 @include output { 426 @include output {
427 @include bem.block('something') { 427 @include bem.block('something') {
428 @include bem.elem('child1', 'child2') { 428 @include bem.elem('child1', 'child2') {
429 font-size: 2em; 429 font-size: 2em;
430 430
431 @include bem.modifier('mod') { 431 @include bem.modifier('mod') {
432 @include bem.elem('subchild1') { 432 @include bem.elem('subchild1') {
433 font-size: 3em; 433 font-size: 3em;
434 } 434 }
435 } 435 }
436 } 436 }
437 437
438 @include bem.elem('child3') { 438 @include bem.elem('child3') {
439 font-size: 2em; 439 font-size: 2em;
440 440
441 @include bem.modifier('mod') { 441 @include bem.modifier('mod') {
442 @include bem.elem('subchild2', 'subchild3') { 442 @include bem.elem('subchild2', 'subchild3') {
443 font-size: 3em; 443 font-size: 3em;
444 } 444 }
445 } 445 }
446 } 446 }
447 } 447 }
448 } 448 }
449 449
450 @include expect { 450 @include expect {
451 .something__child1, 451 .something__child1,
452 .something__child2 { 452 .something__child2 {
453 font-size: 2em; 453 font-size: 2em;
454 } 454 }
455 455
456 .something__child1--mod .something__subchild1, 456 .something__child1--mod .something__subchild1,
457 .something__child2--mod .something__subchild1 { 457 .something__child2--mod .something__subchild1 {
458 font-size: 3em; 458 font-size: 3em;
459 } 459 }
460 460
461 .something__child3 { 461 .something__child3 {
462 font-size: 2em; 462 font-size: 2em;
463 } 463 }
464 464
465 .something__child3--mod .something__subchild2, 465 .something__child3--mod .something__subchild2,
466 .something__child3--mod .something__subchild3 { 466 .something__child3--mod .something__subchild3 {
467 font-size: 3em; 467 font-size: 3em;
468 } 468 }
469 } 469 }
470 } 470 }
471 471
472 @include assert('multiple elements, in at-theme') { /// 14 /// 472 @include assert('multiple elements, in at-theme') { /// 14 ///
473 @include output(false) { 473 @include output(false) {
474 @include bem.block('something') { 474 @include bem.block('something') {
475 @include bem.at-theme('dark') { 475 @include bem.at-theme('dark') {
476 @include bem.elem('child1', 'child2') { 476 @include bem.elem('child1', 'child2') {
477 font-size: 2em; 477 font-size: 2em;
478 } 478 }
479 } 479 }
480 } 480 }
481 } 481 }
482 482
483 @include expect(false) { 483 @include expect(false) {
484 .t-dark .something__child1, 484 .t-dark .something__child1,
485 [class*=' t-'] .t-dark .something__child1, 485 [class*=' t-'] .t-dark .something__child1,
486 [class^='t-'] .t-dark .something__child1, 486 [class^='t-'] .t-dark .something__child1,
487 .t-dark .something__child2, 487 .t-dark .something__child2,
488 [class*=' t-'] .t-dark .something__child2, 488 [class*=' t-'] .t-dark .something__child2,
489 [class^='t-'] .t-dark .something__child2 { 489 [class^='t-'] .t-dark .something__child2 {
490 font-size: 2em; 490 font-size: 2em;
491 } 491 }
492 } 492 }
493 } 493 }
494} 494}