diff options
| author | Tom <martinmotteditfalisse@gmail.com> | 2022-12-26 09:49:54 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2022-12-26 16:02:48 +0100 |
| commit | 9d5049230cbe305822e5d8611322ea1d19971311 (patch) | |
| tree | b85757e600204b10d1b2a376e12c4db120fa6af3 | |
| parent | ba86011fab089731937531b232efc42cf34f6360 (diff) | |
| download | serenity-9d5049230cbe305822e5d8611322ea1d19971311.zip | |
LibWeb: Clamp {row,column} spans if outside of grid
A bug was found where grid items were being drawn outside of the grid if
the item had a large span and the grid was defined as having gaps
between the rows/columns.
This was caused by an erroneous calculation of the
{row,column}_{start,span} properties.
| -rw-r--r-- | Base/res/html/misc/display-grid.html | 12 | ||||
| -rw-r--r-- | Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp | 16 |
2 files changed, 21 insertions, 7 deletions
diff --git a/Base/res/html/misc/display-grid.html b/Base/res/html/misc/display-grid.html index 46fc62d7d4..89180e5325 100644 --- a/Base/res/html/misc/display-grid.html +++ b/Base/res/html/misc/display-grid.html @@ -139,7 +139,17 @@ that I don't quite understand. --> "> <div class="grid-item">1</div> </div> - + +<!-- Row-gaps with overflowing row spans. Github bug--> +<div + class="grid-container" + style=" + grid-row-gap: 16px; + grid-template-rows: 1fr 1fr; + "> + <div class="grid-item" style="grid-row: 2 / span 3;">1</div> +</div> + <p>End of crash tests</p> <!-- Different column sizes --> diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index aa13519c52..79430a081b 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1761,15 +1761,19 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const }; for (auto& positioned_box : positioned_boxes) { - auto row_span_without_overflows = positioned_box.row + positioned_box.row_span > static_cast<int>(m_grid_rows.size()) ? static_cast<int>(m_grid_rows.size()) - positioned_box.row : positioned_box.row_span; - auto resolved_row_start = box.computed_values().row_gap().is_auto() ? positioned_box.row : positioned_box.row * 2; - auto resolved_row_end = ((positioned_box.row + row_span_without_overflows) * 2) - 1; - auto resolved_row_span = box.computed_values().row_gap().is_auto() ? row_span_without_overflows : resolved_row_end - resolved_row_start; + auto resolved_row_span = box.computed_values().row_gap().is_auto() ? positioned_box.row_span : positioned_box.row_span * 2; + if (!box.computed_values().row_gap().is_auto() && resolved_row_start == 0) + resolved_row_span -= 1; + if (resolved_row_start + resolved_row_span > static_cast<int>(m_grid_rows.size())) + resolved_row_span = m_grid_rows.size() - resolved_row_start; auto resolved_column_start = box.computed_values().column_gap().is_auto() ? positioned_box.column : positioned_box.column * 2; - auto resolved_column_end = ((positioned_box.column + positioned_box.column_span) * 2) - 1; - auto resolved_column_span = box.computed_values().column_gap().is_auto() ? positioned_box.column_span : resolved_column_end - resolved_column_start; + auto resolved_column_span = box.computed_values().column_gap().is_auto() ? positioned_box.column_span : positioned_box.column_span * 2; + if (!box.computed_values().column_gap().is_auto() && resolved_column_start == 0) + resolved_column_span -= 1; + if (resolved_column_start + resolved_column_span > static_cast<int>(m_grid_columns.size())) + resolved_column_span = m_grid_columns.size() - resolved_column_start; layout_box( resolved_row_start, |