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:
parent
13a804dbf6
commit
524f7e0975
4 changed files with 59 additions and 1 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"; }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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");
|
||||
|
|
|
|||
Loading…
Reference in a new issue