at-function-parsing.html (6210B)
1 <!DOCTYPE html> 2 <title>Custom Functions: Prelude Parsing</title> 3 <link rel="help" href="https://drafts.csswg.org/css-mixins-1/#function-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script> 7 function test_valid_prelude(rule_without_block) { 8 test(() => { 9 let s = new CSSStyleSheet(); 10 s.replaceSync(`${rule_without_block} {}`); 11 assert_equals(s.cssRules.length, 1); 12 }, `${rule_without_block} is valid`); 13 } 14 15 function test_invalid_prelude(rule_without_block) { 16 test(() => { 17 let s = new CSSStyleSheet(); 18 s.replaceSync(`${rule_without_block} {}`); 19 assert_equals(s.cssRules.length, 0); 20 }, `${rule_without_block} is invalid`); 21 } 22 23 test_valid_prelude('@function --foo()'); 24 test_valid_prelude('@function --foo( )'); 25 test_valid_prelude('@function --foo(--x)'); 26 test_valid_prelude('@function --foo( --x )'); 27 28 test_invalid_prelude('@function --foo ()'); 29 test_invalid_prelude('@function --foo (--x)'); 30 31 // All single <syntax-component> types. 32 test_valid_prelude('@function --foo(--x auto)'); 33 test_valid_prelude('@function --foo(--x <angle>)'); 34 test_valid_prelude('@function --foo(--x <color>)'); 35 test_valid_prelude('@function --foo(--x <custom-ident>)'); 36 test_valid_prelude('@function --foo(--x <image>)'); 37 test_valid_prelude('@function --foo(--x <integer>)'); 38 test_valid_prelude('@function --foo(--x <length>)'); 39 test_valid_prelude('@function --foo(--x <length-percentage>)'); 40 test_valid_prelude('@function --foo(--x <number>)'); 41 test_valid_prelude('@function --foo(--x <percentage>)'); 42 test_valid_prelude('@function --foo(--x <resolution>)'); 43 test_valid_prelude('@function --foo(--x <string>)'); 44 test_valid_prelude('@function --foo(--x <time>)'); 45 test_valid_prelude('@function --foo(--x <url>)'); 46 test_valid_prelude('@function --foo(--x <transform-function>)'); 47 test_valid_prelude('@function --foo(--x <transform-list>)'); 48 49 test_valid_prelude('@function --foo(--x type(auto))'); 50 test_valid_prelude('@function --foo(--x type(<length>))'); 51 test_valid_prelude('@function --foo(--x type(<length> | auto))'); 52 test_valid_prelude('@function --foo(--x type(none | auto))'); 53 test_valid_prelude('@function --foo(--x type(*))'); 54 55 // Multiple parameters. 56 test_valid_prelude('@function --foo(--x, --y)'); 57 test_valid_prelude('@function --foo(--x, --y, --z)'); 58 test_valid_prelude('@function --foo(--x <length>, --y, --z)'); 59 test_valid_prelude('@function --foo(--x, --y <number>, --z <angle>)'); 60 61 // Defaults. 62 test_valid_prelude('@function --foo(--x : 10px)'); 63 test_valid_prelude('@function --foo(--x type(*): 10px)'); 64 test_valid_prelude('@function --foo(--x <length>: 10px)'); 65 test_valid_prelude('@function --foo(--x <length>: 10px, --y)'); 66 test_valid_prelude('@function --foo(--x, --y <length>: 10px)'); 67 test_valid_prelude('@function --foo(--x type(<length> | auto): auto)'); 68 test_valid_prelude('@function --foo(--x type(<length> | auto) : auto)'); 69 // A parameter without a default may appear after a parameter with 70 // a default, even though there's no way to actually call --foo() 71 // with just --y: 72 test_valid_prelude('@function --foo(--x:1px, --y, --z:2px)'); 73 74 test_invalid_prelude('@function --foo(--x: 10px !important)'); 75 76 // Default type mismatch. 77 test_invalid_prelude('@function --foo(--x <length>: 10deg)'); 78 test_invalid_prelude('@function --foo(--x <angle>: 10px)'); 79 test_invalid_prelude('@function --foo(--x <color>: 10px)'); 80 test_invalid_prelude('@function --foo(--x type(<color>+): red 5)'); 81 test_invalid_prelude('@function --foo(--x type(auto | none): thing)'); 82 83 // Lists. 84 test_valid_prelude('@function --foo(--x <length>#)'); 85 test_valid_prelude('@function --foo(--x <length>+)'); 86 test_valid_prelude('@function --foo(--x type(<length>+))'); 87 test_valid_prelude('@function --foo(--x <transform-function>#)'); 88 test_valid_prelude('@function --foo(--x <transform-function>+)'); 89 // <transform-list> is special: a multiplier cannot follow it. 90 test_invalid_prelude('@function --foo(--x <transform-list>#)'); 91 test_invalid_prelude('@function --foo(--x <transform-list>+)'); 92 93 test_invalid_prelude('@function --foo(--x *)'); 94 test_invalid_prelude('@function --foo(--x !)'); 95 test_invalid_prelude('@function --foo(--x 50px)'); 96 test_invalid_prelude('@function --foo(--x <length> | auto)'); 97 test_invalid_prelude('@function --foo(--x none | auto)'); 98 test_invalid_prelude('@function --foo(--x <dino>)'); 99 test_invalid_prelude('@function --foo(!)'); 100 test_invalid_prelude('@function --foo(--x: !)'); 101 test_invalid_prelude('@function --foo(--x type(!))'); 102 test_invalid_prelude('@function --foo(,)'); 103 test_invalid_prelude('@function --foo(,,,)'); 104 test_invalid_prelude('@function --foo(--x, ;)'); 105 test_invalid_prelude('@function --foo(;)'); 106 test_invalid_prelude('@function --foo(])'); 107 test_invalid_prelude('@function --foo(, --x])'); 108 109 // Return value types. 110 test_valid_prelude('@function --foo(--x) returns type(*)'); 111 test_valid_prelude('@function --foo(--x) returns <length>'); 112 test_valid_prelude('@function --foo(--x) returns <length>+'); 113 test_valid_prelude('@function --foo(--x) returns type(<length>)'); 114 test_valid_prelude('@function --foo(--x) returns type(<length> | auto)'); 115 test_valid_prelude('@function --foo(--x) returns type(foo | bar)'); 116 117 test_invalid_prelude('@function --foo(--x) !'); 118 test_invalid_prelude('@function --foo(--x) ! <length>'); 119 test_invalid_prelude('@function --foo(--x) returns <length>!'); 120 test_invalid_prelude('@function --foo(--x) length'); 121 test_invalid_prelude('@function --foo(--x) returns'); 122 test_invalid_prelude('@function --foo(--x) returns '); 123 test_invalid_prelude('@function --foo(--x) returns *'); 124 test_invalid_prelude('@function --foo(--x) returns <transform-list>#'); 125 test_invalid_prelude('@function --foo(--x) returns <transform-list>+'); 126 test_invalid_prelude('@function --foo(--x) returns auto | none'); 127 test_invalid_prelude('@function --foo(--x): <length>'); 128 test_invalid_prelude('@function --foo(--x): length'); 129 test_invalid_prelude('@function --foo(--x) returneth <length>'); 130 </script>