beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-09-29 16:21:29 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Don't expand grid for {row,column} spans

Browse source 
Fixes a bug where when you had spans that that were bigger than the
grid, would create enough tracks to accomodate them. When a fixed
position is given, there should be at a minimum a row/column available
for the track. The span will be truncated if there is no space for it
later.
This commit is contained in:
Tom 2022-12-28 10:13:37 +01:00 committed by Andreas Kling
parent 6e29f693f5
commit bb062e50b0
Notes: sideshowbarker 2024-07-17 03:19:14 +09:00 
Author: https://github.com/martinfalisse
Commit: https://github.com/SerenityOS/serenity/commit/bb062e50b0
Pull-request: https://github.com/SerenityOS/serenity/pull/16685
2 changed files with 48 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
Base/res/html/misc/display-grid.html
View file

@ -150,6 +150,13 @@ that I don't quite understand. -->
<div class="grid-item" style="grid-row: 2 / span 3;">1</div>
</div>
<div style="
display: grid;
grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto
">
<div style="grid-column: 2/span 2;"></div>
</div>
<p>End of crash tests</p>
<!-- Different column sizes -->
@ -474,3 +481,40 @@ length value, and as a minimum two lengths with an auto. -->
grid-row-end: span 3;
">2</div>
</div>
<!-- Column-gaps with overflowing column spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div
class="grid-container"
style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="grid-column: 2 / span 5;">1</div>
</div>
<!-- Column-gaps with overflowing column spans and row spans -->
<p>There should be 1 column that starts at column 2 and spans until the end.</p>
<div
class="grid-container"
style="
grid-column-gap: 16px;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20px;
">
<div class="grid-item" style="grid-column: 2 / span 5; grid-row: span 4">1</div>
</div>
<!-- Grid shouldn't expand to 3 columns as having too much span doesn't change size. -->
<p>The bottom row should take up half the width of the grid.</p>
<div
class="grid-container"
style="
grid-template-columns: 1fr 1fr;
">
<div class="grid-item" style="
grid-column: 1 / span 3;
grid-row: 1;
">1</div>
<div class="grid-item">1</div>
</div>

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

@ -267,8 +267,8 @@ void GridFormattingContext::place_item_with_row_and_column_position(Box const& b
column_start -= 1;
m_positioned_boxes.append({ child_box, row_start, row_span, column_start, column_span });
m_occupation_grid.maybe_add_row(row_start + row_span);
m_occupation_grid.maybe_add_column(column_start + column_span);
m_occupation_grid.maybe_add_row(row_start + 1);
m_occupation_grid.maybe_add_column(column_start + 1);
m_occupation_grid.set_occupied(column_start, column_start + column_span, row_start, row_start + row_span);
}
@ -505,8 +505,8 @@ void GridFormattingContext::place_item_with_column_position(Box const& box, Box
auto_placement_cursor_y++;
auto_placement_cursor_x = column_start;
m_occupation_grid.maybe_add_column(auto_placement_cursor_x + column_span);
m_occupation_grid.maybe_add_row(auto_placement_cursor_y + row_span);
m_occupation_grid.maybe_add_column(auto_placement_cursor_x + 1);
m_occupation_grid.maybe_add_row(auto_placement_cursor_y + 1);
// 4.1.1.2. Increment the cursor's row position until a value is found where the grid item does not
// overlap any occupied grid cells (creating new rows in the implicit grid as necessary).