diff options
5 files changed, 67 insertions, 2 deletions
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 <html> at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x200 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x200 [GFC] children: not-inline + BlockContainer <div.first> 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 <html> at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline + BlockContainer <div.first> 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 <div.second> 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 @@ +<style> +.grid-container { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto; +} + +.first { + background-color: lightcoral; + width: 100px; + height: 200px; +} +</style><div class="grid-container"><div class="first">First</div></div>
\ 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 @@ +<style> +.grid-container { + display: grid; + grid-template-columns: auto auto; + grid-template-rows: auto; +} + +.first { + background-color: lightcoral; + width: 80%; +} + +.second { + background-color: lightsteelblue; + width: 20%; +} +</style><div class="grid-container"><div class="first">First</div><div class="second">Second</div></div>
\ 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; |