From de970c2dce6989272ff594a255f765061944212c Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Thu, 11 May 2023 17:46:22 +0300 Subject: [PATCH] LibWeb: Resolve grid items preferred width in GFC Previously, the width and height of grid items were set to match the size of the grid area they belonged to. With this change, if a grid item has preferred width or height specified to not "auto" value it will be resolved using grid area as containing block and used instead. --- .../expected/grid/grid-item-fixed-size.txt | 9 +++++++++ .../grid/grid-item-percentage-width.txt | 14 ++++++++++++++ .../Layout/input/grid/grid-item-fixed-size.html | 13 +++++++++++++ .../input/grid/grid-item-percentage-width.html | 17 +++++++++++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 16 ++++++++++++++-- 5 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt create mode 100644 Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt create mode 100644 Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html create mode 100644 Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt new file mode 100644 index 0000000000..40cf415078 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-size.txt @@ -0,0 +1,9 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x200 children: not-inline + Box at (8,8) content-size 784x200 [GFC] children: not-inline + BlockContainer at (8,8) content-size 100x200 [BFC] children: inline + line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875] + "First" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt new file mode 100644 index 0000000000..6fb422af98 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-percentage-width.txt @@ -0,0 +1,14 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x17.46875 children: not-inline + Box at (8,8) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer at (8,8) content-size 313.599975x17.46875 [BFC] children: inline + line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875] + "First" + TextNode <#text> + BlockContainer at (400,8) content-size 78.399993x17.46875 [BFC] children: inline + line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875] + "Second" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html new file mode 100644 index 0000000000..6dcd8b29af --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-size.html @@ -0,0 +1,13 @@ +
First
\ No newline at end of file diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html new file mode 100644 index 0000000000..101a67c23f --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-percentage-width.html @@ -0,0 +1,17 @@ +
First
Second
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index d789af49be..8cf33d3b35 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1454,8 +1454,20 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const else y_end += m_grid_rows[i].full_vertical_size(); } - child_box_state.set_content_width(max(CSSPixels(0), x_end - x_start - m_grid_columns[column_start].border_left - m_grid_columns[column_start].border_right)); - child_box_state.set_content_height(y_end - y_start); + + // A grid item containing block is created by the grid area to which it belongs. + auto containing_block_width = max(CSSPixels(0), x_end - x_start - m_grid_columns[column_start].border_left - m_grid_columns[column_start].border_right); + auto containing_block_height = y_end - y_start; + + auto computed_width = child_box.computed_values().width(); + auto computed_height = child_box.computed_values().height(); + + auto used_width = computed_width.is_auto() ? containing_block_width : computed_width.to_px(grid_container(), containing_block_width); + auto used_height = computed_height.is_auto() ? containing_block_height : computed_height.to_px(grid_container(), containing_block_height); + + child_box_state.set_content_width(used_width); + child_box_state.set_content_height(used_height); + child_box_state.offset = { x_start + m_grid_columns[column_start].border_left, y_start + m_grid_rows[row_start].border_top }; child_box_state.border_left = child_box.computed_values().border_left().width;