From cc88a2657d38ff6c1544be34e3a3e3ec50db132e Mon Sep 17 00:00:00 2001 From: Andreas Kling Date: Sat, 6 Jan 2024 18:35:31 +0100 Subject: [PATCH] LibWeb: Resolve grid item vertical margin/padding against CB width Percentage vertical margin and padding values are relative to the containing block *width*, not *height*. This has to be one of the most commonly recurring mistakes we make :^) --- ...ertical-padding-and-margin-percentages.txt | 13 +++++++++++++ ...rtical-padding-and-margin-percentages.html | 19 +++++++++++++++++++ .../LibWeb/Layout/GridFormattingContext.cpp | 13 +++++-------- 3 files changed, 37 insertions(+), 8 deletions(-) create mode 100644 Tests/LibWeb/Layout/expected/grid/grid-item-vertical-padding-and-margin-percentages.txt create mode 100644 Tests/LibWeb/Layout/input/grid/grid-item-vertical-padding-and-margin-percentages.html diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-vertical-padding-and-margin-percentages.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-vertical-padding-and-margin-percentages.txt new file mode 100644 index 0000000000..7a740bff9c --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-vertical-padding-and-margin-percentages.txt @@ -0,0 +1,13 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x466 [BFC] children: not-inline + Box at (8,8) content-size 500x450 [GFC] children: not-inline + BlockContainer at (8,183) content-size 500x0 [BFC] children: not-inline + BlockContainer at (8,183) content-size 500x0 [BFC] children: not-inline + BlockContainer <(anonymous)> (not painted) [BFC] children: inline + TextNode <#text> + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x466] + PaintableBox (Box) [8,8 500x450] + PaintableWithLines (BlockContainer
.a) [8,58 500x125] + PaintableWithLines (BlockContainer
.b) [8,183 500x175] diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-vertical-padding-and-margin-percentages.html b/Tests/LibWeb/Layout/input/grid/grid-item-vertical-padding-and-margin-percentages.html new file mode 100644 index 0000000000..1cb7baa6ac --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-vertical-padding-and-margin-percentages.html @@ -0,0 +1,19 @@ +
diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index b412786c78..580315f7ec 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1823,9 +1823,8 @@ void GridFormattingContext::resolve_items_box_metrics(GridDimension const dimens auto& box_state = m_state.get_mutable(item.box); auto& computed_values = item.box->computed_values(); + CSSPixels containing_block_width = containing_block_size_for_item(item, GridDimension::Column); if (dimension == GridDimension::Column) { - CSSPixels containing_block_width = containing_block_size_for_item(item, GridDimension::Column); - box_state.padding_right = computed_values.padding().right().to_px(grid_container(), containing_block_width); box_state.padding_left = computed_values.padding().left().to_px(grid_container(), containing_block_width); @@ -1835,13 +1834,11 @@ void GridFormattingContext::resolve_items_box_metrics(GridDimension const dimens box_state.border_right = computed_values.border_right().width; box_state.border_left = computed_values.border_left().width; } else { - CSSPixels containing_block_height = containing_block_size_for_item(item, GridDimension::Row); + box_state.padding_top = computed_values.padding().top().to_px(grid_container(), containing_block_width); + box_state.padding_bottom = computed_values.padding().bottom().to_px(grid_container(), containing_block_width); - box_state.padding_top = computed_values.padding().top().to_px(grid_container(), containing_block_height); - box_state.padding_bottom = computed_values.padding().bottom().to_px(grid_container(), containing_block_height); - - box_state.margin_top = computed_values.margin().top().to_px(grid_container(), containing_block_height); - box_state.margin_bottom = computed_values.margin().bottom().to_px(grid_container(), containing_block_height); + box_state.margin_top = computed_values.margin().top().to_px(grid_container(), containing_block_width); + box_state.margin_bottom = computed_values.margin().bottom().to_px(grid_container(), containing_block_width); box_state.border_top = computed_values.border_top().width; box_state.border_bottom = computed_values.border_bottom().width;