aboutsummaryrefslogtreecommitdiffstats
path: root/test/bem/_related-element.scss
diff options
context:
space:
mode:
Diffstat (limited to 'test/bem/_related-element.scss')
-rw-r--r--test/bem/_related-element.scss462
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}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-27 16:47:17 +0000