LibWeb: Parse @property CSS directives

This is not a complete parse, as it doesn't validate or take into
account the parsed syntax.
Enough to get us a few more WPT tests though :)
This commit is contained in:
Alex Ungurianu 2024-10-17 20:26:22 +01:00 committed by Sam Atkins
commit a4c72f50c0
Notes: github-actions[bot] 2024-10-23 05:56:40 +00:00
6 changed files with 178 additions and 0 deletions

View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<style>
@property badname {
syntax: "*";
inherits: false;
initial-value: blue;
}
@property --extra-syntax-tokens {
syntax: "*" "bad";
inherits: false;
initial-value: blue;
}
@property --extra-inherits-tokens {
syntax: "*";
inherits: false "bad";
initial-value: blue;
}
@property --missing-syntax {
inherits: false;
initial-value: blue;
}
@property --missing-inherits {
syntax: "*";
initial-value: blue;
}
@property --valid {
syntax: "*";
inherits: false;
}
</style>
<div>This text shouldn't be visible</div>
<script src="../include.js"></script>
<script>
test(() => {
const cssRuleCount = document.styleSheets[0].cssRules.length;
println(`Number of parsed css rules: ${cssRuleCount} (expected: 1)`);
});
</script>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<style>
@property --tester {
syntax: "*";
inherits: false;
initial-value: blue;
}
</style>
<div>This text shouldn't be visible</div>
<script src="../include.js"></script>
<script>
test(() => {
const propertyRule = document.styleSheets[0].cssRules[0];
println(`@property rule syntax value: ${propertyRule.syntax}`);
propertyRule.syntax = "<color> | none";
println(`@property rule syntax value: ${propertyRule.syntax}`);
println(`@property rule inherits value: ${propertyRule.inherits}`);
propertyRule.inherits = true;
println(`@property rule inherits value: ${propertyRule.inherits}`);
println(`@property rule initialValue value: ${propertyRule.initialValue}`);
propertyRule.initialValue = "red";
println(`@property rule initialValue value: ${propertyRule.initialValue}`);
});
</script>