RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-05-31 10:48:11 +00:00
Code Issues Activity Actions

LibWeb: Respect CSS z-index property while painting

Browse source 
To support z-ordering when painting, the layout tree now has a parallel
sparse tree of stacking contexts. The rules for which layout boxes
establish a stacking context are a bit complex, but the intent is to
encapsulate the decision making into establishes_stacking_context().

When we paint, we start from the ICB (LayoutDocument) who always has a
StackingContext and then paint the tree of StackingContexts where each
node has its children sorted by z-index.

This is pretty crude, but gets the basic job done. Note that this does
not yet support hit testing; hit testing is still done using a naive
treewalk from the root.
This commit is contained in:
Andreas Kling 2020-06-15 17:29:35 +02:00
parent ce3260c6bf
commit 96da15a8a4
11 changed files with 222 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

32
Libraries/LibWeb/Layout/LayoutBox.cpp
View file

@ -310,4 +310,36 @@ void LayoutBox::set_containing_line_box_fragment(LineBoxFragment& fragment)
m_containing_line_box_fragment = fragment.make_weak_ptr();
}
StackingContext* LayoutBox::enclosing_stacking_context()
{
for (auto* ancestor = parent(); ancestor; ancestor = ancestor->parent()) {
if (!ancestor->is_box())
continue;
auto& ancestor_box = to<LayoutBox>(*ancestor);
if (!ancestor_box.establishes_stacking_context())
continue;
ASSERT(ancestor_box.stacking_context());
return ancestor_box.stacking_context();
}
// We should always reach the LayoutDocument stacking context.
ASSERT_NOT_REACHED();
}
bool LayoutBox::establishes_stacking_context() const
{
if (!has_style())
return false;
if (node() == document().root())
return true;
auto position = style().position();
auto z_index = style().z_index();
if (position == CSS::Position::Absolute || position == CSS::Position::Relative) {
if (z_index.has_value())
return true;
}
if (position == CSS::Position::Fixed || position == CSS::Position::Sticky)
return true;
return false;
}
}