mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-24 17:09:43 +00:00
d79bb1aac2
We have an optimization that allows us to invalidate only the style of the element itself and mark descendants for inherited properties update when the "style" attribute changes (unless there are any CSS rules that use the "style" attribute, then we also invalidate all descendants that might be affected by those rules). This optimization was not taking into account that when the inline style has custom properties, we also need to invalidate all descendants whose style might be affected by them. This change fixes this bug by saving a flag in Element that indicates whether its style depends on any custom properties and then invalidating all descendants with this flag set when the "style" attribute changes. Unlike font relative lengths invalidation, for elements that depend on custom properties, we need to actually recompute the style, instead of individual properties, because values without expanded custom properties are gone after cascading, and it has to be done again. The test added for this change is a version of an existing test we had restructured such that it doesn't trigger aggressive style invalidation caused by DOM structured changes until the last moment when test results are printed.
26 lines
949 B
HTML
26 lines
949 B
HTML
<!DOCTYPE html>
|
|
<script src="../include.js"></script>
|
|
<body></body>
|
|
<script>
|
|
test(() => {
|
|
const div = document.createElement('div');
|
|
document.body.appendChild(div);
|
|
const nested = document.createElement('div');
|
|
div.appendChild(nested);
|
|
|
|
div.style.setProperty("--redcolor", "red");
|
|
println(`style.getPropertyValue(--redcolor)=${div.style.getPropertyValue("--redcolor")}`);
|
|
println(`style.getPropertyPriority(--redcolor)=${div.style.getPropertyPriority("--redcolor")}`);
|
|
|
|
nested.style["backgroundColor"] = "var(--redcolor)";
|
|
nested.style["width"] = "100px";
|
|
nested.style["height"] = "100px";
|
|
|
|
const bgColorBefore = getComputedStyle(nested).backgroundColor;
|
|
div.style.removeProperty("--redcolor");
|
|
const bgColorAfter = getComputedStyle(nested).backgroundColor;
|
|
|
|
println(bgColorBefore);
|
|
println(bgColorAfter);
|
|
});
|
|
</script>
|