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