font-palette-values-valid.html (11721B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>CSS Fonts Module Level 4: parsing @font-palette-values</title> 6 <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-values"> 7 <meta name="assert" content="@font-palette-values is parsed correctly."> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <style id="style"> 11 /* 0 */ 12 @font-palette-values --A { 13 } 14 15 /* 1 */ 16 @font-palette-values --B { 17 font-weight: 400; 18 } 19 20 /* 2 */ 21 @font-palette-values --C { 22 font-family: foo; 23 font-family: bar; 24 base-palette: 1; 25 base-palette: "baz"; 26 base-palette: 2; 27 override-colors: "a" #123; 28 override-colors: 3 #123; 29 override-colors: "b" #123; 30 } 31 32 /* 3 */ 33 @font-palette-values --D { 34 base-palette: "foo"; 35 base-palette: 1; 36 base-palette: "bar"; 37 override-colors: 3 #123; 38 override-colors: "baz" #123; 39 override-colors: 4 #123; 40 } 41 42 /* 4 */ 43 @font-palette-values --E { 44 override-colors: 3 rgb(17, 34, 51); 45 override-colors: 3 rgb(68, 85, 102); 46 } 47 48 /* 5 */ 49 @font-palette-values --F { 50 font-family: "foo"; 51 } 52 53 /* 6 */ 54 @font-palette-values --G { 55 override-colors: 3 rgb(17, 34, 51), 4 rgb(68, 85, 102); 56 } 57 58 /* 7 */ 59 @font-palette-values --H { 60 override-colors: 3 rgb(17, 34, 51), 3 rgb(68, 85, 102); 61 } 62 63 /* 8 */ 64 @font-palette-values --I { 65 override-colors: 0 #0000FF; 66 } 67 68 /* 9 */ 69 @font-palette-values --J { 70 override-colors: 0 green; 71 } 72 73 /* 10 */ 74 @font-palette-values --K { 75 override-colors: 0 transparent; 76 } 77 78 /* 11 */ 79 @font-palette-values --L { 80 override-colors: 0 rgba(1 2 3 / 4); 81 } 82 83 /* 12 */ 84 @font-palette-values --M { 85 override-colors: 0 lab(29.2345% 39.3825 20.0664); 86 } 87 88 /* 13 */ 89 @font-palette-values --N { 90 override-colors: 0 color(display-p3 100% 100% 100%); 91 } 92 93 /* 14 */ 94 @font-palette-values --O { 95 override-colors: 0 transparent; 96 } 97 98 /* 15 */ 99 @font-palette-values -- { 100 } 101 102 /* 16 */ 103 @font-palette-values --P { 104 font-family: foo, bar, baz; 105 } 106 107 /* 17 */ 108 @font-palette-values --Q { 109 override-colors: 0 color-mix(in lch, red, blue); 110 } 111 112 /* 18 */ 113 @font-palette-values --R { 114 override-colors: 0 color-mix(in lch, color-mix(in lch, red, blue), color-mix(in lch, green, white)); 115 } 116 </style> 117 </head> 118 <body> 119 <script> 120 let rules = document.getElementById("style").sheet.cssRules; 121 let supports_lab = CSS.supports('color', 'lab(29.2345% 39.3825 20.0664)'); 122 let supports_display_p3_color_space = 123 CSS.supports('color', 'color(display-p3 100% 100% 100%)'); 124 125 test(function() { 126 let text = rules[0].cssText; 127 assert_not_equals(text.indexOf("@font-palette-values "), -1); 128 assert_not_equals(text.indexOf(" --A "), -1); 129 assert_not_equals(text.indexOf("{"), -1); 130 assert_not_equals(text.indexOf("}"), -1); 131 assert_equals(text.indexOf("font-family"), -1); 132 assert_equals(text.indexOf("base-palette"), -1); 133 assert_equals(text.indexOf("override-colors"), -1); 134 }); 135 136 test(function() { 137 let rule = rules[0]; 138 assert_equals(rule.constructor.name, "CSSFontPaletteValuesRule"); 139 assert_equals(rule.name, "--A"); 140 assert_equals(rule.fontFamily, ""); 141 assert_equals(rule.basePalette, ""); 142 assert_equals(rule.overrideColors, ""); 143 }); 144 145 test(function() { 146 let text = rules[1].cssText; 147 assert_equals(text.indexOf("font-weight"), -1); 148 }); 149 150 test(function() { 151 let rule = rules[1]; 152 assert_equals(rule.name, "--B"); 153 assert_equals(rule.fontFamily, ""); 154 assert_equals(rule.basePalette, ""); 155 assert_equals(rule.overrideColors, ""); 156 }); 157 158 test(function() { 159 let text = rules[2].cssText; 160 assert_equals(text.indexOf("font-family: foo;"), -1); 161 assert_not_equals(text.indexOf("font-family: bar;"), -1); 162 assert_equals(text.indexOf("base-palette: 1;"), -1); 163 assert_equals(text.indexOf("base-palette: \"baz\""), -1); 164 assert_not_equals(text.indexOf("base-palette: 2;"), -1); 165 assert_equals(text.indexOf("override-colors: \"a\""), -1); 166 assert_not_equals(text.indexOf("override-colors: 3"), -1); 167 assert_equals(text.indexOf("override-colors: \"b\""), -1); 168 }); 169 170 test(function() { 171 let rule = rules[2]; 172 assert_equals(rule.name, "--C"); 173 assert_equals(rule.fontFamily, "bar"); 174 assert_equals(rule.basePalette, "2"); 175 assert_equals(rule.overrideColors, "3 rgb(17, 34, 51)"); 176 }); 177 178 test(function() { 179 let text = rules[3].cssText; 180 assert_equals(text.indexOf("base-palette: \"foo\";"), -1); 181 assert_not_equals(text.indexOf("base-palette: 1"), -1); 182 assert_equals(text.indexOf("base-palette: \"bar\";"), -1); 183 assert_equals(text.indexOf("override-colors: 3"), -1); 184 assert_equals(text.indexOf("override-colors: \"baz\""), -1); 185 assert_not_equals(text.indexOf("override-colors: 4"), -1); 186 }); 187 188 test(function() { 189 let rule = rules[3]; 190 assert_equals(rule.name, "--D"); 191 assert_equals(rule.fontFamily, ""); 192 assert_equals(rule.basePalette, "1"); 193 assert_equals(rule.overrideColors.indexOf("),"), -1); 194 assert_equals(rule.overrideColors.indexOf("4 "), 0); 195 assert_not_equals(rule.overrideColors.indexOf("rgb"), -1); 196 }); 197 198 test(function() { 199 let text = rules[4].cssText; 200 assert_equals(text.indexOf("51"), -1); 201 assert_not_equals(text.indexOf("102"), -1); 202 }); 203 204 test(function() { 205 let rule = rules[4]; 206 assert_equals(rule.name, "--E"); 207 assert_equals(rule.fontFamily, ""); 208 assert_equals(rule.basePalette, ""); 209 assert_equals(rule.overrideColors.indexOf("),"), -1); 210 assert_equals(rule.overrideColors.indexOf("3 "), 0); 211 assert_not_equals(rule.overrideColors.indexOf("102"), -1); 212 }); 213 214 test(function() { 215 let text = rules[5].cssText; 216 assert_not_equals(text.indexOf("foo"), -1); 217 }); 218 219 test(function() { 220 let rule = rules[5]; 221 assert_equals(rule.name, "--F"); 222 assert_in_array(rule.fontFamily, ["foo", "\"foo\""]); 223 assert_equals(rule.basePalette, ""); 224 assert_equals(rule.overrideColors, ""); 225 }); 226 227 test(function() { 228 let text = rules[6].cssText; 229 assert_not_equals(text.indexOf("51"), -1); 230 assert_not_equals(text.indexOf("102"), -1); 231 }); 232 233 test(function() { 234 let rule = rules[6]; 235 assert_equals(rule.name, "--G"); 236 assert_equals(rule.fontFamily, ""); 237 assert_equals(rule.basePalette, ""); 238 assert_equals(rule.overrideColors.split("),").length, 2); 239 assert_equals(rule.overrideColors.indexOf("3 "), 0); 240 assert_not_equals(rule.overrideColors.indexOf("), 4 "), -1); 241 assert_not_equals(rule.overrideColors.indexOf("51"), -1); 242 assert_not_equals(rule.overrideColors.indexOf("102"), -1); 243 }); 244 245 test(function() { 246 let text = rules[7].cssText; 247 assert_not_equals(text.indexOf("51"), -1); 248 assert_not_equals(text.indexOf("102"), -1); 249 }); 250 251 test(function() { 252 let rule = rules[7]; 253 assert_equals(rule.name, "--H"); 254 assert_equals(rule.fontFamily, ""); 255 assert_equals(rule.basePalette, ""); 256 assert_not_equals(rule.overrideColors.indexOf("),"), -1); 257 assert_equals(rule.overrideColors.indexOf("3 "), 0); 258 assert_not_equals(rule.overrideColors.indexOf("), 3 "), -1); 259 assert_not_equals(rule.overrideColors.indexOf("51"), -1); 260 assert_not_equals(rule.overrideColors.indexOf("102"), -1); 261 }); 262 263 test(function() { 264 let text = rules[8].cssText; 265 assert_not_equals(text.indexOf("override-colors"), -1); 266 assert_not_equals(text.indexOf("rgb(0, 0, 255)"), -1); 267 }); 268 269 test(function() { 270 let rule = rules[8]; 271 assert_equals(rule.name, "--I"); 272 assert_equals(rule.fontFamily, ""); 273 assert_equals(rule.basePalette, ""); 274 assert_equals(rule.overrideColors.indexOf("),"), -1); 275 assert_not_equals(rule.overrideColors.indexOf("rgb(0, 0, 255)"), -1); 276 }); 277 278 test(function() { 279 let text = rules[9].cssText; 280 assert_not_equals(text.indexOf("override-colors"), -1); 281 assert_true(text.includes("rgb(0, 128, 0)") || 282 text.includes("green")); 283 }); 284 285 test(function() { 286 let rule = rules[9]; 287 assert_equals(rule.name, "--J"); 288 assert_equals(rule.fontFamily, ""); 289 assert_equals(rule.basePalette, ""); 290 assert_equals(rule.overrideColors.indexOf("),"), -1); 291 assert_true(rule.overrideColors.includes("rgb(0, 128, 0)") || 292 rule.overrideColors.includes("green")) 293 }); 294 295 test(function() { 296 let text = rules[10].cssText; 297 assert_not_equals(text.indexOf("override-colors"), -1); 298 assert_true(text.includes("rgba(0, 0, 0, 0)") || 299 text.includes("transparent")); 300 }); 301 302 test(function() { 303 let rule = rules[10]; 304 assert_equals(rule.name, "--K"); 305 assert_equals(rule.fontFamily, ""); 306 assert_equals(rule.basePalette, ""); 307 assert_equals(rule.overrideColors.indexOf("),"), -1); 308 assert_true(rule.overrideColors.includes("rgba(0, 0, 0, 0)") || 309 rule.overrideColors.includes("transparent")); 310 }); 311 312 test(function() { 313 let text = rules[11].cssText; 314 assert_not_equals(text.indexOf("override-colors"), -1); 315 assert_not_equals(text.indexOf("2"), -1); 316 }); 317 318 test(function() { 319 let rule = rules[11]; 320 assert_equals(rule.name, "--L"); 321 assert_equals(rule.fontFamily, ""); 322 assert_equals(rule.basePalette, ""); 323 assert_equals(rule.overrideColors.indexOf("),"), -1); 324 assert_not_equals(rule.overrideColors.indexOf("2"), -1); 325 }); 326 327 test(function() { 328 let text = rules[12].cssText; 329 if (supports_lab) { 330 assert_not_equals(text.indexOf("override-colors"), -1); 331 assert_not_equals(text.indexOf("29"), -1); 332 } 333 }); 334 335 test(function() { 336 let rule = rules[12]; 337 assert_equals(rule.name, "--M"); 338 assert_equals(rule.fontFamily, ""); 339 assert_equals(rule.basePalette, ""); 340 if (supports_lab) { 341 assert_equals(rule.overrideColors.indexOf("),"), -1); 342 assert_not_equals(rule.overrideColors.indexOf("lab"), -1); 343 } 344 }); 345 346 test(function() { 347 let text = rules[13].cssText; 348 if (supports_display_p3_color_space) { 349 assert_not_equals(text.indexOf("override-colors"), -1); 350 assert_not_equals(text.indexOf("display-p3"), -1); 351 } 352 }); 353 354 test(function() { 355 let rule = rules[13]; 356 assert_equals(rule.name, "--N"); 357 assert_equals(rule.fontFamily, ""); 358 assert_equals(rule.basePalette, ""); 359 if (supports_display_p3_color_space) { 360 assert_equals(rule.overrideColors.indexOf("),"), -1); 361 assert_not_equals(rule.overrideColors.indexOf("display-p3"), -1); 362 } 363 }); 364 365 test(function() { 366 let text = rules[14].cssText; 367 assert_not_equals(text.indexOf("override-colors"), -1); 368 }); 369 370 test(function() { 371 let rule = rules[14]; 372 assert_equals(rule.name, "--O"); 373 assert_equals(rule.fontFamily, ""); 374 assert_equals(rule.basePalette, ""); 375 assert_not_equals(rule.overrideColors, ""); 376 }); 377 378 test(function() { 379 let text = rules[15].cssText; 380 assert_not_equals(text.indexOf("--"), -1); 381 }); 382 383 test(function() { 384 let rule = rules[15]; 385 assert_equals(rule.name, "--"); 386 assert_equals(rule.fontFamily, ""); 387 assert_equals(rule.basePalette, ""); 388 assert_equals(rule.overrideColors, ""); 389 }); 390 391 test(function() { 392 let rule = rules[16]; 393 assert_equals(rule.name, "--P"); 394 assert_equals(rule.fontFamily, "foo, bar, baz"); 395 assert_equals(rule.basePalette, ""); 396 assert_equals(rule.overrideColors, ""); 397 }); 398 399 test(function() { 400 let rule = rules[17]; 401 assert_equals(rule.name, "--Q"); 402 assert_equals(rule.fontFamily, ""); 403 assert_equals(rule.basePalette, ""); 404 assert_equals(rule.overrideColors, "0 color-mix(in lch, red, blue)"); 405 }); 406 407 test(function() { 408 let rule = rules[18]; 409 assert_equals(rule.name, "--R"); 410 assert_equals(rule.fontFamily, ""); 411 assert_equals(rule.basePalette, ""); 412 assert_equals(rule.overrideColors, "0 color-mix(in lch, color-mix(in lch, red, blue), color-mix(in lch, green, white))"); 413 }); 414 </script> 415 </body> 416 </html>