register-property-syntax-parsing.html (11925B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" /> 4 <link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#supported-syntax-strings" /> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="./resources/utils.js"></script> 8 <script> 9 10 let assert_valid = test_initial_value_valid; 11 let assert_invalid = test_initial_value_invalid; 12 13 assert_valid("*", "a"); 14 assert_valid(" * ", "b"); 15 assert_valid("<length>", "2px"); 16 assert_valid(" <number>", "5"); 17 assert_valid("<percentage> ", "10%"); 18 assert_valid("<color>+", "red"); 19 assert_valid(" <length>+ | <percentage>", "2px 8px"); 20 assert_valid(" <length>+ | <color>#", "red, blue"); 21 assert_valid("<length>|<percentage>|<length-percentage>", "2px"); // Valid but silly 22 assert_valid("<color> | <image> | <url> | <integer> | <angle>", "red"); 23 assert_valid("<time> | <resolution> | <transform-list> | <custom-ident>", "red"); 24 assert_valid("\t<color>\n| foo", "foo"); 25 26 assert_valid("*", ":> hello"); 27 assert_valid("*", "([ brackets ]) { yay (??)}"); 28 assert_valid("*", "yep 'this is valid too'"); 29 assert_valid("*", "unmatched opening bracket is valid :("); 30 assert_valid("*", '"'); 31 assert_valid("*", "default"); 32 33 assert_valid("<length>", "0"); 34 assert_valid("<length>", "10px /*:)*/"); 35 assert_valid("<length>", " calc(-2px)"); 36 assert_valid("<length>", "calc(2px*4 + 10px)"); 37 assert_valid("<length>", "7.1e-4cm"); 38 assert_valid("<length>", "calc(7in - 12px)"); 39 assert_valid("<length>+", "2px 7px calc(8px)"); 40 assert_valid("<length>#", "2px, 7px, calc(8px)"); 41 assert_valid("<percentage>", "-9.3e3%"); 42 assert_valid("<length-percentage>", "-54%"); 43 assert_valid("<length-percentage>", "0"); 44 assert_valid("<length-percentage>", "calc(-11px + 10.4%)"); 45 assert_valid("<length>", "10vmin"); 46 assert_valid("<percentage> | <length>+", "calc(100vh - 10px) 30px"); 47 48 assert_valid("<number>", "-109"); 49 assert_valid("<number>", "2.3e4"); 50 assert_valid("<number>", "calc(1 / 2)"); 51 assert_valid("<integer>", "-109"); 52 assert_valid("<integer>", "19"); 53 assert_valid("<integer>", "calc(1)"); 54 assert_valid("<integer>", "calc(1 + 2)"); 55 assert_valid("<integer>", "calc(3.1415)"); 56 assert_valid("<integer>", "calc(3.1415 + 3.1415)"); 57 58 assert_valid("<angle>", "10deg"); 59 assert_valid("<angle>", "20.5rad"); 60 assert_valid("<angle>", "calc(50grad + 3.14159rad)"); 61 assert_valid("<time>", "2s"); 62 assert_valid("<time>", "calc(2s - 9ms)"); 63 assert_valid("<resolution>", "10dpi"); 64 assert_valid("<resolution>", "3dPpX"); 65 assert_valid("<transform-function>", "translateX(2px)"); 66 assert_valid("<transform-function>|<integer>", "5"); 67 assert_valid("<transform-function>|<integer>", "scale(2)"); 68 assert_valid("<transform-function>+", "translateX(2px) rotate(42deg)"); 69 assert_valid("<transform-list>", "scale(2)"); 70 assert_valid("<transform-list>", "translateX(2px) rotate(20deg)"); 71 72 // <string> is accepted in https://github.com/w3c/css-houdini-drafts/issues/1103 73 assert_valid("<string>", "'foo bar'"); 74 assert_valid("<string>", " 'foo bar' "); 75 assert_valid("<string>", "'foo bar"); 76 assert_valid("<string>", `'"foo" bar'`); 77 assert_valid("<string>", '"bar baz"'); 78 assert_valid("<string>", `"bar 'baz'"`); 79 assert_valid("<string>", `"bar 'baz'`); 80 assert_valid("<string>+", "'foo' 'bar'"); 81 assert_valid("<string>#", "'foo', 'bar'"); 82 assert_valid("<string>+ | <string>#", "'foo' 'bar'"); 83 assert_valid("<string>+ | <string>#", " 'foo' 'bar'"); 84 assert_valid("<string>+ | <string>#", `'foo' "bar"`); 85 assert_valid("<string>+ | <string>#", `'foo' "bar`); 86 assert_valid("<string># | <string>+", "'foo', 'bar'"); 87 assert_valid("<string># | <string>+", "'foo', 'bar' "); 88 assert_valid("<string># | <string>+", `"foo", 'bar'`); 89 assert_valid("<string># | <string>+", `"foo", 'bar`); 90 91 assert_valid("<color>", "rgb(12, 34, 56)"); 92 assert_valid("<color>", "lightgoldenrodyellow"); 93 assert_valid("<image>", "url(a)"); 94 assert_valid("<image>", "linear-gradient(yellow, blue)"); 95 assert_valid("<url>", "url(a)"); 96 97 assert_valid("<color>+", "yellow blue"); 98 assert_valid("<color>+", "yellow blue "); 99 assert_valid("<color>+ | <color>", "yellow blue"); 100 assert_valid("<color> | <color>+", "yellow blue"); 101 assert_valid("<color># | <color>", "yellow, blue"); 102 assert_valid("<color> | <color>#", "yellow, blue"); 103 assert_valid("<color># | <color>+", "yellow blue"); 104 assert_valid("<color>+ | <color>#", "yellow, blue"); 105 assert_valid("<color>+ | yellow", "yellow blue"); 106 assert_valid("yellow", "yellow"); 107 assert_valid("yellow | <color>+", "yellow blue"); 108 assert_valid("<color># | yellow", "yellow, blue"); 109 assert_valid("yellow | <color>#", "yellow, blue"); 110 assert_valid("<transform-list> | <transform-function> ", "scale(2) rotate(90deg)"); 111 assert_valid("<transform-function> | <transform-list>", "scale(2) rotate(90deg)"); 112 assert_valid("<transform-list> | <transform-function>+ ", "scale(2) rotate(90deg)"); 113 assert_valid("<transform-function>+ | <transform-list>", "scale(2) rotate(90deg)"); 114 assert_valid("<transform-list> | <transform-function># ", "scale(2) rotate(90deg)"); 115 assert_valid("<transform-function># | <transform-list>", "scale(2) rotate(90deg)"); 116 assert_valid("<transform-list> | <transform-function># ", "scale(2), rotate(90deg)"); 117 assert_valid("<transform-function># | <transform-list>", "scale(2), rotate(90deg)"); 118 assert_valid("<transform-list>", "scale(2) rotate(90deg) "); 119 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1"); 120 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1 1"); 121 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1%"); 122 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1% 1%"); 123 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1px"); 124 assert_valid("<integer>+ | <percentage>+ | <length>+ ", "1px 1px"); 125 126 assert_valid("banana", "banana"); 127 assert_valid("bAnAnA", "bAnAnA"); 128 assert_valid("ba-na-nya", "ba-na-nya"); 129 assert_valid("banana", "banan\\61"); 130 assert_valid("banan\\61", "banana"); 131 assert_valid("<custom-ident>", "banan\\61"); 132 assert_valid("big | bigger | BIGGER", "bigger"); 133 assert_valid("foo+|bar", "foo foo foo"); 134 135 assert_valid("banana\t", "banana"); 136 assert_valid("\nbanana\r\n", "banana"); 137 assert_valid("ba\f\n|\tna\r|nya", "nya"); 138 139 assert_valid(null, "null"); 140 assert_valid(undefined, "undefined"); 141 assert_valid(["array"], "array"); 142 143 assert_valid("\\1F914", "🤔"); 144 assert_valid("hmm\\1F914", "hmm🤔"); 145 assert_valid("\\1F914hmm", "🤔hmm"); 146 assert_valid("\\1F914 hmm", "🤔hmm"); 147 assert_valid("\\1F914\\1F914", "🤔🤔"); 148 149 // Invalid syntax 150 assert_invalid("<color>#", "yellow blue"); 151 assert_invalid("banana,nya", "banana"); 152 assert_invalid("<\\6c ength>", "10px"); 153 assert_invalid("<banana>", "banana"); 154 assert_invalid("<Number>", "10"); 155 assert_invalid("<length", "10px"); 156 assert_invalid("<LENGTH>", "10px"); 157 assert_invalid("< length>", "10px"); 158 assert_invalid("<length >", "10px"); 159 assert_invalid("<length> +", "10px"); 160 assert_invalid("<transform-list>+", "scale(2)"); 161 assert_invalid("<transform-list>#", "scale(2)"); 162 163 assert_invalid("<length>++", "10px"); 164 assert_invalid("<length>##", "10px"); 165 assert_invalid("<length>+#", "10px"); 166 assert_invalid("<length>#+", "10px"); 167 assert_invalid("<length> | *", "10px"); 168 assert_invalid("<length>+", "2px,7px,calc(8px)"); 169 assert_invalid("<length>#", "2px 7px calc(8px)"); 170 assert_invalid("*|banana", "banana"); 171 assert_invalid("|banana", "banana"); 172 assert_invalid("*+", "banana"); 173 assert_invalid("|", "banana"); 174 assert_invalid(" |", "banana"); 175 assert_invalid("||", "banana"); 176 assert_invalid("foo bar", "foo bar"); 177 assert_invalid("foo foo foo", "foo foo foo"); 178 assert_invalid("foo § bar", "foo § bar"); 179 assert_invalid("foo \\1F914 bar", "foo \\1F914 bar"); 180 assert_invalid("<length> <number>", "0px 0"); 181 assert_invalid("<length> <length> <length>", "0px 0px 0px"); 182 183 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1 1%"); 184 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1% 1"); 185 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1px 1"); 186 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1 1px"); 187 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1px 1%"); 188 assert_invalid("<integer>+ | <percentage>+ | <length>+ ", "1% 1px"); 189 190 assert_invalid("initial", "initial"); 191 assert_invalid("inherit", "inherit"); 192 assert_invalid("unset", "unset"); 193 assert_invalid("revert", "revert"); 194 assert_invalid("revert-layer", "revert-layer"); 195 assert_invalid("default", "default"); 196 assert_invalid("<length>|initial", "10px"); 197 assert_invalid("<length>|INHERIT", "10px"); 198 assert_invalid("<percentage>|unsEt", "2%"); 199 assert_invalid("<color>|REVert", "red"); 200 assert_invalid("<integer>|deFAUlt", "1"); 201 202 // Invalid initialValue 203 // The 5 tests that follow are not clearly backed by the specification, 204 // but they're probably a good idea and we should change the spec. See 205 // https://github.com/w3c/css-houdini-drafts/issues/1076 . 206 assert_invalid("*", "initial"); 207 assert_invalid("*", "inherit"); 208 assert_invalid("*", "unset"); 209 assert_invalid("*", "revert"); 210 assert_invalid("*", "revert-layer"); 211 // ... end possibly-invalid tests. 212 assert_invalid("<custom-ident>", "initial"); 213 assert_invalid("<custom-ident>", "inherit"); 214 assert_invalid("<custom-ident>", "unset"); 215 assert_invalid("<custom-ident>", "revert"); 216 assert_invalid("<custom-ident>", "revert-layer"); 217 assert_invalid("<custom-ident>", "default"); 218 assert_invalid("<custom-ident>+", "foo initial bar"); 219 assert_invalid("<custom-ident>+", "foo inherit bar"); 220 assert_invalid("<custom-ident>+", "foo unset bar"); 221 assert_invalid("<custom-ident>+", "foo revert bar"); 222 assert_invalid("<custom-ident>+", "foo revert-layer bar"); 223 assert_invalid("<custom-ident>+", "foo default bar"); 224 225 assert_invalid("*", ")"); 226 assert_invalid("*", "([)]"); 227 assert_invalid("*", "whee!"); 228 assert_invalid("*", '"\n'); 229 assert_invalid("*", "url(moo '')"); 230 assert_invalid("*", "semi;colon"); 231 assert_invalid("*", "var(invalid var ref)"); 232 assert_invalid("*", "var(--foo)"); 233 234 assert_invalid("banana", "bAnAnA"); 235 assert_invalid("<length>", "var(--moo)"); 236 assert_invalid("<length>", "10"); 237 assert_invalid("<length>", "10%"); 238 assert_invalid("<length>", "calc(5px + 10%)"); 239 assert_invalid("<length>", "10em"); 240 assert_invalid("<length>", "calc(4px + 3em)"); 241 assert_invalid("<length>", "calc(4px + calc(8 * 2em))"); 242 assert_invalid("<length>+", "calc(2ex + 16px)"); 243 assert_invalid("<length>+", "10px calc(20px + 4rem)"); 244 assert_invalid("<length>+", ""); 245 assert_invalid("<length>#", ""); 246 assert_invalid("<length>", "10px;"); 247 assert_invalid("<length-percentage>", "calc(2px + 10% + 7ex)"); 248 assert_invalid("<percentage>", "0"); 249 assert_invalid("<integer>", "1.0"); 250 assert_invalid("<integer>", "1e0"); 251 assert_invalid("<number>|foo", "foo var(--foo, bla)"); 252 assert_invalid("Foo | bar", "foo"); 253 assert_invalid("Foo | bar", "Bar"); 254 255 assert_invalid("<angle>", "0"); 256 assert_invalid("<angle>", "10%"); 257 assert_invalid("<time>", "2px"); 258 assert_invalid("<resolution>", "10"); 259 260 // "The allowed range of <resolution> values always excludes negative values" 261 // https://www.w3.org/TR/css-values-4/#resolution-value 262 assert_invalid("<resolution>", "-5.3dpcm"); 263 264 assert_invalid("<transform-function>", "scale()"); 265 assert_invalid("<transform-list>", "scale()"); 266 assert_invalid("<transform-list>+", "translateX(2px) rotate(20deg)"); 267 assert_invalid("<color>", "fancy-looking"); 268 assert_invalid("<image>", "banana.png"); 269 assert_invalid("<url>", "banana.png"); 270 271 assert_invalid("<string>", "foo bar'"); 272 assert_invalid("<string>", 'foo bar"'); 273 assert_invalid("<string>", '"foo" bar'); 274 assert_invalid("<string>", "'foo' 2px"); 275 assert_invalid("<string>", "foo"); 276 assert_invalid("<string>", "1"); 277 assert_invalid("<string>", "1px"); 278 assert_invalid("<string>", "calc(1 + 2)"); 279 assert_invalid("<string>", "rgb(255, 99, 71)"); 280 assert_invalid("<string>+", "foo 'bar'"); 281 assert_invalid("<string>#", "foo, 'bar'"); 282 assert_invalid("<string># | <string>+", "foo', 'bar'"); 283 </script>