Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-fonts/parsing/font-palette-values-valid.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Fonts Module Level 4: parsing @font-palette-values</title>
<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 -- {
}
/* 16 */
@font-palette-values --P {
font-family: foo, bar, baz;
}
/* 17 */
@font-palette-values --Q {
override-colors: 0 color-mix(in lch, red, blue);
}
/* 18 */
@font-palette-values --R {
override-colors: 0 color-mix(in lch, color-mix(in lch, red, blue), color-mix(in lch, green, white));
}
</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_in_array(rule.fontFamily, ["foo", "\"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, "");
});
test(function() {
let rule = rules[16];
assert_equals(rule.name, "--P");
assert_equals(rule.fontFamily, "foo, bar, baz");
assert_equals(rule.basePalette, "");
assert_equals(rule.overrideColors, "");
});
test(function() {
let rule = rules[17];
assert_equals(rule.name, "--Q");
assert_equals(rule.fontFamily, "");
assert_equals(rule.basePalette, "");
assert_equals(rule.overrideColors, "0 color-mix(in lch, red, blue)");
});
test(function() {
let rule = rules[18];
assert_equals(rule.name, "--R");
assert_equals(rule.fontFamily, "");
assert_equals(rule.basePalette, "");
assert_equals(rule.overrideColors, "0 color-mix(in lch, color-mix(in lch, red, blue), color-mix(in lch, green, white))");
});
</script>
</body>
</html>