diff --git a/Tests/LibWeb/Layout/expected/grid/borders.txt b/Tests/LibWeb/Layout/expected/grid/borders.txt index bf5d9ec609..75f4c52982 100644 --- a/Tests/LibWeb/Layout/expected/grid/borders.txt +++ b/Tests/LibWeb/Layout/expected/grid/borders.txt @@ -1,6 +1,6 @@ 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 784x448.28125 children: not-inline + BlockContainer at (8,8) content-size 784x428.28125 children: not-inline Box at (8,8) content-size 784x74.9375 [GFC] children: not-inline BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline TextNode <#text> @@ -122,40 +122,40 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline Box at (8,366.28125) content-size 784x50 [GFC] children: not-inline BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer at (18,376.28125) content-size 280x25 [BFC] children: inline + BlockContainer at (18,376.28125) content-size 280x5 [BFC] children: inline line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [18,376.28125 6.34375x17.46875] "1" TextNode <#text> BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer at (318,376.28125) content-size 280x25 [BFC] children: inline + BlockContainer at (318,376.28125) content-size 280x5 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [318,376.28125 8.8125x17.46875] "2" TextNode <#text> BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer at (18,421.28125) content-size 280x25 [BFC] children: inline + BlockContainer at (18,401.28125) content-size 280x5 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [18,421.28125 8.8125x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [18,401.28125 8.8125x17.46875] "2" TextNode <#text> BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer at (318,421.28125) content-size 280x25 [BFC] children: inline + BlockContainer at (318,401.28125) content-size 280x5 [BFC] children: inline line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 1, rect: [318,421.28125 8.8125x17.46875] + frag 0 from TextNode start: 0, length: 1, rect: [318,401.28125 8.8125x17.46875] "2" TextNode <#text> BlockContainer <(anonymous)> at (8,366.28125) content-size 0x0 [BFC] children: inline TextNode <#text> BlockContainer <(anonymous)> at (8,416.28125) content-size 784x0 children: inline TextNode <#text> - Box at (8,416.28125) content-size 784x40 [GFC] children: not-inline + Box at (8,416.28125) content-size 784x20 [GFC] children: not-inline BlockContainer <(anonymous)> at (8,416.28125) content-size 0x0 [BFC] children: inline TextNode <#text> - BlockContainer at (18,426.28125) content-size 764x20 [BFC] children: inline + BlockContainer at (18,426.28125) content-size 764x0 [BFC] children: inline line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 1, rect: [18,426.28125 6.34375x17.46875] "1" diff --git a/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-column.txt b/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-column.txt index 235abf0d33..266b7e47e6 100644 --- a/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-column.txt +++ b/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-column.txt @@ -1,10 +1,10 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (0,0) content-size 800x35.46875 [BFC] children: inline TextNode <#text> - BlockContainer at (8,8) content-size 22x19.46875 floating [BFC] children: not-inline - BlockContainer <(anonymous)> at (8,8) content-size 22x0 children: inline + BlockContainer at (8,8) content-size 20x19.46875 floating [BFC] children: not-inline + BlockContainer <(anonymous)> at (8,8) content-size 20x0 children: inline TextNode <#text> - Box at (8,8) content-size 22x19.46875 [GFC] children: not-inline + Box at (8,8) content-size 20x19.46875 [GFC] children: not-inline BlockContainer <(anonymous)> [BFC] children: inline TextNode <#text> BlockContainer at (9,9) content-size 18x17.46875 [BFC] children: inline diff --git a/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-grid-2.txt b/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-grid-2.txt index a510b695f8..9737298c16 100644 --- a/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-grid-2.txt +++ b/Tests/LibWeb/Layout/expected/grid/intrinsic-sized-grid-2.txt @@ -2,13 +2,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline BlockContainer at (1,1) content-size 798x30.46875 [BFC] children: not-inline BlockContainer at (10,10) content-size 780x0 children: not-inline Box at (11,11) content-size 96.421875x19.46875 floating [GFC] children: not-inline - BlockContainer at (12,12) content-size 35.953125x17.46875 [BFC] children: inline + BlockContainer at (12,12) content-size 37.953125x17.46875 [BFC] children: inline line 0 width: 37.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 frag 0 from TextNode start: 0, length: 4, rect: [12,12 37.953125x17.46875] "whee" TextNode <#text> - BlockContainer at (49.953125,12) content-size 56.46875x17.46875 [BFC] children: inline + BlockContainer at (51.953125,12) content-size 54.46875x17.46875 [BFC] children: inline line 0 width: 54.46875, height: 17.46875, bottom: 17.46875, baseline: 13.53125 - frag 0 from TextNode start: 0, length: 6, rect: [49.953125,12 54.46875x17.46875] + frag 0 from TextNode start: 0, length: 6, rect: [51.953125,12 54.46875x17.46875] "yeehaw" TextNode <#text> diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index aa41f1346b..590d5cc266 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -714,16 +714,10 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(AvailableSpace const& if (dimension == GridDimension::Column) { if (grid_item.gap_adjusted_column(grid_container()) == index && grid_item.raw_column_span() == 1) { grid_items_of_track.append(grid_item); - - track.border_left = max(track.border_left, grid_item.box().computed_values().border_left().width); - track.border_right = max(track.border_right, grid_item.box().computed_values().border_right().width); } } else { if (grid_item.gap_adjusted_row(grid_container()) == index && grid_item.raw_row_span() == 1) { grid_items_of_track.append(grid_item); - - track.border_top = max(track.border_top, grid_item.box().computed_values().border_top().width); - track.border_bottom = max(track.border_bottom, grid_item.box().computed_values().border_bottom().width); } } } @@ -1362,7 +1356,7 @@ void GridFormattingContext::determine_grid_container_height() { CSSPixels total_y = 0; for (auto& grid_row : m_grid_rows_and_gaps) - total_y += grid_row.full_vertical_size(); + total_y += grid_row.base_size; m_automatic_content_height = total_y; } @@ -1397,33 +1391,35 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const for (int i = 0; i < column_end; i++) x_end += m_grid_columns_and_gaps[i].base_size; for (int i = 0; i < row_start; i++) - y_start += m_grid_rows_and_gaps[i].full_vertical_size(); + y_start += m_grid_rows_and_gaps[i].base_size; for (int i = 0; i < row_end; i++) { - if (i >= row_start) - y_end += m_grid_rows_and_gaps[i].base_size; - else - y_end += m_grid_rows_and_gaps[i].full_vertical_size(); + y_end += m_grid_rows_and_gaps[i].base_size; } // 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_and_gaps[column_start].border_left - m_grid_columns_and_gaps[column_start].border_right); + auto containing_block_width = max(CSSPixels(0), x_end - x_start); 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); + auto border_left = child_box.computed_values().border_left().width; + auto border_right = child_box.computed_values().border_right().width; + auto border_top = child_box.computed_values().border_top().width; + auto border_bottom = child_box.computed_values().border_bottom().width; + + child_box_state.border_left = border_left; + child_box_state.border_right = border_right; + child_box_state.border_top = border_top; + child_box_state.border_bottom = border_bottom; + + auto used_width = computed_width.is_auto() ? (containing_block_width - child_box_state.border_left - child_box_state.border_right) : computed_width.to_px(grid_container(), containing_block_width); + auto used_height = computed_height.is_auto() ? (containing_block_height - child_box_state.border_top - child_box_state.border_bottom) : 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_and_gaps[column_start].border_left, y_start + m_grid_rows_and_gaps[row_start].border_top }; - - child_box_state.border_left = child_box.computed_values().border_left().width; - child_box_state.border_right = child_box.computed_values().border_right().width; - child_box_state.border_top = child_box.computed_values().border_top().width; - child_box_state.border_bottom = child_box.computed_values().border_bottom().width; + child_box_state.offset = { x_start + border_left, y_start + border_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)) @@ -1461,7 +1457,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available if (available_space.height.is_intrinsic_sizing_constraint()) { CSSPixels grid_container_height = 0; for (auto& track : m_grid_rows) { - grid_container_height += track.full_vertical_size(); + grid_container_height += track.base_size; } m_state.get_mutable(grid_container()).set_content_height(grid_container_height); } @@ -1469,7 +1465,7 @@ void GridFormattingContext::determine_intrinsic_size_of_grid_container(Available if (available_space.width.is_intrinsic_sizing_constraint()) { CSSPixels grid_container_width = 0; for (auto& track : m_grid_columns) { - grid_container_width += track.full_horizontal_size(); + grid_container_width += track.base_size; } m_state.get_mutable(grid_container()).set_content_width(grid_container_width); } @@ -1673,12 +1669,12 @@ CSSPixels GridFormattingContext::calculate_min_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return calculate_min_content_size(item, dimension); + return item.add_border_box_sizes(calculate_min_content_size(item, dimension), dimension); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return preferred_size.to_px(grid_container(), containing_block_size); + return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension); } CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1692,12 +1688,12 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con }(); if (should_treat_preferred_size_as_auto) { - return calculate_max_content_size(item, dimension); + return item.add_border_box_sizes(calculate_max_content_size(item, dimension), dimension); } auto preferred_size = get_item_preferred_size(item, dimension); auto containing_block_size = containing_block_size_for_item(item, dimension); - return preferred_size.to_px(grid_container(), containing_block_size); + return item.add_border_box_sizes(preferred_size.to_px(grid_container(), containing_block_size), dimension); } CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const @@ -1782,7 +1778,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 content_based_minimum_size(item, dimension); + return item.add_border_box_sizes(content_based_minimum_size(item, dimension), dimension); } // Otherwise, the automatic minimum size is zero, as usual. @@ -1810,7 +1806,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 minimum_size.to_px(grid_container(), containing_block_size); + return item.add_border_box_sizes(minimum_size.to_px(grid_container(), containing_block_size), dimension); } return calculate_min_content_contribution(item, dimension); diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 9c17b8ae5b..06e4a04235 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -43,6 +43,10 @@ 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; } @@ -57,6 +61,15 @@ public: return dimension == GridDimension::Column ? m_column : m_row; } + CSSPixels add_border_box_sizes(CSSPixels content_size, GridDimension dimension) const + { + if (dimension == GridDimension::Column) { + return m_border_left + content_size + m_border_right; + } else { + return m_border_top + content_size + m_border_bottom; + } + } + size_t raw_row() const { return m_row; } size_t raw_column() const { return m_column; } @@ -72,6 +85,11 @@ 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 { @@ -103,21 +121,6 @@ private: bool frozen { false }; bool is_gap { false }; - CSSPixels border_left { 0 }; - CSSPixels border_right { 0 }; - CSSPixels border_top { 0 }; - CSSPixels border_bottom { 0 }; - - CSSPixels full_horizontal_size() const - { - return base_size + border_left + border_right; - } - - CSSPixels full_vertical_size() const - { - return base_size + border_top + border_bottom; - } - TemporaryTrack(CSS::GridSize min_track_sizing_function, CSS::GridSize max_track_sizing_function) : min_track_sizing_function(min_track_sizing_function) , max_track_sizing_function(max_track_sizing_function)