mixin-parameters.tentative.html (11058B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Mixins: Parameters</title> 5 <link rel="help" href="https://drafts.csswg.org/css-mixins/#mixin-args"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 </head> 9 <body> 10 11 <style> 12 @mixin --m1() { 13 color: green; 14 } 15 @mixin --m1(junk-in-parameter-list) { /* Will be ignored. */ 16 color: red; 17 } 18 #e1 { 19 @apply --m1; 20 } 21 </style> 22 <div><div id="e1">This text should be green.</div></div> 23 <script> 24 test(() => { 25 let target = document.getElementById('e1'); 26 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 27 }, 'Mixins with invalid parameter lists are ignored'); 28 </script> 29 30 31 <style> 32 @mixin --m2(--my-color) { 33 color: var(--my-color); 34 } 35 #e2 { 36 @apply --m2(green); 37 } 38 </style> 39 <div><div id="e2">This text should be green.</div></div> 40 <script> 41 test(() => { 42 let target = document.getElementById('e2'); 43 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 44 }, 'Basic mixin parameter passing'); 45 </script> 46 47 48 <style> 49 @mixin --m2b(--my-color) { 50 color: var(--my-color); 51 } 52 #e2b { 53 @apply --m2b(navy); 54 } 55 </style> 56 <div><div id="e2b">This text should be navy.</div></div> 57 <script> 58 test(() => { 59 let target = document.getElementById('e2b'); 60 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 128)'); 61 }, 'Mixins can be called multiple times with different parameters'); 62 </script> 63 64 65 <style> 66 @mixin --m2c(--my-color) { 67 color: var(--my-color); 68 } 69 #e2c { 70 color: fuchsia; 71 @apply --m2c(); 72 } 73 </style> 74 <div><div id="e2c">This text should be fuchsia.</div></div> 75 <script> 76 test(() => { 77 let target = document.getElementById('e2c'); 78 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)'); 79 }, 'Too few parameters and no default ignores mixin'); 80 </script> 81 82 83 <style> 84 @mixin --m3(--my-color) { 85 color: var(--my-color); 86 } 87 #e3 { 88 @apply --m3({green}); 89 } 90 </style> 91 <div><div id="e3">This text should be green.</div></div> 92 <script> 93 test(() => { 94 let target = document.getElementById('e3'); 95 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 96 }, 'Mixin argument parsing with arguments wrapped in {}'); 97 </script> 98 99 100 <style> 101 @mixin --m4(--my-color: green) { 102 color: var(--my-color); 103 } 104 #e4 { 105 @apply --m4; 106 } 107 </style> 108 <div><div id="e4">This text should be green.</div></div> 109 <script> 110 test(() => { 111 let target = document.getElementById('e4'); 112 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 113 }, 'Defaults in mixin parameters'); 114 </script> 115 116 117 <style> 118 @mixin --m5() { 119 color: red; 120 } 121 #e5 { 122 color: green; 123 @apply --m5(too-many-parameters); 124 } 125 </style> 126 <div><div id="e5">This text should be green.</div></div> 127 <script> 128 test(() => { 129 let target = document.getElementById('e5'); 130 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 131 }, '@apply with too many parameters is ignored'); 132 </script> 133 134 135 <style> 136 @mixin --m6(--my-color) { 137 color: var(--my-color, navy); 138 } 139 #e6 { 140 @apply --m6(green); 141 } 142 </style> 143 <div><div id="e6">This text should be green.</div></div> 144 <script> 145 test(() => { 146 let target = document.getElementById('e6'); 147 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 148 }, 'Fallback is ignored if argument is given'); 149 </script> 150 151 152 <style> 153 @mixin --m6b(--my-color) { 154 color: var(--my-color, navy); 155 } 156 #e6b { 157 @apply --m6b; 158 } 159 </style> 160 <div><div id="e6b">This text should be navy.</div></div> 161 <script> 162 test(() => { 163 let target = document.getElementById('e6b'); 164 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 128)'); 165 }, 'Fallback is used with no parameter and no default'); 166 </script> 167 168 169 <style> 170 @mixin --m6c(--my-color) { 171 color: var(--my-color, navy); 172 } 173 #e6c { 174 @apply --m6c(invalid-color); 175 } 176 </style> 177 <div><div id="e6c">This text should be black.</div></div> 178 <script> 179 test(() => { 180 let target = document.getElementById('e6c'); 181 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)'); 182 }, 'Fallback is not used on other errors'); 183 </script> 184 185 186 <style> 187 #e6d { 188 color: var(--not-within-mixin, green); 189 } 190 </style> 191 <div><div id="e6d">This text should be green.</div></div> 192 <script> 193 test(() => { 194 let target = document.getElementById('e6d'); 195 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 196 }, 'Fallback is not when outside mixin'); 197 </script> 198 199 200 <style> 201 #e6e { 202 color: var(--not-within-mixin); 203 } 204 </style> 205 <div><div id="e6e">This text should be black.</div></div> 206 <script> 207 test(() => { 208 let target = document.getElementById('e6e'); 209 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)'); 210 }, 'Invalid when no fallback and outside mixin'); 211 </script> 212 213 214 <style> 215 @mixin --m7(--my-color) { 216 color: attr(color-attr type(<color>)); 217 } 218 #e7 { 219 @apply --m7(green); 220 } 221 </style> 222 <div><div id="e7" color-attr="var(--my-color)">This text should be green.</div></div> 223 <script> 224 test(() => { 225 let target = document.getElementById('e7'); 226 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 227 }, 'var() can be accessed from attributes'); 228 </script> 229 230 231 <style> 232 @mixin --m8(--my-length type(<length>)) { 233 font-size: 10px; 234 --some-length: var(--my-length); 235 } 236 #e8 { 237 @apply --m8(1.0em); 238 } 239 </style> 240 <div><div id="e8">This text does not matter.</div></div> 241 <script> 242 test(() => { 243 let target = document.getElementById('e8'); 244 assert_equals(getComputedStyle(target).getPropertyValue('--some-length'), '10px'); 245 }, 'var() resolves typed parameters'); 246 </script> 247 248 249 <style> 250 @mixin --m9(--my-length type(length)) { /* Note the syntax error. */ 251 font-size: 10px; 252 --some-length: var(--my-length); 253 } 254 #e9 { 255 @apply --m9(1.0em); 256 } 257 </style> 258 <div><div id="e9">This text does not matter.</div></div> 259 <script> 260 test(() => { 261 let target = document.getElementById('e9'); 262 assert_equals(getComputedStyle(target).getPropertyValue('--some-length'), ''); 263 assert_equals(getComputedStyle(target).fontSize, '10px'); 264 }, 'var() refuses illegal syntax parameters, but does not fail entire mixin'); 265 </script> 266 267 268 <style> 269 @mixin --m10inner(--inner-color) { 270 color: var(--outer-color); 271 } 272 @mixin --m10outer(--outer-color) { 273 @apply --m10inner(red); 274 } 275 #e10 { 276 @apply --m10outer(green); 277 } 278 </style> 279 <div><div id="e10">This text should be green.</div></div> 280 <script> 281 test(() => { 282 let target = document.getElementById('e10'); 283 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 284 }, 'var() can access parameters from outer mixins'); 285 </script> 286 287 288 <style> 289 @mixin --m11(--val, --true, --false) { 290 color: if(style(--x: var(--val)): var(--true); else: var(--false)) 291 } 292 #e11 { 293 --x: a; 294 @apply --m11(a, green, red); 295 } 296 </style> 297 <div><div id="e11">This text should be green.</div></div> 298 <script> 299 test(() => { 300 let target = document.getElementById('e11'); 301 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 302 }, 'var() works inside if, in condition and true branch'); 303 </script> 304 305 306 <style> 307 @mixin --m11b(--val, --true, --false) { 308 color: if(style(--x: var(--val)): var(--true); else: var(--false)) 309 } 310 #e11b { 311 --x: a; 312 @apply --m11b(b, red, green); 313 } 314 </style> 315 <div><div id="e11b">This text should be green.</div></div> 316 <script> 317 test(() => { 318 let target = document.getElementById('e11b'); 319 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 320 }, 'var() works inside if, in condition and false branch'); 321 </script> 322 323 324 <style> 325 @function --f() { 326 color: var(--my-color); 327 } 328 @mixin --m12(--my-color) { 329 color: --f(); 330 } 331 #e12 { 332 @apply --m12(red); 333 } 334 </style> 335 <div><div id="e12">This text should be black.</div></div> 336 <script> 337 test(() => { 338 let target = document.getElementById('e12'); 339 assert_equals(getComputedStyle(target).color, 'rgb(0, 0, 0)'); 340 }, 'var() within a function should not see parameters from a calling mixin'); 341 </script> 342 343 <style> 344 @mixin --m13-override-outer(--inner, --outer) { 345 color: var(--inner); 346 } 347 @mixin --m13-set-inner(--inner) { 348 @apply --m13-override-outer(var(--inner), red); 349 } 350 @mixin --m13(--outer) { 351 @apply --m13-set-inner(var(--outer)); 352 } 353 #e13 { 354 @apply --m13(green); 355 } 356 </style> 357 <div><div id="e13">This text should be green.</div></div> 358 <script> 359 test(() => { 360 let target = document.getElementById('e13'); 361 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 362 }, 'Mixin arguments are resolved at call site, not at use'); 363 </script> 364 365 <style> 366 @mixin --m14(--param: green) { 367 color: var(--param); 368 } 369 #e14 { 370 @apply --m14(); 371 } 372 </style> 373 <div><div id="e14">This text should be green.</div></div> 374 <script> 375 test(() => { 376 let target = document.getElementById('e14'); 377 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 378 }, 'var() supports default parameters'); 379 </script> 380 381 <style> 382 @mixin --m15(--my-length type(<length>): 1em) { 383 --some-length: var(--my-length); 384 } 385 #e15 { 386 font-size: 12px; 387 @apply --m15(); 388 } 389 </style> 390 <div><div id="e15">This text does not matter.</div></div> 391 <script> 392 test(() => { 393 let target = document.getElementById('e15'); 394 assert_equals(getComputedStyle(target).getPropertyValue('--some-length'), '12px'); 395 }, 'var() typed default parameters are resolved against the element'); 396 </script> 397 398 <style> 399 @mixin --m16(--arg: !!) { /* Invalid declaration. */ 400 color: red; 401 } 402 #e16 { 403 color: green; 404 @apply --m16(); 405 } 406 </style> 407 <div><div id="e16">This text should be green.</div></div> 408 <script> 409 test(() => { 410 let target = document.getElementById('e16'); 411 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 412 }, 'Invalid defaults should skip declaration, even on unused arguments'); 413 </script> 414 415 <style> 416 @mixin --m17(--arg) { 417 color: red; 418 } 419 #e17 { 420 color: green; 421 @apply --m17(!!!); /* Invalid invocation. */ 422 } 423 </style> 424 <div><div id="e17">This text should be green.</div></div> 425 <script> 426 test(() => { 427 let target = document.getElementById('e17'); 428 assert_equals(getComputedStyle(target).color, 'rgb(0, 128, 0)'); 429 }, 'Invalid @apply arguments should skip declaration'); 430 </script> 431 </body> 432 </html>