mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-22 01:08:56 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

LibWeb/CSS: Fix basic absolute positioning inside grid containers

Browse source 
Now elements with position `absolute` properly resolve their position
inside parent elements with `grid`. I also imported some WPT tests
related to that topic.

Part 2 of resolving issues on https://hack4krak.pl
This commit is contained in:
norbiros 2025-08-25 10:11:38 +02:00 • committed by Alexander Kalenik
commit 92b560edce
Notes: github-actions[bot] 2025-08-25 12:10:28 +00:00
2 changed files with 18 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -1937,11 +1937,14 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
// is that of the corresponding padding edge of the grid container (the padding edge of the scrollable area, if the grid container // is that of the corresponding padding edge of the grid container (the padding edge of the scrollable area, if the grid container
// overflows). These lines become the first and last lines (0th and -0th) of the augmented grid used for positioning absolutely-positioned items. // overflows). These lines become the first and last lines (0th and -0th) of the augmented grid used for positioning absolutely-positioned items.
CSSPixels height = 0; CSSPixels height = 0;
for (auto const& row_track : m_grid_rows_and_gaps) { if (m_available_space->height.is_definite()) {
height = m_available_space->height.to_px_or_zero();
} else {
for (auto const& row_track : m_grid_rows_and_gaps)
height += row_track.base_size; height += row_track.base_size;
} }
height += m_grid_container_used_values.padding_top; height += m_grid_container_used_values.padding_top + m_grid_container_used_values.padding_bottom;
height += m_grid_container_used_values.padding_bottom;
area_rect.set_height(height); area_rect.set_height(height);
area_rect.set_y(-m_grid_container_used_values.padding_top); area_rect.set_y(-m_grid_container_used_values.padding_top);
} }
@ -1954,11 +1957,14 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
} }
} else { } else {
CSSPixels width = 0; CSSPixels width = 0;
for (auto const& col_track : m_grid_columns_and_gaps) { if (m_available_space->width.is_definite()) {
width = m_available_space->width.to_px_or_zero();
} else {
for (auto const& col_track : m_grid_columns_and_gaps)
width += col_track.base_size; width += col_track.base_size;
} }
width += m_grid_container_used_values.padding_left; width += m_grid_container_used_values.padding_left + m_grid_container_used_values.padding_right;
width += m_grid_container_used_values.padding_right;
area_rect.set_width(width); area_rect.set_width(width);
area_rect.set_x(-m_grid_container_used_values.padding_left); area_rect.set_x(-m_grid_container_used_values.padding_left);
} }

8
Tests/LibWeb/Text/expected/wpt-import/css/css-grid/abspos/absolute-positioning-grid-container-parent-001.txt
View file

@ -2,17 +2,17 @@ Harness status: OK
Found 12 tests Found 12 tests
3 Pass 5 Pass
9 Fail 7 Fail
Pass .container 1 Pass .container 1
Pass .container 2 Pass .container 2
Pass .container 3 Pass .container 3
Fail .container 4 Pass .container 4
Fail .container 5 Fail .container 5
Fail .container 6 Fail .container 6
Fail .container 7 Fail .container 7
Fail .container 8 Fail .container 8
Fail .container 9 Fail .container 9
Fail .container 10 Pass .container 10
Fail .container 11 Fail .container 11
Fail .container 12 Fail .container 12