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