1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 05:47:34 +00:00

LibWeb: Only invalidate stacking context tree for opacity/z-index change

I came across some websites that change an elements CSS "opacity" in
their :hover selectors. That caused us to relayout on hover, which we'd
like to avoid.

With this patch, we now check if a property only affects the stacking
context tree, and if nothing layout-affecting has changed, we only
invalidate the stacking context tree, causing it to be rebuilt on next
paint or hit test.

This makes :hover { opacity: ... } rules much faster. :^)
This commit is contained in:
Andreas Kling 2022-03-21 10:58:51 +01:00
parent 59afdb959f
commit 8c88ee1165
6 changed files with 54 additions and 0 deletions

View file

@ -155,6 +155,34 @@ bool property_affects_layout(PropertyID property_id)
}
}
bool property_affects_stacking_context(PropertyID property_id)
{
switch (property_id) {
)~~~");
properties.for_each_member([&](auto& name, auto& value) {
VERIFY(value.is_object());
bool affects_layout = true;
if (value.as_object().has("affects-stacking-context"))
affects_layout = value.as_object().get("affects-stacking-context").to_bool();
if (affects_layout) {
auto member_generator = generator.fork();
member_generator.set("name:titlecase", title_casify(name));
member_generator.append(R"~~~(
case PropertyID::@name:titlecase@:
)~~~");
}
});
generator.append(R"~~~(
return true;
default:
return false;
}
}
NonnullRefPtr<StyleValue> property_initial_value(PropertyID property_id)
{
static Array<RefPtr<StyleValue>, to_underlying(last_property_id) + 1> initial_values;

View file

@ -90,6 +90,7 @@ bool property_accepts_value(PropertyID, StyleValue&);
size_t property_maximum_value_count(PropertyID);
bool property_affects_layout(PropertyID);
bool property_affects_stacking_context(PropertyID);
constexpr PropertyID first_property_id = PropertyID::@first_property_id@;
constexpr PropertyID last_property_id = PropertyID::@last_property_id@;