mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-26 17:55:07 +02:00
960558f30a
Previously, we registered `@property` rules during parsing, and treated them the same as `CSS.registerProperty()` calls. This is not correct for a couple of reasons: One, the spec wants us to distinguish between those two sources of registered custom properties, with `CSS.registerProperty()` calls taking precedence. Two, we never removed the registered property when its `@property` was removed from the document. This commit deals with this by iterating active CSSPropertyRules to find which ones currently apply, and storing those in a cache. This cache is invalidated whenever the Document's style is invalidated, which happens whenever a CSSRule is added or removed from the Document. The attached test demonstrates this now working as it should.
27 lines
1.4 KiB
HTML
27 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<div id="target"></div>
|
|
<style id="styleElement"></style>
|
|
<script>
|
|
test(() => {
|
|
let style = getComputedStyle(target);
|
|
|
|
// Adding or removing a @property rule
|
|
println(`Before registering --foo, its value is: ${style.getPropertyValue('--foo')}`);
|
|
styleElement.sheet.insertRule("@property --foo { syntax: '*'; inherits: true; initial-value: '42'; }");
|
|
println(`After registering --foo, its value is: ${style.getPropertyValue('--foo')}`);
|
|
styleElement.sheet.deleteRule(0);
|
|
println(`After removing --foo, its value is: ${style.getPropertyValue('--foo')}`);
|
|
|
|
// The @property shouldn't apply until it's added to the document
|
|
let newSheet = new CSSStyleSheet();
|
|
newSheet.replaceSync("@property --bar { syntax: '*'; inherits: true; initial-value: '1337'; }");
|
|
println(`Before adding the new sheet, --bar's value is: ${style.getPropertyValue('--bar')}`);
|
|
document.adoptedStyleSheets.push(newSheet);
|
|
println(`After adding the new sheet, --bar's value is: ${style.getPropertyValue('--bar')}`);
|
|
// ...and then should stop applying when it's removed
|
|
document.adoptedStyleSheets.pop();
|
|
println(`After removing the new sheet, --bar's value is: ${style.getPropertyValue('--bar')}`);
|
|
});
|
|
</script>
|