system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-09-30 21:24:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Change grid item placement to look for area by boundary lines

Browse source 
Areas are disassembled into boundary lines on `build_grid_areas()` step,
so we can always use them to find grid item's position during placement.
This way we support both ways to define area: `grid-template-areas` and
implicitly using `-start` and `-end` boundary line names.

(cherry picked from commit 7a1f3f7ae3af2744e2f99df29baf09153d631b24)
This commit is contained in:
Aliaksandr Kalenik 2024-07-17 21:15:27 +02:00 committed by Nico Weber
parent c6038071a4
commit c82f41dac8
4 changed files with 45 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Tests/LibWeb/Layout/expected/grid/define-area-using-line-names.txt Normal file
View file

@ -0,0 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x33 [BFC] children: not-inline
Box <body> at (8,8) content-size 784x17 [GFC] children: not-inline
BlockContainer <main> at (150,8) content-size 500x17 [BFC] children: not-inline
BlockContainer <div#item> at (150,8) content-size 500x17 children: inline
frag 0 from TextNode start: 0, length: 11, rect: [150,8 105.953125x17] baseline: 13.296875
"Smartphones"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x33]
PaintableBox (Box<BODY>) [8,8 784x17]
PaintableWithLines (BlockContainer<MAIN>) [150,8 500x17]
PaintableWithLines (BlockContainer<DIV>#item) [150,8 500x17]
TextPaintable (TextNode<#text>)

17
Tests/LibWeb/Layout/input/grid/define-area-using-line-names.html Normal file
View file

@ -0,0 +1,17 @@
<!doctype html><style>
* {
outline: 1px solid black;
}
html {
background: white;
}
body {
display: grid;
grid-template-columns: 1fr [content-start] 500px [content-end] 1fr;
background: wheat;
}
main {
grid-column: content;
background: pink;
}
</style><body><main><div id="item">Smartphones

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

@ -174,8 +174,9 @@ GridFormattingContext::PlacementPosition GridFormattingContext::resolve_grid_pos
}
if (placement_end.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(placement_end.identifier()); maybe_grid_area.has_value()) {
result.end = dimension == GridDimension::Row ? maybe_grid_area->row_end : maybe_grid_area->column_end;
auto area_end_line_name = MUST(String::formatted("{}-end", placement_end.identifier()));
if (auto area_end_line_index = get_line_index_by_line_name(dimension, area_end_line_name); area_end_line_index.has_value()) {
result.end = area_end_line_index.value();
} else if (auto line_name_index = get_line_index_by_line_name(dimension, placement_end.identifier()); line_name_index.has_value()) {
result.end = line_name_index.value();
} else {
@ -185,8 +186,9 @@ GridFormattingContext::PlacementPosition GridFormattingContext::resolve_grid_pos
}
if (placement_start.has_identifier()) {
if (auto maybe_grid_area = m_grid_areas.get(placement_start.identifier()); maybe_grid_area.has_value()) {
result.start = dimension == GridDimension::Row ? maybe_grid_area->row_start : maybe_grid_area->column_start;
auto area_start_line_name = MUST(String::formatted("{}-start", placement_start.identifier()));
if (auto area_start_line_index = get_line_index_by_line_name(dimension, area_start_line_name); area_start_line_index.has_value()) {
result.start = area_start_line_index.value();
} else if (auto line_name_index = get_line_index_by_line_name(dimension, placement_start.identifier()); line_name_index.has_value()) {
result.start = line_name_index.value();
} else {
@ -1149,6 +1151,8 @@ void GridFormattingContext::build_grid_areas()
// filled-in rectangle, the declaration is invalid.
auto const& rows = grid_container().computed_values().grid_template_areas();
HashMap<String, GridArea> grid_areas;
auto find_area_rectangle = [&](size_t x_start, size_t y_start, String const& name) {
bool invalid = false;
size_t x_end = x_start;
@ -1166,13 +1170,13 @@ void GridFormattingContext::build_grid_areas()
}
}
}
m_grid_areas.set(name, { name, y_start, y_end, x_start, x_end, invalid });
grid_areas.set(name, { name, y_start, y_end, x_start, x_end, invalid });
};
for (size_t y = 0; y < rows.size(); y++) {
for (size_t x = 0; x < rows[y].size(); x++) {
auto name = rows[y][x];
if (auto grid_area = m_grid_areas.get(name); grid_area.has_value())
if (auto grid_area = grid_areas.get(name); grid_area.has_value())
continue;
find_area_rectangle(x, y, name);
}
@ -1180,7 +1184,7 @@ void GridFormattingContext::build_grid_areas()
size_t max_column_line_index_of_area = 0;
size_t max_row_line_index_of_area = 0;
for (auto const& grid_area : m_grid_areas) {
for (auto const& grid_area : grid_areas) {
max_column_line_index_of_area = max(max_column_line_index_of_area, grid_area.value.column_end);
max_row_line_index_of_area = max(max_row_line_index_of_area, grid_area.value.row_end);
}
@ -1196,7 +1200,7 @@ void GridFormattingContext::build_grid_areas()
// template. For each named grid area foo, four implicitly-assigned line names are created: two named foo-start,
// naming the row-start and column-start lines of the named grid area, and two named foo-end, naming the row-end
// and column-end lines of the named grid area.
for (auto const& it : m_grid_areas) {
for (auto const& it : grid_areas) {
auto const& grid_area = it.value;
m_column_lines[grid_area.column_start].names.append(MUST(String::formatted("{}-start", grid_area.name)));
m_column_lines[grid_area.column_end].names.append(MUST(String::formatted("{}-end", grid_area.name)));

2
Userland/Libraries/LibWeb/Layout/GridFormattingContext.h
View file

@ -161,8 +161,6 @@ private:
void init_grid_lines(GridDimension);
HashMap<String, GridArea> m_grid_areas;
Vector<GridTrack> m_grid_rows;
Vector<GridTrack> m_grid_columns;