LibWeb: Cover non-ASCII CSS custom property names

Add CSSOM, computed style, Typed OM, invalid declaration, and descriptor
serialization coverage for non-ASCII custom property names.
This commit is contained in:
Andreas Kling 2026-06-09 01:10:49 +02:00 committed by Andreas Kling
parent 13a804dbf6
commit 524f7e0975
4 changed files with 59 additions and 1 deletions

View file

@ -2,3 +2,15 @@ style.getPropertyValue(--redcolor)=red
style.getPropertyPriority(--redcolor)=
rgb(255, 0, 0)
rgba(0, 0, 0, 0)
style.getPropertyValue(--é)=green
style.cssText=--é: green;
blue
rgb(0, 0, 255)
rgb(0, 128, 0)
computedStyleMap(--é-number)=0
computedStyleMap(--é-number).unit=number
computedStyleMap(--é-number).value=0
computedStyleMap(--é-integer)=0
computedStyleMap(--é-integer).unit=number
computedStyleMap(--é-integer).value=0

View file

@ -5,3 +5,4 @@
@font-face { font-family: "c2"; font-stretch: 50%; }
@font-face { font-family: "c3"; font-stretch: extra-condensed; }
@font-face { font-family: "c4"; font-stretch: 50%; }
@font-face { font-family: "d1"; }

View file

@ -20,5 +20,47 @@
div.style.removeProperty("--redcolor");
println(getComputedStyle(nested).backgroundColor);
div.style.setProperty("--é", "green");
println(`style.getPropertyValue(--é)=${div.style.getPropertyValue("--é")}`);
println(`style.cssText=${div.style.cssText}`);
const style = document.createElement("style");
style.textContent = "#non-ascii-custom-property { --é: blue; color: var(--é); }";
document.head.appendChild(style);
const styled = document.createElement("div");
styled.id = "non-ascii-custom-property";
document.body.appendChild(styled);
println(getComputedStyle(styled).getPropertyValue("--é"));
println(getComputedStyle(styled).color);
const invalidStyle = document.createElement("style");
invalidStyle.textContent = "#invalid-non-ascii-custom-property { --é-invalid: var(); color: green; }";
document.head.appendChild(invalidStyle);
const invalid = document.createElement("div");
invalid.id = "invalid-non-ascii-custom-property";
document.body.appendChild(invalid);
println(getComputedStyle(invalid).getPropertyValue("--é-invalid"));
println(getComputedStyle(invalid).color);
CSS.registerProperty({ name: "--é-number", syntax: "<number>", initialValue: "0", inherits: false });
CSS.registerProperty({ name: "--é-integer", syntax: "<integer>", initialValue: "0", inherits: false });
const typed = document.createElement("div");
document.body.appendChild(typed);
let typedNumber = typed.computedStyleMap().get("--é-number");
println(`computedStyleMap(--é-number)=${typedNumber}`);
println(`computedStyleMap(--é-number).unit=${typedNumber.unit}`);
println(`computedStyleMap(--é-number).value=${typedNumber.value}`);
let typedInteger = typed.computedStyleMap().get("--é-integer");
println(`computedStyleMap(--é-integer)=${typedInteger}`);
println(`computedStyleMap(--é-integer).unit=${typedInteger.unit}`);
println(`computedStyleMap(--é-integer).value=${typedInteger.value}`);
});
</script>
</script>

View file

@ -18,6 +18,9 @@
// - font-stretch is a legacy alias for font-width
"@font-face { font-family: 'c3'; font-stretch: extra-condensed; }",
"@font-face { font-family: 'c4'; font-stretch: 50%; }",
// Non-ASCII custom-property-like names are invalid @font-face descriptors.
"@font-face { font-family: 'd1'; --é: 1; }",
];
for (let testCase of testCases) {
let style = document.createElement("style");