| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <title>CSS Fonts Module Level 4: parsing @font-palette-values</title> |
| <link rel="help" href="https://drafts.csswg.org/css-fonts/#font-palette-values"> |
| <meta name="assert" content="@font-palette-values is parsed correctly."> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style id="style"> |
| /* 0 */ |
| @font-palette-values --A { |
| } |
| |
| /* 1 */ |
| @font-palette-values --B { |
| font-weight: 400; |
| } |
| |
| /* 2 */ |
| @font-palette-values --C { |
| font-family: foo; |
| font-family: bar; |
| base-palette: 1; |
| base-palette: "baz"; |
| base-palette: 2; |
| override-colors: "a" #123; |
| override-colors: 3 #123; |
| override-colors: "b" #123; |
| } |
| |
| /* 3 */ |
| @font-palette-values --D { |
| base-palette: "foo"; |
| base-palette: 1; |
| base-palette: "bar"; |
| override-colors: 3 #123; |
| override-colors: "baz" #123; |
| override-colors: 4 #123; |
| } |
| |
| /* 4 */ |
| @font-palette-values --E { |
| override-colors: 3 rgb(17, 34, 51); |
| override-colors: 3 rgb(68, 85, 102); |
| } |
| |
| /* 5 */ |
| @font-palette-values --F { |
| font-family: "foo"; |
| } |
| |
| /* 6 */ |
| @font-palette-values --G { |
| override-colors: 3 rgb(17, 34, 51), 4 rgb(68, 85, 102); |
| } |
| |
| /* 7 */ |
| @font-palette-values --H { |
| override-colors: 3 rgb(17, 34, 51), 3 rgb(68, 85, 102); |
| } |
| |
| /* 8 */ |
| @font-palette-values --I { |
| override-colors: 0 #0000FF; |
| } |
| |
| /* 9 */ |
| @font-palette-values --J { |
| override-colors: 0 green; |
| } |
| |
| /* 10 */ |
| @font-palette-values --K { |
| override-colors: 0 transparent; |
| } |
| |
| /* 11 */ |
| @font-palette-values --L { |
| override-colors: 0 rgba(1 2 3 / 4); |
| } |
| |
| /* 12 */ |
| @font-palette-values --M { |
| override-colors: 0 lab(29.2345% 39.3825 20.0664); |
| } |
| |
| /* 13 */ |
| @font-palette-values --N { |
| override-colors: 0 color(display-p3 100% 100% 100%); |
| } |
| |
| /* 14 */ |
| @font-palette-values --O { |
| override-colors: 0 transparent; |
| } |
| |
| /* 15 */ |
| @font-palette-values -- { |
| } |
| </style> |
| </head> |
| <body> |
| <script> |
| let rules = document.getElementById("style").sheet.cssRules; |
| let supports_lab = CSS.supports('color', 'lab(29.2345% 39.3825 20.0664)'); |
| let supports_display_p3_color_space = |
| CSS.supports('color', 'color(display-p3 100% 100% 100%)'); |
| |
| test(function() { |
| let text = rules[0].cssText; |
| assert_not_equals(text.indexOf("@font-palette-values "), -1); |
| assert_not_equals(text.indexOf(" --A "), -1); |
| assert_not_equals(text.indexOf("{"), -1); |
| assert_not_equals(text.indexOf("}"), -1); |
| assert_equals(text.indexOf("font-family"), -1); |
| assert_equals(text.indexOf("base-palette"), -1); |
| assert_equals(text.indexOf("override-colors"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[0]; |
| assert_equals(rule.constructor.name, "CSSFontPaletteValuesRule"); |
| assert_equals(rule.name, "--A"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors, ""); |
| }); |
| |
| test(function() { |
| let text = rules[1].cssText; |
| assert_equals(text.indexOf("font-weight"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[1]; |
| assert_equals(rule.name, "--B"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors, ""); |
| }); |
| |
| test(function() { |
| let text = rules[2].cssText; |
| assert_equals(text.indexOf("font-family: foo;"), -1); |
| assert_not_equals(text.indexOf("font-family: bar;"), -1); |
| assert_equals(text.indexOf("base-palette: 1;"), -1); |
| assert_equals(text.indexOf("base-palette: \"baz\""), -1); |
| assert_not_equals(text.indexOf("base-palette: 2;"), -1); |
| assert_equals(text.indexOf("override-colors: \"a\""), -1); |
| assert_not_equals(text.indexOf("override-colors: 3"), -1); |
| assert_equals(text.indexOf("override-colors: \"b\""), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[2]; |
| assert_equals(rule.name, "--C"); |
| assert_equals(rule.fontFamily, "bar"); |
| assert_equals(rule.basePalette, "2"); |
| assert_equals(rule.overrideColors, "3 rgb(17, 34, 51)"); |
| }); |
| |
| test(function() { |
| let text = rules[3].cssText; |
| assert_equals(text.indexOf("base-palette: \"foo\";"), -1); |
| assert_not_equals(text.indexOf("base-palette: 1"), -1); |
| assert_equals(text.indexOf("base-palette: \"bar\";"), -1); |
| assert_equals(text.indexOf("override-colors: 3"), -1); |
| assert_equals(text.indexOf("override-colors: \"baz\""), -1); |
| assert_not_equals(text.indexOf("override-colors: 4"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[3]; |
| assert_equals(rule.name, "--D"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, "1"); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_equals(rule.overrideColors.indexOf("4 "), 0); |
| assert_not_equals(rule.overrideColors.indexOf("rgb"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[4].cssText; |
| assert_equals(text.indexOf("51"), -1); |
| assert_not_equals(text.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[4]; |
| assert_equals(rule.name, "--E"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_equals(rule.overrideColors.indexOf("3 "), 0); |
| assert_not_equals(rule.overrideColors.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[5].cssText; |
| assert_not_equals(text.indexOf("foo"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[5]; |
| assert_equals(rule.name, "--F"); |
| assert_equals(rule.fontFamily, "foo"); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors, ""); |
| }); |
| |
| test(function() { |
| let text = rules[6].cssText; |
| assert_not_equals(text.indexOf("51"), -1); |
| assert_not_equals(text.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[6]; |
| assert_equals(rule.name, "--G"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.split("),").length, 2); |
| assert_equals(rule.overrideColors.indexOf("3 "), 0); |
| assert_not_equals(rule.overrideColors.indexOf("), 4 "), -1); |
| assert_not_equals(rule.overrideColors.indexOf("51"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[7].cssText; |
| assert_not_equals(text.indexOf("51"), -1); |
| assert_not_equals(text.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[7]; |
| assert_equals(rule.name, "--H"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_not_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_equals(rule.overrideColors.indexOf("3 "), 0); |
| assert_not_equals(rule.overrideColors.indexOf("), 3 "), -1); |
| assert_not_equals(rule.overrideColors.indexOf("51"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("102"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[8].cssText; |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_not_equals(text.indexOf("rgb(0, 0, 255)"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[8]; |
| assert_equals(rule.name, "--I"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("rgb(0, 0, 255)"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[9].cssText; |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_true(text.includes("rgb(0, 128, 0)") || |
| text.includes("green")); |
| }); |
| |
| test(function() { |
| let rule = rules[9]; |
| assert_equals(rule.name, "--J"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_true(rule.overrideColors.includes("rgb(0, 128, 0)") || |
| rule.overrideColors.includes("green")) |
| }); |
| |
| test(function() { |
| let text = rules[10].cssText; |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_true(text.includes("rgba(0, 0, 0, 0)") || |
| text.includes("transparent")); |
| }); |
| |
| test(function() { |
| let rule = rules[10]; |
| assert_equals(rule.name, "--K"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_true(rule.overrideColors.includes("rgba(0, 0, 0, 0)") || |
| rule.overrideColors.includes("transparent")); |
| }); |
| |
| test(function() { |
| let text = rules[11].cssText; |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_not_equals(text.indexOf("2"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[11]; |
| assert_equals(rule.name, "--L"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("2"), -1); |
| }); |
| |
| test(function() { |
| let text = rules[12].cssText; |
| if (supports_lab) { |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_not_equals(text.indexOf("29"), -1); |
| } |
| }); |
| |
| test(function() { |
| let rule = rules[12]; |
| assert_equals(rule.name, "--M"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| if (supports_lab) { |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("lab"), -1); |
| } |
| }); |
| |
| test(function() { |
| let text = rules[13].cssText; |
| if (supports_display_p3_color_space) { |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| assert_not_equals(text.indexOf("display-p3"), -1); |
| } |
| }); |
| |
| test(function() { |
| let rule = rules[13]; |
| assert_equals(rule.name, "--N"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| if (supports_display_p3_color_space) { |
| assert_equals(rule.overrideColors.indexOf("),"), -1); |
| assert_not_equals(rule.overrideColors.indexOf("display-p3"), -1); |
| } |
| }); |
| |
| test(function() { |
| let text = rules[14].cssText; |
| assert_not_equals(text.indexOf("override-colors"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[14]; |
| assert_equals(rule.name, "--O"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_not_equals(rule.overrideColors, ""); |
| }); |
| |
| test(function() { |
| let text = rules[15].cssText; |
| assert_not_equals(text.indexOf("--"), -1); |
| }); |
| |
| test(function() { |
| let rule = rules[15]; |
| assert_equals(rule.name, "--"); |
| assert_equals(rule.fontFamily, ""); |
| assert_equals(rule.basePalette, ""); |
| assert_equals(rule.overrideColors, ""); |
| }); |
| </script> |
| </body> |
| </html> |