mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 20:29:18 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Resolve "position: sticky" insets relative to scrollport

Browse source 
Reading of https://drafts.csswg.org/css-position revealed I was wrong
assuming sticky insets need to be resolved relative to containing block.
This commit is contained in:
Aliaksandr Kalenik 2024-09-02 20:46:41 +02:00 • committed by Andreas Kling
commit 415ea4ec0c
Notes: github-actions[bot] 2024-09-03 09:35:18 +00:00
3 changed files with 80 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

27
Userland/Libraries/LibWeb/Layout/LayoutState.cpp
View file

@ -376,21 +376,40 @@ 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());
}
for (auto& it : used_values_per_layout_node) {
auto& used_values = *it.value;
if (!used_values.node().is_box())
continue;
auto const& box = static_cast<Layout::Box const&>(used_values.node());
auto& paintable_box = const_cast<Painting::PaintableBox&>(*box.paintable_box());
if (box.is_sticky_position()) {
// https://drafts.csswg.org/css-position/#insets
// For sticky positioned boxes, the inset is instead relative to the relevant scrollport’s size. Negative values are allowed.
auto sticky_insets = make<Painting::PaintableBox::StickyInsets>();
auto const& inset = box.computed_values().inset();
auto const* nearest_scrollable_ancestor = paintable_box.nearest_scrollable_ancestor();
CSSPixelSize scrollport_size;
if (nearest_scrollable_ancestor) {
scrollport_size = nearest_scrollable_ancestor->absolute_rect().size();
}
if (!inset.top().is_auto()) {
sticky_insets->top = inset.top().to_px(box, used_values.containing_block_used_values()->content_height());
sticky_insets->top = inset.top().to_px(box, scrollport_size.height());
}
if (!inset.right().is_auto()) {
sticky_insets->right = inset.right().to_px(box, used_values.containing_block_used_values()->content_width());
sticky_insets->right = inset.right().to_px(box, scrollport_size.width());
}
if (!inset.bottom().is_auto()) {
sticky_insets->bottom = inset.bottom().to_px(box, used_values.containing_block_used_values()->content_height());
sticky_insets->bottom = inset.bottom().to_px(box, scrollport_size.height());
}
if (!inset.left().is_auto()) {
sticky_insets->left = inset.left().to_px(box, used_values.containing_block_used_values()->content_width());
sticky_insets->left = inset.left().to_px(box, scrollport_size.width());
}
paintable_box.set_sticky_insets(move(sticky_insets));
}