diff options
4 files changed, 84 insertions, 21 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-paddings.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-paddings.txt new file mode 100644 index 0000000000..85fa19d64c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-fixed-paddings.txt @@ -0,0 +1,36 @@ +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 784x355.507812 children: not-inline + Box <div.grid-container> at (8,8) content-size 784x355.507812 [GFC] children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item> at (68,68) content-size 17.050781x32.753906 [BFC] children: inline + line 0 width: 11.894531, height: 32.753906, bottom: 32.753906, baseline: 25.371093 + frag 0 from TextNode start: 0, length: 1, rect: [71,68 11.894531x32.753906] + "1" + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item> at (255.050781,68) content-size 16.523437x32.753906 [BFC] children: inline + line 0 width: 16.523437, height: 32.753906, bottom: 32.753906, baseline: 25.371093 + frag 0 from TextNode start: 0, length: 1, rect: [255.050781,68 16.523437x32.753906] + "2" + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item> at (68,270.753906) content-size 17.050781x32.753906 [BFC] children: inline + line 0 width: 17.050781, height: 32.753906, bottom: 32.753906, baseline: 25.371093 + frag 0 from TextNode start: 0, length: 1, rect: [68,270.753906 17.050781x32.753906] + "3" + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <div.grid-item> at (255.050781,270.753906) content-size 16.523437x32.753906 [BFC] children: inline + line 0 width: 14.53125, height: 32.753906, bottom: 32.753906, baseline: 25.371093 + frag 0 from TextNode start: 0, length: 1, rect: [256.050781,270.753906 14.53125x32.753906] + "4" + TextNode <#text> + BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,363.507812) content-size 784x0 children: inline + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html new file mode 100644 index 0000000000..9a96871872 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-fixed-paddings.html @@ -0,0 +1,22 @@ +<style> +.grid-container { + display: grid; + grid-template-columns: min-content min-content; + grid-template-rows: auto; + grid-gap: 50px; +} + +.grid-item { + background-color: #ddd; + padding: 50px; + text-align: center; + font-size: 30px; + border: 10px solid black; +} +</style> +<div class="grid-container"> + <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> diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 61f09f3759..3845f93c49 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1360,7 +1360,7 @@ void GridFormattingContext::resolve_grid_item_widths() box_state.border_right = border_right; auto const& computed_width = item.box().computed_values().width(); - auto used_width = computed_width.is_auto() ? (containing_block_width - box_state.border_left - box_state.border_right) : computed_width.to_px(grid_container(), containing_block_width); + auto used_width = computed_width.is_auto() ? (containing_block_width - box_state.border_left - box_state.border_right - box_state.padding_left - box_state.padding_right) : computed_width.to_px(grid_container(), containing_block_width); box_state.set_content_width(used_width); } } @@ -1378,7 +1378,7 @@ void GridFormattingContext::resolve_grid_item_heights() box_state.border_bottom = border_bottom; auto const& computed_height = item.box().computed_values().height(); - auto used_height = computed_height.is_auto() ? (containing_block_height - box_state.border_top - box_state.border_bottom) : computed_height.to_px(grid_container(), containing_block_height); + auto used_height = computed_height.is_auto() ? (containing_block_height - box_state.border_top - box_state.border_bottom - box_state.padding_top - box_state.padding_bottom) : computed_height.to_px(grid_container(), containing_block_height); box_state.set_content_height(used_height); } } @@ -1404,6 +1404,19 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const box_state.set_indefinite_content_width(); if (!computed_values.height().is_length()) box_state.set_indefinite_content_height(); + + // NOTE: It is ok to use 0 containing block size to resolve paddings on the first pass when grid areas sizes + // are not known yet. + // FIXME: Do second pass of tracks layout to resolve percentage paddings + box_state.padding_top = computed_values.padding().top().to_px(grid_container(), 0); + box_state.padding_right = computed_values.padding().right().to_px(grid_container(), 0); + box_state.padding_bottom = computed_values.padding().bottom().to_px(grid_container(), 0); + box_state.padding_left = computed_values.padding().left().to_px(grid_container(), 0); + + box_state.border_top = computed_values.border_top().width; + box_state.border_right = computed_values.border_right().width; + box_state.border_bottom = computed_values.border_bottom().width; + box_state.border_left = computed_values.border_left().width; } run_track_sizing(available_space, GridDimension::Column); @@ -1441,7 +1454,7 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const y_end += m_grid_rows_and_gaps[i].base_size; } - child_box_state.offset = { x_start + child_box_state.border_left, y_start + child_box_state.border_top }; + child_box_state.offset = { x_start + child_box_state.border_left + child_box_state.padding_left, y_start + child_box_state.border_top + child_box_state.padding_top }; auto available_space_for_children = AvailableSpace(AvailableSize::make_definite(child_box_state.content_width()), AvailableSize::make_definite(child_box_state.content_height())); if (auto independent_formatting_context = layout_inside(child_box, LayoutMode::Normal, available_space_for_children)) @@ -1690,12 +1703,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension); + return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension, m_state); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension); + return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); } CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1709,12 +1722,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension); + return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension, m_state); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension); + return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension, m_state); } CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1799,7 +1812,7 @@ CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, Gr // FIXME: Check all tracks spanned by an item auto item_spans_auto_tracks = tracks[item_track_index].min_track_sizing_function.is_auto(); if (item_spans_auto_tracks && !item.box().is_scroll_container()) { - return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension); + return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension, m_state); } // Otherwise, the automatic minimum size is zero, as usual. @@ -1827,7 +1840,7 @@ CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const& if (minimum_size.is_auto()) return automatic_minimum_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension); + return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension, m_state); } return calculate_min_content_contribution(item, dimension); diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index bed8cc269a..9e83854c89 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -43,10 +43,6 @@ public: , m_column(column) , m_column_span(column_span) { - m_border_top = box.computed_values().border_top().width; - m_border_right = box.computed_values().border_right().width; - m_border_bottom = box.computed_values().border_bottom().width; - m_border_left = box.computed_values().border_left().width; } Box const& box() const { return m_box; } @@ -61,12 +57,13 @@ public: return dimension == GridDimension::Column ? m_column : m_row; } - CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension) const + CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension, LayoutState const& state) const { + auto& box_state = state.get(box()); if (dimension == GridDimension::Column) { - return m_border_left + content_size + m_border_right; + return box_state.border_left + box_state.padding_left + content_size + box_state.padding_right + box_state.border_right; } else { - return m_border_top + content_size + m_border_bottom; + return box_state.border_top + box_state.padding_top + content_size + box_state.padding_bottom + box_state.border_bottom; } } @@ -85,11 +82,6 @@ private: size_t m_row_span { 1 }; size_t m_column { 0 }; size_t m_column_span { 1 }; - - CSSPixels m_border_top; - CSSPixels m_border_right; - CSSPixels m_border_bottom; - CSSPixels m_border_left; }; class GridFormattingContext final : public FormattingContext { |