diff --git a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp index 513d0ef2216..1d4e0aa8909 100644 --- a/Libraries/LibWeb/Layout/BlockFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/BlockFormattingContext.cpp @@ -793,7 +793,8 @@ void BlockFormattingContext::layout_block_level_box(Box const& box, BlockContain m_margin_state.add_margin(box_state.margin_bottom); m_margin_state.update_block_waiting_for_final_y_position(); - compute_inset(box); + auto const& block_container_state = m_state.get(block_container); + compute_inset(box, content_box_rect(block_container_state).size()); // Now that our children are formatted we place the ListItemBox with the left space we remembered. if (is(box)) { @@ -1012,7 +1013,8 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer auto& box_state = m_state.get_mutable(box); auto const& computed_values = box.computed_values(); - resolve_vertical_box_model_metrics(box, m_state.get(block_container).content_width()); + auto const& block_container_state = m_state.get(block_container); + resolve_vertical_box_model_metrics(box, block_container_state.content_width()); compute_width(box, available_space); @@ -1166,7 +1168,7 @@ void BlockFormattingContext::layout_floating_box(Box const& box, BlockContainer if (line_builder) line_builder->recalculate_available_space(); - compute_inset(box); + compute_inset(box, content_box_rect(block_container_state).size()); if (independent_formatting_context) independent_formatting_context->parent_context_did_dimension_child_root_box(); diff --git a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp index 7bdf1623fbf..adcf53bc387 100644 --- a/Libraries/LibWeb/Layout/FlexFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FlexFormattingContext.cpp @@ -176,7 +176,7 @@ void FlexFormattingContext::run(AvailableSpace const& available_space) if (auto independent_formatting_context = layout_inside(item.box, LayoutMode::Normal, item.used_values.available_inner_space_or_constraints_from(m_available_space_for_items->space))) independent_formatting_context->parent_context_did_dimension_child_root_box(); - compute_inset(item.box); + compute_inset(item.box, content_box_rect(m_flex_container_state).size()); } } } diff --git a/Libraries/LibWeb/Layout/FormattingContext.cpp b/Libraries/LibWeb/Layout/FormattingContext.cpp index 1e65532aa5e..90d1b2d065f 100644 --- a/Libraries/LibWeb/Layout/FormattingContext.cpp +++ b/Libraries/LibWeb/Layout/FormattingContext.cpp @@ -1328,7 +1328,7 @@ void FormattingContext::compute_height_for_absolutely_positioned_replaced_elemen } // https://www.w3.org/TR/css-position-3/#relpos-insets -void FormattingContext::compute_inset(NodeWithStyleAndBoxModelMetrics const& box) +void FormattingContext::compute_inset(NodeWithStyleAndBoxModelMetrics const& box, CSSPixelSize containing_block_size) { if (box.computed_values().position() != CSS::Positioning::Relative) return; @@ -1363,8 +1363,8 @@ void FormattingContext::compute_inset(NodeWithStyleAndBoxModelMetrics const& box auto const& computed_values = box.computed_values(); // FIXME: Respect the containing block's writing-mode. - resolve_two_opposing_insets(computed_values.inset().left(), computed_values.inset().right(), box_state.inset_left, box_state.inset_right, containing_block_width_for(box)); - resolve_two_opposing_insets(computed_values.inset().top(), computed_values.inset().bottom(), box_state.inset_top, box_state.inset_bottom, containing_block_height_for(box)); + resolve_two_opposing_insets(computed_values.inset().left(), computed_values.inset().right(), box_state.inset_left, box_state.inset_right, containing_block_size.width()); + resolve_two_opposing_insets(computed_values.inset().top(), computed_values.inset().bottom(), box_state.inset_top, box_state.inset_bottom, containing_block_size.height()); } // https://drafts.csswg.org/css-sizing-3/#fit-content-size diff --git a/Libraries/LibWeb/Layout/FormattingContext.h b/Libraries/LibWeb/Layout/FormattingContext.h index 3a3a5c4b4a2..2aba6433a70 100644 --- a/Libraries/LibWeb/Layout/FormattingContext.h +++ b/Libraries/LibWeb/Layout/FormattingContext.h @@ -106,7 +106,7 @@ public: bool can_skip_is_anonymous_text_run(Box&); - void compute_inset(NodeWithStyleAndBoxModelMetrics const&); + void compute_inset(NodeWithStyleAndBoxModelMetrics const&, CSSPixelSize containing_block_size); protected: FormattingContext(Type, LayoutMode, LayoutState&, Box const&, FormattingContext* parent = nullptr); diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 06795ae075c..43c29c97e8a 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -2060,8 +2060,9 @@ void GridFormattingContext::run(AvailableSpace const& available_space) for (auto& grid_item : m_grid_items) { auto& grid_item_box_state = m_state.get_mutable(grid_item.box); CSSPixelPoint margin_offset = { grid_item_box_state.margin_box_left(), grid_item_box_state.margin_box_top() }; - grid_item_box_state.offset = get_grid_area_rect(grid_item).top_left() + margin_offset; - compute_inset(grid_item.box); + auto const grid_area_rect = get_grid_area_rect(grid_item); + grid_item_box_state.offset = grid_area_rect.top_left() + margin_offset; + compute_inset(grid_item.box, grid_area_rect.size()); auto available_space_for_children = AvailableSpace(AvailableSize::make_definite(grid_item_box_state.content_width()), AvailableSize::make_definite(grid_item_box_state.content_height())); if (auto independent_formatting_context = layout_inside(grid_item.box, LayoutMode::Normal, available_space_for_children)) diff --git a/Libraries/LibWeb/Layout/InlineFormattingContext.cpp b/Libraries/LibWeb/Layout/InlineFormattingContext.cpp index 3204f2f3de1..3c6b39618be 100644 --- a/Libraries/LibWeb/Layout/InlineFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/InlineFormattingContext.cpp @@ -294,7 +294,7 @@ void InlineFormattingContext::generate_line_boxes() } case InlineLevelIterator::Item::Type::Element: { auto& box = verify_cast(*item.node); - compute_inset(box); + compute_inset(box, content_box_rect(m_containing_block_used_values).size()); if (containing_block().computed_values().white_space() != CSS::WhiteSpace::Nowrap) { auto minimum_space_needed_on_line = item.border_box_width(); if (item.margin_start < 0) diff --git a/Libraries/LibWeb/Layout/InlineLevelIterator.cpp b/Libraries/LibWeb/Layout/InlineLevelIterator.cpp index 7c9a3f8de1f..333423e8f77 100644 --- a/Libraries/LibWeb/Layout/InlineLevelIterator.cpp +++ b/Libraries/LibWeb/Layout/InlineLevelIterator.cpp @@ -48,7 +48,7 @@ void InlineLevelIterator::enter_node_with_box_model_metrics(Layout::NodeWithStyl m_extra_leading_metrics->padding += used_values.padding_left; // Now's our chance to resolve the inset properties for this node. - m_inline_formatting_context.compute_inset(node); + m_inline_formatting_context.compute_inset(node, m_inline_formatting_context.content_box_rect(m_containing_block_used_values).size()); m_box_model_node_stack.append(node); } diff --git a/Tests/LibWeb/Layout/expected/grid/relative-position-grid-item-with-percentage-insets.txt b/Tests/LibWeb/Layout/expected/grid/relative-position-grid-item-with-percentage-insets.txt new file mode 100644 index 00000000000..4088c378dfc --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/relative-position-grid-item-with-percentage-insets.txt @@ -0,0 +1,54 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x318 [BFC] children: not-inline + BlockContainer at (8,8) content-size 784x302 children: not-inline + Box at (9,9) content-size 300x300 [GFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (20,20) content-size 123x123 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (58.140625,73) content-size 46.71875x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 6, rect: [58.140625,73 46.71875x17] baseline: 13.296875 + "Item 1" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (247.5,97.5) content-size 123x123 positioned flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (284.40625,150.5) content-size 49.1875x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 6, rect: [284.40625,150.5 49.1875x17] baseline: 13.296875 + "Item 2" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (20,175) content-size 123x123 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (56.765625,228) content-size 49.46875x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 6, rect: [56.765625,228 49.46875x17] baseline: 13.296875 + "Item 3" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + Box at (175,175) content-size 123x123 flex-container(row) [FFC] children: not-inline + BlockContainer <(anonymous)> at (212.4375,228) content-size 48.125x17 flex-item [BFC] children: inline + frag 0 from TextNode start: 0, length: 6, rect: [212.4375,228 48.125x17] baseline: 13.296875 + "Item 4" + TextNode <#text> + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + BlockContainer <(anonymous)> at (8,310) content-size 784x0 children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x318] + PaintableWithLines (BlockContainer) [8,8 784x302] + PaintableBox (Box
.grid-container) [8,8 302x302] overflow: [9,9 372.5x300] + PaintableBox (Box
.grid-item) [9,9 145x145] + PaintableWithLines (BlockContainer(anonymous)) [58.140625,73 46.71875x17] + TextPaintable (TextNode<#text>) + PaintableBox (Box
.grid-item.relative-item) [236.5,86.5 145x145] + PaintableWithLines (BlockContainer(anonymous)) [284.40625,150.5 49.1875x17] + TextPaintable (TextNode<#text>) + PaintableBox (Box
.grid-item) [9,164 145x145] + PaintableWithLines (BlockContainer(anonymous)) [56.765625,228 49.46875x17] + TextPaintable (TextNode<#text>) + PaintableBox (Box
.grid-item) [164,164 145x145] + PaintableWithLines (BlockContainer(anonymous)) [212.4375,228 48.125x17] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer(anonymous)) [8,310 784x0] diff --git a/Tests/LibWeb/Layout/input/grid/relative-position-grid-item-with-percentage-insets.html b/Tests/LibWeb/Layout/input/grid/relative-position-grid-item-with-percentage-insets.html new file mode 100644 index 00000000000..6f4883c63e3 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/relative-position-grid-item-with-percentage-insets.html @@ -0,0 +1,33 @@ + + +
+
Item 1
+
Item 2
+
Item 3
+
Item 4
+