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