mirror of
https://github.com/LadybirdBrowser/ladybird
synced 2026-04-28 10:37:17 +02:00
a94f9aa4c7
When inheriting custom-property data from a parent element, we were copying the parent's full CustomPropertyData regardless of whether each property was registered with `inherits: false`. That caused non-inheriting registered properties to leak from the parent, contrary to the @property spec. Wrap the parent-side lookup so we strip any custom property whose registration says it should not inherit, and only build a fresh CustomPropertyData when at least one property was actually filtered. Key the filtered view's cache on both the destination document's identity and its custom-property registration generation. The generation counter is local to each document, so a subtree adopted into another document (or queried via getComputedStyle from another window) could otherwise pick up a cached view computed under an unrelated registration set and silently skip non-inheriting filtering in the new document.
36 lines
1.5 KiB
HTML
36 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<style id="dynamic-style"></style>
|
|
<div id="parent" style="--foo: rgb(255, 0, 0); --bar: rgb(255, 0, 0);">
|
|
<div id="foo-target" style="color: var(--foo);"></div>
|
|
<div id="bar-target" style="color: var(--bar);"></div>
|
|
</div>
|
|
<script>
|
|
test(() => {
|
|
const dynamicStyle = document.getElementById("dynamic-style");
|
|
const fooTarget = document.getElementById("foo-target");
|
|
const barTarget = document.getElementById("bar-target");
|
|
|
|
println(`before @property color: ${getComputedStyle(fooTarget).color}`);
|
|
|
|
// This changes only the inheritance semantics of --foo, so it proves
|
|
// we invalidate inherited custom-property data instead of reusing a
|
|
// stale cached inheritable view from before the registration existed.
|
|
dynamicStyle.sheet.insertRule("@property --foo { syntax: '<color>'; inherits: false; initial-value: rgb(0, 128, 0); }");
|
|
println(`after @property color: ${getComputedStyle(fooTarget).color}`);
|
|
|
|
dynamicStyle.sheet.deleteRule(0);
|
|
println(`after removing @property color: ${getComputedStyle(fooTarget).color}`);
|
|
|
|
println(`before registerProperty color: ${getComputedStyle(barTarget).color}`);
|
|
|
|
CSS.registerProperty({
|
|
name: "--bar",
|
|
syntax: "<color>",
|
|
inherits: false,
|
|
initialValue: "rgb(0, 0, 255)",
|
|
});
|
|
println(`after registerProperty color: ${getComputedStyle(barTarget).color}`);
|
|
});
|
|
</script>
|