LibWeb: Add "position: sticky" support

Sticky positioning is implemented by modifying the algorithm for
assigning and refreshing scroll frames. Now, elements with
"position: sticky" are assigned their own scroll frame, and their
position is refreshed independently from regular scroll boxes.
Refreshing the scroll offsets for sticky boxes does not require display
list invalidation.

A separate hash map is used for the scroll frames of sticky boxes. This
is necessary because a single paintable box can have two scroll frames
if it 1) has "position: sticky" and 2) contains scrollable overflow.
This commit is contained in:
Aliaksandr Kalenik 2024-08-24 19:20:31 +02:00 committed by Alexander Kalenik
commit 30b636e90b
Notes: github-actions[bot] 2024-08-30 17:03:56 +00:00
20 changed files with 705 additions and 2 deletions

View file

@ -376,6 +376,24 @@ void LayoutState::commit(Box& root)
auto& paintable_box = const_cast<Painting::PaintableBox&>(*box.paintable_box());
if (!paintable_box.scroll_offset().is_zero())
paintable_box.set_scroll_offset(paintable_box.scroll_offset());
if (box.is_sticky_position()) {
auto sticky_insets = make<Painting::PaintableBox::StickyInsets>();
auto const& inset = box.computed_values().inset();
if (!inset.top().is_auto()) {
sticky_insets->top = inset.top().to_px(box, used_values.containing_block_used_values()->content_height());
}
if (!inset.right().is_auto()) {
sticky_insets->right = inset.right().to_px(box, used_values.containing_block_used_values()->content_width());
}
if (!inset.bottom().is_auto()) {
sticky_insets->bottom = inset.bottom().to_px(box, used_values.containing_block_used_values()->content_height());
}
if (!inset.left().is_auto()) {
sticky_insets->left = inset.left().to_px(box, used_values.containing_block_used_values()->content_width());
}
paintable_box.set_sticky_insets(move(sticky_insets));
}
}
}

View file

@ -262,6 +262,14 @@ bool Node::is_fixed_position() const
return position == CSS::Positioning::Fixed;
}
bool Node::is_sticky_position() const
{
if (!has_style())
return false;
auto position = computed_values().position();
return position == CSS::Positioning::Sticky;
}
NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> computed_style)
: Node(document, node)
, m_computed_values(make<CSS::ComputedValues>())

View file

@ -122,6 +122,7 @@ public:
bool is_positioned() const;
bool is_absolutely_positioned() const;
bool is_fixed_position() const;
bool is_sticky_position() const;
bool is_flex_item() const { return m_is_flex_item; }
void set_flex_item(bool b) { m_is_flex_item = b; }