dashed-function-eval.html (25358B)
1 <!DOCTYPE html> 2 <title>Custom Functions: Evaluating a <dashed-function></title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#substitute-a-dashed-function"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="resources/utils.js"></script> 7 8 <div id=parent> 9 <div id=target></div> 10 </div> 11 <div id=main></div> 12 13 <!-- To pass, a test must produce matching computed values for --actual and 14 --expected on #target. --> 15 16 <!-- Return value --> 17 18 <template data-name="Literal result"> 19 <style> 20 @function --f() { 21 result: 12px; 22 } 23 #target { 24 --actual: --f(); 25 --expected: 12px; 26 } 27 </style> 28 </template> 29 30 <template data-name="Literal result, typed return"> 31 <style> 32 @function --f() returns <length> { 33 result: 12px; 34 } 35 #target { 36 --actual: --f(); 37 --expected: 12px; 38 } 39 </style> 40 </template> 41 42 <template data-name="Literal result, typed return, calc"> 43 <style> 44 @function --f() returns <length> { 45 result: calc(12px + 1px); 46 } 47 #target { 48 --actual: --f(); 49 --expected: 13px; 50 } 51 </style> 52 </template> 53 54 <template data-name="Literal result, typed return, mismatch"> 55 <style> 56 @function --f() returns <length> { 57 result: 12s; 58 } 59 #target { 60 --actual: --f(); 61 /* --expected: <guaranteed-invalid> */ 62 } 63 </style> 64 </template> 65 66 <template data-name="Missing result descriptor"> 67 <style> 68 @function --f() { 69 } 70 #target { 71 --actual: --f(); 72 /* --expected: <guaranteed-invalid> */ 73 } 74 </style> 75 </template> 76 77 <template data-name="Literal result, empty"> 78 <style> 79 @function --f() { 80 result:; 81 } 82 #target { 83 --actual: --f(); 84 --expected:; 85 } 86 </style> 87 </template> 88 89 <template data-name="result cascading behavior"> 90 <style> 91 @function --f() returns <length> { 92 result: 12px; 93 result: 24px; /* Overwrites previous */ 94 } 95 #target { 96 --actual: --f(); 97 --expected: 24px; 98 } 99 </style> 100 </template> 101 102 <template data-name="Another dashed-function in result"> 103 <style> 104 @function --f() { 105 result: --g(); 106 } 107 @function --g() { 108 result: 12px; 109 } 110 #target { 111 --actual: --f(); 112 --expected: 12px; 113 } 114 </style> 115 </template> 116 117 <!-- Parameters / Arguments --> 118 119 <template data-name="Unused argument"> 120 <style> 121 @function --f(--x) { 122 result: 12px; 123 } 124 #target { 125 --actual: --f(100px); 126 --expected: 12px; 127 } 128 </style> 129 </template> 130 131 <template data-name="Single parameter"> 132 <style> 133 @function --f(--x) { 134 result: var(--x); 135 } 136 #target { 137 --actual: --f(100px); 138 --expected: 100px; 139 } 140 </style> 141 </template> 142 143 <template data-name="Multiple parameters"> 144 <style> 145 @function --f(--x, --y, --z) { 146 result: var(--x) var(--y) var(--z); 147 } 148 #target { 149 --actual: --f(100px, auto, red); 150 --expected: 100px auto red; 151 } 152 </style> 153 </template> 154 155 <template data-name="Single parameter, typed"> 156 <style> 157 @function --f(--x <length>) { 158 result: var(--x); 159 } 160 #target { 161 --actual: --f(100px); 162 --expected: 100px; 163 } 164 </style> 165 </template> 166 167 <template data-name="Typed parameter with calc()"> 168 <style> 169 @function --f(--x <length>) { 170 result: var(--x); 171 } 172 #target { 173 --actual: --f(calc(100px + 1px)); 174 --expected: 101px; 175 } 176 </style> 177 </template> 178 179 <template data-name="Untyped parameter with calc()"> 180 <style> 181 @function --f(--x type(*)) { 182 result: var(--x); 183 } 184 #target { 185 --actual: --f(calc(100px + 1px)); 186 --expected: calc(100px + 1px); 187 } 188 </style> 189 </template> 190 191 <template data-name="Various typed parameters"> 192 <style> 193 @function --f(--x <length>, --y <angle>, --z <time>) { 194 result: var(--x) var(--y) var(--z); 195 } 196 #target { 197 --actual: --f(calc(100px + 1px), 1turn, 1000ms); 198 --expected: 101px 360deg 1s; 199 } 200 </style> 201 </template> 202 203 <template data-name="Parameter with complex type (auto)"> 204 <style> 205 @function --f(--x type(<length> | auto)) { 206 result: var(--x); 207 } 208 #target { 209 --actual: --f(auto); 210 --expected: auto; 211 } 212 </style> 213 </template> 214 215 <template data-name="Parameter with complex type (px)"> 216 <style> 217 @function --f(--x type(<length> | auto)) { 218 result: var(--x); 219 } 220 #target { 221 --actual: --f(10px); 222 --expected: 10px; 223 } 224 </style> 225 </template> 226 227 <template data-name="Passing argument to inner function"> 228 <style> 229 @function --f(--x) { 230 result: --g(var(--x)); 231 } 232 @function --g(--y) { 233 result: var(--y); 234 } 235 #target { 236 --actual: --f(12px); 237 --expected: 12px; 238 } 239 </style> 240 </template> 241 242 <!-- Arguments + var() --> 243 244 <template data-name="var() in argument resolved before call"> 245 <style> 246 @function --f(--x) { 247 --one: FAIL; 248 result: var(--x); 249 } 250 #target { 251 --one: 1px; 252 --actual: --f(calc(100px + var(--one))); 253 --expected: calc(100px + 1px); 254 } 255 </style> 256 </template> 257 258 <template data-name="var() in argument resolved before call, typed"> 259 <style> 260 @function --f(--x <length>) { 261 --one: FAIL; 262 result: var(--x); 263 } 264 #target { 265 --one: 1px; 266 --actual: --f(calc(100px + var(--one))); 267 --expected: 101px; 268 } 269 </style> 270 </template> 271 272 <template data-name="Argument captures IACVT due to invalid var()"> 273 <style> 274 @function --f(--x) { 275 result: var(--x, PASS); 276 } 277 #target { 278 --actual: --f(var(--unknown)); 279 --expected: PASS; 280 } 281 </style> 282 </template> 283 284 <template data-name="Argument captures IACVT due to invalid var(), typed"> 285 <style> 286 @function --f(--x <length>) { 287 result: var(--x, PASS); 288 } 289 #target { 290 --actual: --f(var(--unknown)); 291 --expected: PASS; 292 } 293 </style> 294 </template> 295 296 <template data-name="Argument captures IACVT due to type mismatch"> 297 <style> 298 @function --f(--x <length>) { 299 result: var(--x, PASS); 300 } 301 #target { 302 --actual: --f(red); 303 --expected: PASS; 304 } 305 </style> 306 </template> 307 308 <!-- Defaults --> 309 310 <template data-name="Single parameter with default value"> 311 <style> 312 @function --f(--x: PASS) { 313 result: var(--x); 314 } 315 #target { 316 --actual: --f(); 317 --expected: PASS; 318 } 319 </style> 320 </template> 321 322 <template data-name="Multiple parameters with defaults"> 323 <style> 324 @function --f(--x, --y: 2px, --z: 3px) { 325 result: var(--x) var(--y) var(--z); 326 } 327 #target { 328 --actual: --f(1px, 5px); 329 --expected: 1px 5px 3px; 330 } 331 </style> 332 </template> 333 334 <template data-name="Multiple parameters with defaults, typed"> 335 <style> 336 @function --f(--x, --y <length>: 2px, --z <length>: 3px) { 337 result: var(--x) var(--y) var(--z); 338 } 339 #target { 340 --actual: --f(1px, 5px); 341 --expected: 1px 5px 3px; 342 } 343 </style> 344 </template> 345 346 <template data-name="Default referencing another parameter"> 347 <style> 348 @function --f(--x, --y: var(--x)) { 349 result: var(--x) var(--y); 350 } 351 #target { 352 --x: FAIL; 353 --y: FAIL; 354 --actual: --f(5px); 355 --expected: 5px 5px; 356 } 357 </style> 358 </template> 359 360 <template data-name="Default referencing another parameter, local interference"> 361 <style> 362 @function --f(--x, --y: var(--x)) { 363 --x: 17px; 364 result: var(--x) var(--y); 365 } 366 #target { 367 --x: FAIL; 368 --y: FAIL; 369 --actual: --f(5px); 370 --expected: 17px 5px; 371 } 372 </style> 373 </template> 374 375 <template data-name="Default referencing another defaulted parameter"> 376 <style> 377 @function --f(--x: 5px, --y: var(--x)) { 378 result: var(--x) var(--y); 379 } 380 #target { 381 --x: FAIL; 382 --y: FAIL; 383 --actual: --f(); 384 --expected: 5px 5px; 385 } 386 </style> 387 </template> 388 389 <template data-name="Typed default with reference"> 390 <style> 391 @function --f(--x: 5px, --y <length>: calc(var(--x) + 1px)) { 392 result: var(--x) var(--y); 393 } 394 #target { 395 --x: FAIL; 396 --y: FAIL; 397 --actual: --f(); 398 --expected: 5px 6px; 399 } 400 </style> 401 </template> 402 403 <template data-name="IACVT arguments are defaulted"> 404 <style> 405 @function --f(--x: 1, --y, --z: 3) { 406 result: var(--x) var(--y) var(--z); 407 } 408 #target { 409 --actual: --f(var(--unknown), 2, var(--unknown)); 410 --expected: 1 2 3; 411 } 412 </style> 413 </template> 414 415 <template data-name="IACVT arguments are defaulted, typed"> 416 <style> 417 @function --f(--x <number>: 1, --y <number>, --z <number>: 3) { 418 result: var(--x) var(--y) var(--z); 419 } 420 #target { 421 --actual: --f(var(--unknown), 2, var(--unknown)); 422 --expected: 1 2 3; 423 } 424 </style> 425 </template> 426 427 <template data-name="Arguments are defaulted on type mismatch"> 428 <style> 429 @function --f(--x <number>: 1, --y <number>, --z <number>: 3) { 430 result: var(--x) var(--y) var(--z); 431 } 432 #target { 433 --actual: --f(red, 2, 360deg); 434 --expected: 1 2 3; 435 } 436 </style> 437 </template> 438 439 <!-- Locals --> 440 441 <template data-name="Unused local"> 442 <style> 443 @function --f() { 444 --x: 10px; 445 result: 1px; 446 } 447 #target { 448 --actual: --f(); 449 --expected: 1px; 450 } 451 </style> 452 </template> 453 454 <template data-name="Local does not affect outer scope"> 455 <style> 456 @function --f() { 457 --x: 10px; 458 result: 1px; 459 } 460 #target { 461 --x: 20px; 462 --actual: --f() var(--x); 463 --expected: 1px 20px; 464 } 465 </style> 466 </template> 467 468 <template data-name="Substituting local in result"> 469 <style> 470 @function --f() { 471 --x: 10px; 472 result: var(--x); 473 } 474 #target { 475 --actual: --f(); 476 --expected: 10px; 477 } 478 </style> 479 </template> 480 481 <template data-name="Substituting multiple locals in result"> 482 <style> 483 @function --f() { 484 --x: 10px; 485 --y: 17px; 486 result: var(--x) var(--y); 487 } 488 #target { 489 --actual: --f(); 490 --expected: 10px 17px; 491 } 492 </style> 493 </template> 494 495 <template data-name="Local referring to another local"> 496 <style> 497 @function --f() { 498 --x: 10px; 499 --y: var(--x); 500 result: var(--y); 501 } 502 #target { 503 --actual: --f(); 504 --expected: 10px; 505 } 506 </style> 507 </template> 508 509 <template data-name="Locals appearing after result"> 510 <style> 511 @function --f() { 512 result: var(--y); 513 --x: 10px; 514 --y: var(--x); 515 } 516 #target { 517 --actual: --f(); 518 --expected: 10px; 519 } 520 </style> 521 </template> 522 523 <template data-name="Locals cascading behavior"> 524 <style> 525 @function --f() { 526 --x: 10px; 527 --y: var(--x); 528 result: var(--y); 529 530 --x: 20px; /* Surprise! */ 531 } 532 #target { 533 --actual: --f(); 534 --expected: 20px; 535 } 536 </style> 537 </template> 538 539 <!-- Scoping --> 540 541 <template data-name="Custom properties are visible inside function"> 542 <style> 543 @function --f() { 544 result: var(--x); 545 } 546 #target { 547 --x: 10px; 548 --actual: --f(); 549 --expected: 10px; 550 } 551 </style> 552 </template> 553 554 <template data-name="Substitute local from outer scope"> 555 <style> 556 @function --f() { 557 --x: PASS; 558 result: --g(); 559 } 560 @function --g() { 561 result: var(--x); 562 } 563 #target { 564 --x: FAIL; 565 --actual: --f(); 566 --expected: PASS; 567 } 568 </style> 569 </template> 570 571 <template data-name="Substitute argument from outer scope"> 572 <style> 573 @function --f(--x) { 574 result: --g(); 575 } 576 @function --g() { 577 result: var(--x); 578 } 579 #target { 580 --x: FAIL; 581 --actual: --f(PASS); 582 --expected: PASS; 583 } 584 </style> 585 </template> 586 587 <template data-name="Inner argument shadowing outer argument"> 588 <style> 589 @function --f(--x) { 590 result: --g(PASS); 591 } 592 @function --g(--x) { 593 result: var(--x); 594 } 595 #target { 596 --x: FAIL; 597 --actual: --f(FAIL); 598 --expected: PASS; 599 } 600 </style> 601 </template> 602 603 <template data-name="Inner argument shadowing outer local"> 604 <style> 605 @function --f() { 606 --x: FAIL; 607 result: --g(PASS); 608 } 609 @function --g(--x) { 610 result: var(--x); 611 } 612 #target { 613 --x: FAIL; 614 --actual: --f(); 615 --expected: PASS; 616 } 617 </style> 618 </template> 619 620 <template data-name="Inner local shadowing outer argument"> 621 <style> 622 @function --f(--x) { 623 result: --g(); 624 } 625 @function --g() { 626 --x: PASS; 627 result: var(--x); 628 } 629 #target { 630 --x: FAIL; 631 --actual: --f(FAIL); 632 --expected: PASS; 633 } 634 </style> 635 </template> 636 637 <template data-name="Inner local shadowing outer local"> 638 <style> 639 @function --f() { 640 --x: FAIL; 641 result: --g(); 642 } 643 @function --g() { 644 --x: PASS; 645 result: var(--x); 646 } 647 #target { 648 --x: FAIL; 649 --actual: --f(); 650 --expected: PASS; 651 } 652 </style> 653 </template> 654 655 <template data-name="Referencing outer local containing var()"> 656 <style> 657 @function --f() { 658 --y: 1; 659 --x: var(--y); 660 result: --g(); 661 } 662 @function --g() { 663 --y: 0; 664 result: var(--x); 665 } 666 #target { 667 --y: 0; 668 --x: FAIL; 669 --actual: --f(); 670 --expected: 1; 671 } 672 </style> 673 </template> 674 675 <template data-name="Referencing outer typed argument"> 676 <style> 677 @function --f(--l <length>: 10.00px) { 678 result: --g(); 679 } 680 @function --g() { 681 result: var(--l); 682 } 683 #target { 684 --actual: --f(); 685 --expected: 10px; 686 } 687 </style> 688 </template> 689 690 <template data-name="Same function with different scopes"> 691 <style> 692 @function --one() { 693 --x: 1; 694 result: --f(); 695 } 696 @function --two() { 697 --x: 2; 698 result: --f(); 699 } 700 @function --three() { 701 --x: 3; 702 result: --f(); 703 } 704 @function --f() { 705 result: var(--x); 706 } 707 #target { 708 --x: 0; 709 --actual: --one() --two() --three() --f(); 710 --expected: 1 2 3 0; 711 } 712 </style> 713 </template> 714 715 <template data-name="Referencing local two frames up"> 716 <style> 717 @function --a() { 718 --x: 1; 719 result: --b(); 720 } 721 @function --b() { 722 result: --c(); 723 } 724 @function --c() { 725 result: var(--x); 726 } 727 #target { 728 --x: 0; 729 --actual: --a(); 730 --expected: 1; 731 } 732 </style> 733 </template> 734 735 <template data-name="IACVT outer local shadows property"> 736 <style> 737 @function --a() { 738 --x: var(--unknown); 739 result: --b(); 740 } 741 @function --b() { 742 result: var(--x, PASS); 743 } 744 #target { 745 --x: FAIL; 746 --actual: --a(); 747 --expected: PASS; 748 } 749 </style> 750 </template> 751 752 <template data-name="Inner function call should see resolved outer locals"> 753 <style> 754 @function --a() { 755 --x: --b(); 756 --y: var(--px); 757 result: var(--x); 758 } 759 760 @function --b() { 761 result: var(--y, FAIL); 762 } 763 #target { 764 --px: 10px; 765 --actual: --a(); 766 --expected: 10px; 767 } 768 </style> 769 </template> 770 771 <!-- 772 This the same test as the one above, but the *values* of --x and --y 773 are flipped, as are the references to those vars. If there is a bug 774 related to this behavior, it may be masked by "lucky" ordering of items 775 in a hash backing. Testing both ways ensures that at least one test 776 fails. 777 --> 778 <template data-name="Inner function call should see resolved outer locals (reverse)"> 779 <style> 780 @function --a() { 781 --x: var(--px); 782 --y: --b(); 783 result: var(--y); 784 } 785 786 @function --b() { 787 result: var(--x, FAIL); 788 } 789 #target { 790 --px: 10px; 791 --actual: --a(); 792 --expected: 10px; 793 } 794 </style> 795 </template> 796 797 <!-- Shadowing --> 798 799 <template data-name="Parameter shadows custom property"> 800 <style> 801 @function --f(--x) { 802 result: var(--x); 803 } 804 #target { 805 --x: FAIL; 806 --actual: --f(PASS); 807 --expected: PASS; 808 } 809 </style> 810 </template> 811 812 <template data-name="Local shadows parameter"> 813 <style> 814 @function --f(--x) { 815 --x: PASS; 816 result: var(--x); 817 } 818 #target { 819 --x: FAIL1; 820 --actual: --f(FAIL2); 821 --expected: PASS; 822 } 823 </style> 824 </template> 825 826 <template data-name="IACVT argument shadows outer scope"> 827 <style> 828 @function --f(--x) { 829 result: var(--x, PASS); 830 } 831 #target { 832 --x: FAIL; 833 --actual: --f(var(--unknown)); 834 --expected: PASS; 835 } 836 </style> 837 </template> 838 839 <template data-name="IACVT argument shadows outer scope, typed"> 840 <style> 841 @function --f(--x <length>) { 842 result: var(--x, PASS); 843 } 844 #target { 845 --x: FAIL; 846 --actual: --f(var(--unknown)); 847 --expected: PASS; 848 } 849 </style> 850 </template> 851 852 <template data-name="IACVT argument shadows outer scope, type mismatch"> 853 <style> 854 @function --f(--x <length>) { 855 result: var(--x, PASS); 856 } 857 #target { 858 --x: FAIL; 859 --actual: --f(red); 860 --expected: PASS; 861 } 862 </style> 863 </template> 864 865 <!-- Invalid invocations --> 866 867 <template data-name="Missing only argument"> 868 <style> 869 @function --f(--x) { 870 result: 10px; 871 } 872 #target { 873 --actual: --f(); 874 /* --expected: <guaranteed-invalid> */ 875 } 876 </style> 877 </template> 878 879 <template data-name="Missing one argument of several"> 880 <style> 881 @function --f(--x, --y, --z) { 882 result: 10px; 883 } 884 #target { 885 --actual: --f(1, 2); 886 /* --expected: <guaranteed-invalid> */ 887 } 888 </style> 889 </template> 890 891 <!-- 892 {}-wrappers. 893 894 https://drafts.csswg.org/css-values-5/#component-function-commas 895 --> 896 897 <template data-name="Passing list as only argument"> 898 <style> 899 @function --f(--x) { 900 result: var(--x); 901 } 902 #target { 903 --actual: --f({1px,2px}); 904 --expected: 1px,2px; 905 } 906 </style> 907 </template> 908 909 <template data-name="Passing list as first argument"> 910 <style> 911 @function --f(--x, --y) { 912 result: var(--x) | var(--y); 913 } 914 #target { 915 --actual: --f({1px, 2px}, 3px); 916 --expected: 1px, 2px | 3px; 917 } 918 </style> 919 </template> 920 921 <template data-name="Passing list as second argument"> 922 <style> 923 @function --f(--x, --y) { 924 result: var(--x) | var(--y); 925 } 926 #target { 927 --actual: --f(1px, {2px, 3px}); 928 --expected: 1px | 2px, 3px; 929 } 930 </style> 931 </template> 932 933 <template data-name="Passing comma as argument"> 934 <style> 935 @function --f(--x) { 936 result: var(--x); 937 } 938 #target { 939 --actual: --f({,}); 940 --expected: ,; 941 } 942 </style> 943 </template> 944 945 <template data-name="Passing {} as argument"> 946 <style> 947 @function --f(--x) { 948 result: var(--x); 949 } 950 #target { 951 --actual: --f({{}}); 952 --expected: {}; 953 } 954 </style> 955 </template> 956 957 <template data-name="Passing non-whole-value {} as argument"> 958 <style> 959 @function --f(--x) { 960 result: var(--x); 961 } 962 #target { 963 --actual: --f({foo{}}); 964 --expected: foo{}; 965 } 966 </style> 967 </template> 968 969 <!-- CSS-wide keywords --> 970 971 <!-- initial --> 972 973 <template data-name="Local variable with initial keyword"> 974 <style> 975 @function --f(--x: FAIL1) { 976 --x: FAIL2; 977 --x: initial; 978 result: var(--x); 979 } 980 #target { 981 --actual: --f(PASS); 982 --expected: PASS; 983 } 984 </style> 985 </template> 986 987 <template data-name="Local variable with initial keyword, defaulted"> 988 <style> 989 @function --f(--x: PASS) { 990 --x: FAIL; 991 --x: initial; 992 result: var(--x); 993 } 994 #target { 995 --actual: --f(); 996 --expected: PASS; 997 } 998 </style> 999 </template> 1000 1001 <template data-name="Local variable with initial keyword, no value via IACVT-capture"> 1002 <style> 1003 @function --f(--x) { 1004 --x: FAIL; 1005 --x: initial; 1006 result: var(--x, PASS); 1007 } 1008 #target { 1009 --actual: --f(var(--unknown)); 1010 --expected: PASS; 1011 } 1012 </style> 1013 </template> 1014 1015 <template data-name="Default with initial keyword"> 1016 <style> 1017 @function --f(--x: initial) { 1018 result: var(--x, PASS); 1019 } 1020 #target { 1021 --actual: --f(); 1022 --expected: PASS; 1023 } 1024 </style> 1025 </template> 1026 1027 <template data-name="initial appearing via fallback"> 1028 <style> 1029 @function --f(--x: PASS) { 1030 --x: var(--unknown, initial); 1031 result: var(--x); 1032 } 1033 #target { 1034 --actual: --f(); 1035 --expected: PASS; 1036 } 1037 </style> 1038 </template> 1039 1040 <!-- inherit --> 1041 1042 <template data-name="Local variable with inherit keyword"> 1043 <style> 1044 @function --f(--x: FAIL1) { 1045 --x: FAIL2; 1046 --x: inherit; 1047 result: var(--x); 1048 } 1049 #target { 1050 --x: PASS; 1051 --actual: --f(FAIL3); 1052 --expected: PASS; 1053 } 1054 </style> 1055 </template> 1056 1057 <template data-name="Local variable with inherit keyword (nested)"> 1058 <style> 1059 @function --f(--x: FAIL1) { 1060 --x: FAIL2; 1061 --x: inherit; 1062 result: var(--x); 1063 } 1064 @function --g(--x) { 1065 --x: PASS; 1066 result: --f(FAIL3); 1067 } 1068 #target { 1069 --actual: --g(FAIL4); 1070 --expected: PASS; 1071 } 1072 </style> 1073 </template> 1074 1075 <template data-name="Inheriting an invalid value"> 1076 <style> 1077 @function --f(--x) { 1078 --x: FAIL2; 1079 --x: inherit; 1080 result: var(--x, PASS); 1081 } 1082 @function --g() { 1083 --x: var(--unknown); 1084 result: --f(FAIL1); 1085 } 1086 #target { 1087 --actual: --g(); 1088 --expected: PASS; 1089 } 1090 </style> 1091 </template> 1092 1093 <template data-name="Default with inherit keyword"> 1094 <style> 1095 @function --f(--x: inherit) { 1096 result: var(--x); 1097 } 1098 #target { 1099 --x: PASS1; 1100 --actual: --f() --f(PASS2); 1101 --expected: PASS1 PASS2; 1102 } 1103 </style> 1104 </template> 1105 1106 <template data-name="Default with inherit keyword (nested)"> 1107 <style> 1108 @function --f(--x: inherit) { 1109 result: var(--x); 1110 } 1111 @function --g() { 1112 --x: PASS1; 1113 result: --f() --f(PASS2); 1114 } 1115 #target { 1116 --x: FAIL; 1117 --actual: --g(); 1118 --expected: PASS1 PASS2; 1119 } 1120 </style> 1121 </template> 1122 1123 <!-- Other CSS-wide keywords (invalid in locals) --> 1124 1125 <template data-name="Local with the unset keyword"> 1126 <style> 1127 @function --f() { 1128 --x: unset; 1129 result: var(--x, PASS); 1130 } 1131 #target { 1132 --actual: --f(); 1133 --expected: PASS; 1134 } 1135 </style> 1136 </template> 1137 1138 <template data-name="Local with the revert keyword"> 1139 <style> 1140 @function --f() { 1141 --x: revert; 1142 result: var(--x, PASS); 1143 } 1144 #target { 1145 --actual: --f(); 1146 --expected: PASS; 1147 } 1148 </style> 1149 </template> 1150 1151 <template data-name="Local with the revert-layer keyword"> 1152 <style> 1153 @function --f() { 1154 --x: revert-layer; 1155 result: var(--x, PASS); 1156 } 1157 #target { 1158 --actual: --f(); 1159 --expected: PASS; 1160 } 1161 </style> 1162 </template> 1163 1164 <!-- https://github.com/w3c/csswg-drafts/issues/10443 --> 1165 <template data-name="Local with the revert-rule keyword"> 1166 <style> 1167 @function --f() { 1168 --x: revert-rule; 1169 result: var(--x, PASS); 1170 } 1171 #target { 1172 --actual: --f(); 1173 --expected: PASS; 1174 } 1175 </style> 1176 </template> 1177 1178 <!-- Keywords in 'result' descriptor --> 1179 1180 <template data-name="initial keyword left unresolved on result descriptor"> 1181 <style> 1182 @function --f() { 1183 result: initial; 1184 } 1185 #target { 1186 --tmp: --f(); 1187 --actual: var(--tmp, PASS); 1188 --expected: PASS; 1189 } 1190 </style> 1191 </template> 1192 1193 <template data-name="inherit keyword left unresolved on result descriptor"> 1194 <style> 1195 @function --f() { 1196 result: inherit; 1197 } 1198 #parent { 1199 --tmp: PASS; 1200 } 1201 #target { 1202 --tmp: --f(); 1203 --actual: var(--tmp, FAIL); 1204 --expected: PASS; 1205 } 1206 </style> 1207 </template> 1208 1209 <template data-name="unset keyword left unresolved on result descriptor"> 1210 <style> 1211 @function --f() { 1212 result: unset; 1213 } 1214 #parent { 1215 --tmp: PASS; 1216 } 1217 #target { 1218 --tmp: --f(); 1219 --actual: var(--tmp, FAIL); 1220 --expected: PASS; 1221 } 1222 </style> 1223 </template> 1224 1225 <template data-name="revert keyword left unresolved on result descriptor"> 1226 <style> 1227 @function --f() { 1228 result: revert; 1229 } 1230 #parent { 1231 --tmp: PASS; 1232 } 1233 #target { 1234 --tmp: --f(); 1235 --actual: var(--tmp, FAIL); 1236 --expected: PASS; 1237 } 1238 </style> 1239 </template> 1240 1241 <template data-name="revert-layer keyword left unresolved on result descriptor"> 1242 <style> 1243 @function --f() { 1244 result: revert-layer; 1245 } 1246 @layer one { 1247 #target { 1248 --tmp: PASS; 1249 } 1250 } 1251 @layer two { 1252 #target { 1253 --tmp: --f(); 1254 --actual: var(--tmp, FAIL); 1255 --expected: PASS; 1256 } 1257 } 1258 </style> 1259 </template> 1260 1261 <!-- https://github.com/w3c/csswg-drafts/issues/10443 --> 1262 <template data-name="revert-rule keyword left unresolved on result descriptor"> 1263 <style> 1264 @function --f() { 1265 result: revert-rule; 1266 } 1267 #target { 1268 --tmp: PASS; 1269 } 1270 #target { 1271 --tmp: --f(); 1272 --actual: var(--tmp, FAIL); 1273 --expected: PASS; 1274 } 1275 </style> 1276 </template> 1277 1278 <template data-name="Keyword can be returned from function into local variable"> 1279 <style> 1280 @function --f() { 1281 result: initial; 1282 } 1283 @function --g(--x: PASS) { 1284 --x: FAIL1; 1285 --x: --f(); 1286 result: var(--x, FAIL2); 1287 } 1288 #target { 1289 --actual: --g(); 1290 --expected: PASS; 1291 } 1292 </style> 1293 </template> 1294 1295 1296 <template data-name="Can not return CSS-wide keyword as length"> 1297 <style> 1298 @function --f() returns <length> { 1299 result: revert-layer; 1300 } 1301 @layer one { 1302 #target { 1303 --tmp: FAIL; 1304 } 1305 } 1306 @layer two { 1307 #target { 1308 --tmp: --f(); 1309 --actual: var(--tmp, PASS); 1310 --expected: PASS; 1311 } 1312 } 1313 </style> 1314 </template> 1315 1316 <script> 1317 test_all_templates(); 1318 </script>