mirror of
https://github.com/zebrajr/ladybird.git
synced 2025-12-06 00:19:53 +01:00
LibWeb: Invalidate layout on opacity change to/from zero
As of 7dc8062 paintables compute and cache their visibility (which
depends on opacity) at construction - this cached value can fall out of
sync with reality if if the opacity changes to/from zero within the
lifetime of that paintable.
This commit invalidates layout when an opacity changes to/from zero so
that we reconstruct paintables with the correct visibility.
This commit is contained in:
parent
089f70a918
commit
3aff3327c4
|
|
@ -66,6 +66,12 @@ RequiredInvalidationAfterStyleChange compute_property_invalidation(CSS::Property
|
|||
if (old_value_opacity != new_value_opacity && (old_value_opacity == 1 || new_value_opacity == 1)) {
|
||||
invalidation.rebuild_stacking_context_tree = true;
|
||||
}
|
||||
|
||||
// OPTIMIZATION: Paintables compute and store whether they are visible (which is dependent on whether opacity
|
||||
// is equal to zero) on construction as a performance optimization - this means that if opacity
|
||||
// changes to or from an opacity of zero we need to relayout to recompute paintable visibility.
|
||||
if (old_value_opacity != new_value_opacity && (old_value_opacity == 0 || new_value_opacity == 0))
|
||||
invalidation.relayout = true;
|
||||
} else if (CSS::property_affects_stacking_context(property_id)) {
|
||||
invalidation.rebuild_stacking_context_tree = true;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
#foo {
|
||||
opacity: 0.5;
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="foo"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<link
|
||||
rel="match"
|
||||
href="../expected/paintable-visiblity-after-opacity-change-from-zero-ref.html"
|
||||
/>
|
||||
<style>
|
||||
#foo {
|
||||
opacity: 0;
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="foo"></div>
|
||||
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
document.querySelector("#foo").style.opacity = 0.5;
|
||||
document.documentElement.className = "";
|
||||
}, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user