From 568c486610a9b293e6fce330fbb84a9178db1db1 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Mon, 7 Aug 2023 17:06:08 +0200 Subject: [PATCH] LibWeb: Support positioning of abspos boxes inside grid container - Out-of-flow items should not affect grid layout - "The static position of an absolutely-positioned child of a grid container is determined as if it were the sole grid item in a grid area whose edges coincide with the content edges of the grid container." --- .../Layout/expected/grid/abspos-item.txt | 23 +++++++++++++++++++ .../LibWeb/Layout/input/grid/abspos-item.html | 10 ++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 16 +++++++++++++ .../LibWeb/Layout/GridFormattingContext.h | 2 ++ 4 files changed, 51 insertions(+) create mode 100644 Tests/LibWeb/Layout/expected/grid/abspos-item.txt create mode 100644 Tests/LibWeb/Layout/input/grid/abspos-item.html diff --git a/Tests/LibWeb/Layout/expected/grid/abspos-item.txt b/Tests/LibWeb/Layout/expected/grid/abspos-item.txt new file mode 100644 index 00000000000..0d0c994747b --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/abspos-item.txt @@ -0,0 +1,23 @@ +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 80.765625x17.46875 positioned [BFC] children: inline + line 0 width: 80.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,8 80.765625x17.46875] + "some text" + TextNode <#text> + BlockContainer
at (8,8) content-size 784x17.46875 [BFC] children: inline + line 0 width: 80.25, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 9, rect: [8,8 80.25x17.46875] + "more text" + TextNode <#text> + +PaintableWithLines (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x600] + PaintableWithLines (BlockContainer) [8,8 784x17.46875] + PaintableBox (Box
.outer-grid) [8,8 784x17.46875] + PaintableWithLines (BlockContainer
.inner-absolute-block) [8,8 80.765625x17.46875] + TextPaintable (TextNode<#text>) + PaintableWithLines (BlockContainer
) [8,8 784x17.46875] + TextPaintable (TextNode<#text>) diff --git a/Tests/LibWeb/Layout/input/grid/abspos-item.html b/Tests/LibWeb/Layout/input/grid/abspos-item.html new file mode 100644 index 00000000000..523e7b77269 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/abspos-item.html @@ -0,0 +1,10 @@ + +
some text
more text
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 96fa2cea954..38209f0631e 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1317,6 +1317,10 @@ void GridFormattingContext::place_grid_items(AvailableSpace const& available_spa grid_container().for_each_child_of_type([&](Box& child_box) { if (can_skip_is_anonymous_text_run(child_box)) return IterationDecision::Continue; + + if (child_box.is_out_of_flow(*this)) + return IterationDecision::Continue; + m_boxes_to_place.append(child_box); return IterationDecision::Continue; }); @@ -1780,6 +1784,18 @@ void GridFormattingContext::run(Box const& box, LayoutMode, AvailableSpace const } } +void GridFormattingContext::parent_context_did_dimension_child_root_box() +{ + grid_container().for_each_child_of_type([&](Layout::Box& box) { + if (box.is_absolutely_positioned()) { + auto& cb_state = m_state.get(*box.containing_block()); + auto available_width = AvailableSize::make_definite(cb_state.content_width() + cb_state.padding_left + cb_state.padding_right); + auto available_height = AvailableSize::make_definite(cb_state.content_height() + cb_state.padding_top + cb_state.padding_bottom); + layout_absolutely_positioned_element(box, AvailableSpace(available_width, available_height)); + } + }); +} + void GridFormattingContext::determine_intrinsic_size_of_grid_container(AvailableSpace const& available_space) { // https://www.w3.org/TR/css-grid-1/#intrinsic-sizes diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 142193317e1..df2a3c2d38b 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -223,6 +223,8 @@ private: void determine_grid_container_height(); void determine_intrinsic_size_of_grid_container(AvailableSpace const& available_space); + virtual void parent_context_did_dimension_child_root_box() override; + void resolve_grid_item_widths(); void resolve_grid_item_heights();