LadybirdBrowser/ladybird
1
1
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-29 14:14:45 +03:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb+Base: Use line names for positioning grid items

Browse Source 
When there are grid tracks with line names, use these to resolve
line-names passed to positioned grid items.
This commit is contained in:
martinfalisse 2022-10-30 13:49:47 +01:00 committed by Andreas Kling
parent 829f56572d
commit 937fcfc75c
Notes: sideshowbarker 2024-07-17 06:46:15 +09:00 
Author: https://github.com/martinfalisse
Commit: https://github.com/SerenityOS/serenity/commit/937fcfc75c
Pull-request: https://github.com/SerenityOS/serenity/pull/15858
3 changed files with 211 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
Base/res/html/misc/display-grid.html
View File

@ -80,6 +80,34 @@
style="grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)));">
</div>
<!-- Invalid template columns definition. Fixme: There seems to be some handling of this in other browsers
that I don't quite understand. -->
<div
class="grid-container"
style="
grid-template-columns: [name1] [name1] [name2] 50px;
">
<div class="grid-item" style="grid-column-start: name1;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 50px [name2] [name3];
">
<div class="grid-item" style="grid-row-start: name2;">1</div>
</div>
<!-- Missing grid track between line name declarations -->
<div
class="grid-container"
style="
grid-template-rows: [name1] 1fr [name2];
">
<div class="grid-item" style="grid-row: notfound;">1</div>
</div>
<p>End of crash tests</p>
<!-- Different column sizes -->
@ -228,3 +256,79 @@ length value, and as a minimum two lengths with an auto. -->
<div class="grid-item">Article content</div>
<div class="grid-item">3</div>
</div>
<!-- Example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines-->
<p>Named tracks there should be 4 grid items in a circle with a space in the middle</p>
<div
class="grid-container"
style="
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
grid-template-rows: [main-start] 25px [content-start] 25px [content-end] 25px [main-end];
">
<div
class="grid-item"
style="
grid-column-start: main-start;
grid-row-start: main-start;
grid-row-end: main-end;
">1</div>
<div
class="grid-item"
style="
grid-column-start: content-end;
grid-row-start: main-start;
grid-row-end: content-end;
">2</div>
<div
class="grid-item"
style="
grid-column-start: content-start;
grid-row-start: main-start;
">3</div>
<div
class="grid-item"
style="
grid-column-start: content-start;
grid-column-end: main-end;
grid-row-start: content-end;
">4</div>
</div>
<p>Should render a 2 columned grid</p>
<div
class="grid-container"
style="
grid-template-columns:
[a] auto
[b] auto;
"
>
<div class="grid-item" style="grid-column-start: a;">1</div>
<div class="grid-item" style="grid-column-start: b;">2</div>
</div>
<!-- Multiple repeats -->
<p>Should render 2 50px columns and 2 100px columns</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(2, 50px) repeat(2, 100px)
">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>
<!-- Named lines inside repeat -->
<p>Should render 2 50px columns and 2 100px columns, with grid-item 1 starting at column 2</p>
<div
class="grid-container"
style="
grid-template-columns: repeat(2, [name1] 50px [name2] 100px);
">
<div class="grid-item" style="grid-column-start: name2;">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
</div>

105
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View File

@ -242,6 +242,42 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
// 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 (child_box.computed_values().grid_column_start().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_start().line_name(), grid_template_columns);
if (found_flag_and_index > -1)
column_start = 1 + found_flag_and_index;
else
column_start = 1; // FIXME
}
if (child_box.computed_values().grid_column_end().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_end().line_name(), grid_template_columns);
if (found_flag_and_index > -1) {
column_end = 1 + found_flag_and_index;
if (!child_box.computed_values().grid_column_start().is_position())
column_start = column_end - column_span;
} else {
column_end = 2; // FIXME
column_start = 1; // FIXME
}
}
if (child_box.computed_values().grid_row_start().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_start().line_name(), grid_template_rows);
if (found_flag_and_index > -1)
row_start = 1 + found_flag_and_index;
else
row_start = 1; // FIXME
}
if (child_box.computed_values().grid_row_end().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_end().line_name(), grid_template_rows);
if (found_flag_and_index > -1) {
row_end = 1 + found_flag_and_index;
if (!child_box.computed_values().grid_row_start().is_position())
row_start = row_end - row_span;
} else {
row_end = 2; // FIXME
row_start = 1; // FIXME
}
}
// 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:
@ -343,6 +379,24 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
// 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 (child_box.computed_values().grid_row_start().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_start().line_name(), grid_template_rows);
if (found_flag_and_index > -1)
row_start = 1 + found_flag_and_index;
else
row_start = 1; // FIXME
}
if (child_box.computed_values().grid_row_end().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_row_end().line_name(), grid_template_rows);
if (found_flag_and_index > -1) {
row_end = 1 + found_flag_and_index;
if (!child_box.computed_values().grid_row_start().is_position())
row_start = row_end - row_span;
} else {
row_start = 1; // FIXME
row_end = 2; // FIXME
}
}
// 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:
@ -480,6 +534,24 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const
// 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 (child_box.computed_values().grid_column_start().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_start().line_name(), grid_template_columns);
if (found_flag_and_index > -1)
column_start = 1 + found_flag_and_index;
else
column_start = 1; // FIXME
}
if (child_box.computed_values().grid_column_end().has_line_name()) {
auto found_flag_and_index = get_line_index_by_line_name(child_box.computed_values().grid_column_end().line_name(), grid_template_columns);
if (found_flag_and_index > -1) {
column_end = 1 + found_flag_and_index;
if (!child_box.computed_values().grid_column_start().is_position())
column_start = column_end - column_span;
} else {
column_end = 2; // FIXME
column_start = 1; // FIXME
}
}
// 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:
@ -1460,6 +1532,39 @@ float GridFormattingContext::get_free_space_y(Box const& box)
return -1;
}
int GridFormattingContext::get_line_index_by_line_name(String const& needle, CSS::GridTrackSizeList grid_track_size_list)
{
if (grid_track_size_list.track_list().size() == 0)
return -1;
auto repeated_tracks_count = 0;
for (size_t x = 0; x < grid_track_size_list.track_list().size(); x++) {
if (grid_track_size_list.track_list()[x].is_repeat()) {
// FIXME: Calculate amount of columns/rows if auto-fill/fit
if (!grid_track_size_list.track_list()[x].repeat().is_default())
return -1;
auto repeat = grid_track_size_list.track_list()[x].repeat().grid_track_size_list();
for (size_t y = 0; y < repeat.track_list().size(); y++) {
for (size_t z = 0; z < repeat.line_names()[y].size(); z++) {
if (repeat.line_names()[y][z] == needle)
return x + repeated_tracks_count;
repeated_tracks_count++;
}
}
} else {
for (size_t y = 0; y < grid_track_size_list.line_names()[x].size(); y++) {
if (grid_track_size_list.line_names()[x][y] == needle)
return x + repeated_tracks_count;
}
}
}
for (size_t y = 0; y < grid_track_size_list.line_names()[grid_track_size_list.track_list().size()].size(); y++) {
if (grid_track_size_list.line_names()[grid_track_size_list.track_list().size()][y] == needle)
return grid_track_size_list.track_list().size() + repeated_tracks_count;
}
return -1;
}
OccupationGrid::OccupationGrid(int column_count, int row_count)
{
Vector<bool> occupation_grid_row;

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

@ -40,6 +40,8 @@ private:
float get_free_space_x(Box const&);
float get_free_space_y(Box const&);
int get_line_index_by_line_name(String const& line_name, CSS::GridTrackSizeList);
};
class OccupationGrid {