system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-09-06 17:06:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Use resolve_grid_position if row and column are definite in GFC

Browse source 
With this change we use the same code to resolve (start, end, span)
based on computed values in all cases:
- When only column is definite
- When only row is definite
- When both are definite
This commit is contained in:
Aliaksandr Kalenik 2024-03-06 16:04:20 +01:00 committed by Andreas Kling
parent 8695a82c56
commit 1fbd9674b4
1 changed files with 6 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

143
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -215,144 +215,13 @@ GridFormattingContext::PlacementPosition GridFormattingContext::resolve_grid_pos
void GridFormattingContext::place_item_with_row_and_column_position(Box const& child_box)
{
auto const& grid_row_start = child_box.computed_values().grid_row_start();
auto const& grid_row_end = child_box.computed_values().grid_row_end();
auto const& grid_column_start = child_box.computed_values().grid_column_start();
auto const& grid_column_end = child_box.computed_values().grid_column_end();
auto row_placement_position = resolve_grid_position(child_box, GridDimension::Row);
auto column_placement_position = resolve_grid_position(child_box, GridDimension::Column);
int row_start = 0, row_end = 0, column_start = 0, column_end = 0;
if (grid_row_start.has_line_number())
row_start = child_box.computed_values().grid_row_start().line_number() - 1;
if (grid_row_end.has_line_number())
row_end = child_box.computed_values().grid_row_end().line_number() - 1;
if (grid_column_start.has_line_number())
column_start = child_box.computed_values().grid_column_start().line_number() - 1;
if (grid_column_end.has_line_number())
column_end = child_box.computed_values().grid_column_end().line_number() - 1;
// https://www.w3.org/TR/css-grid-2/#line-placement
// 8.3. Line-based Placement: the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
// https://www.w3.org/TR/css-grid-2/#grid-placement-slot
// First attempt to match the grid area’s edge to a named grid area: if there is a grid line whose
// line name is <custom-ident>-start (for grid-*-start) / <custom-ident>-end (for grid-*-end),
// contributes the first such line to the grid item’s placement.
// Otherwise, treat this as if the integer 1 had been specified along with the <custom-ident>.
// https://www.w3.org/TR/css-grid-2/#grid-placement-int
// Contributes the Nth grid line to the grid item’s placement. If a negative integer is given, it
// instead counts in reverse, starting from the end edge of the explicit grid.
if (row_end < 0)
row_end = m_occupation_grid.row_count() + row_end + 2;
if (column_end < 0)
column_end = m_occupation_grid.column_count() + column_end + 2;
// If a name is given as a <custom-ident>, only lines with that name are counted. If not enough
// lines with that name exist, all implicit grid lines are assumed to have that name for the purpose
// of finding this position.
// https://www.w3.org/TR/css-grid-2/#grid-placement-span-int
// Contributes a grid span to the grid item’s placement such that the corresponding edge of the grid
// item’s grid area is N lines from its opposite edge in the corresponding direction. For example,
// grid-column-end: span 2 indicates the second grid line in the endward direction from the
// grid-column-start line.
size_t row_span = 1;
size_t column_span = 1;
if (grid_row_start.has_line_number() && grid_row_end.is_span())
row_span = grid_row_end.span();
if (grid_column_start.has_line_number() && grid_column_end.is_span())
column_span = grid_column_end.span();
if (grid_row_end.has_line_number() && child_box.computed_values().grid_row_start().is_span()) {
row_span = grid_row_start.span();
row_start = row_end - row_span;
}
if (grid_column_end.has_line_number() && grid_column_start.is_span()) {
column_span = grid_column_start.span();
column_start = column_end - column_span;
}
// If a name is given as a <custom-ident>, only lines with that name are counted. If not enough
// lines with that name exist, all implicit grid lines on the side of the explicit grid
// corresponding to the search direction are assumed to have that name for the purpose of counting
// this span.
// https://drafts.csswg.org/css-grid/#grid-placement-auto
// auto
// The property contributes nothing to the grid item’s placement, indicating auto-placement or a
// default span of one. (See § 8 Placing Grid Items, above.)
// https://www.w3.org/TR/css-grid-2/#common-uses-named-lines
// 8.1.3. Named Lines and Spans
// Instead of counting lines by number, lines can be referenced by their line name:
if (grid_column_end.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(grid_column_end.identifier()); maybe_grid_area.has_value())
column_end = maybe_grid_area->column_end;
else if (auto line_name_index = get_line_index_by_line_name(GridDimension::Column, grid_column_end.identifier()); line_name_index.has_value())
column_end = line_name_index.value();
else
column_end = 1;
column_start = column_end - 1;
}
if (grid_column_start.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(grid_column_start.identifier()); maybe_grid_area.has_value())
column_start = maybe_grid_area->column_start;
else if (auto line_name_index = get_line_index_by_line_name(GridDimension::Column, grid_column_start.identifier()); line_name_index.has_value())
column_start = line_name_index.value();
else
column_start = 0;
}
if (grid_row_end.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(grid_row_end.identifier()); maybe_grid_area.has_value())
row_end = maybe_grid_area->row_end;
else if (auto line_name_index = get_line_index_by_line_name(GridDimension::Row, grid_row_end.identifier()); line_name_index.has_value())
row_end = line_name_index.value();
else
row_end = 1;
row_start = row_end - 1;
}
if (grid_row_start.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(grid_row_start.identifier()); maybe_grid_area.has_value())
row_start = maybe_grid_area->row_start;
else if (auto line_name_index = get_line_index_by_line_name(GridDimension::Row, grid_row_start.identifier()); line_name_index.has_value())
row_start = line_name_index.value();
else
row_start = 0;
}
// If there are multiple lines of the same name, they effectively establish a named set of grid
// lines, which can be exclusively indexed by filtering the placement by name:
// https://drafts.csswg.org/css-grid/#grid-placement-errors
// 8.3.1. Grid Placement Conflict Handling
// If the placement for a grid item contains two lines, and the start line is further end-ward than
// the end line, swap the two lines. If the start line is equal to the end line, remove the end
// line.
if (grid_row_start.is_positioned() && grid_row_end.is_positioned()) {
if (row_start > row_end)
swap(row_start, row_end);
if (row_start != row_end)
row_span = row_end - row_start;
}
if (grid_column_start.is_positioned() && grid_column_end.is_positioned()) {
if (column_start > column_end)
swap(column_start, column_end);
if (column_start != column_end)
column_span = column_end - column_start;
}
// If the placement contains two spans, remove the one contributed by the end grid-placement
// property.
if (grid_row_start.is_span() && grid_row_end.is_span())
row_span = grid_row_start.span();
if (grid_column_start.is_span() && grid_column_end.is_span())
column_span = grid_column_start.span();
// FIXME: If the placement contains only a span for a named line, replace it with a span of 1.
auto row_start = row_placement_position.start;
auto row_span = row_placement_position.span;
auto column_start = column_placement_position.start;
auto column_span = column_placement_position.span;
m_grid_items.append(GridItem {
.box = child_box,