diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Libraries/LibWeb/Layout/GridFormattingContext.cpp index bec973d9521..27c2d8beb40 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -1549,6 +1549,7 @@ void GridFormattingContext::resolve_grid_item_widths() { for (auto& item : m_grid_items) { CSSPixels containing_block_width = containing_block_size_for_item(item, GridDimension::Column); + CSS::JustifyItems justification = justification_for_item(item.box); auto const& computed_values = item.box->computed_values(); auto const& computed_width = computed_values.width(); @@ -1559,15 +1560,14 @@ void GridFormattingContext::resolve_grid_item_widths() CSSPixels width; }; - ItemAlignment initial { - .margin_left = item.used_values.margin_left, - .margin_right = item.used_values.margin_right, - .width = item.used_values.content_width() - }; + auto try_compute_width = [&item, containing_block_width, justification](CSSPixels a_width, CSS::Size const& computed_width) -> ItemAlignment { + auto const& computed_values = item.box->computed_values(); - auto try_compute_width = [&](CSSPixels a_width, CSS::Size const& computed_width) -> ItemAlignment { - ItemAlignment result = initial; - result.width = a_width; + ItemAlignment result = { + .margin_left = item.used_values.margin_left, + .margin_right = item.used_values.margin_right, + .width = a_width + }; // Auto margins absorb positive free space prior to alignment via the box alignment properties. auto free_space_left_for_margins = containing_block_width - result.width - item.used_values.border_left - item.used_values.border_right - item.used_values.padding_left - item.used_values.padding_right - item.used_values.margin_left - item.used_values.margin_right; @@ -1578,13 +1578,14 @@ void GridFormattingContext::resolve_grid_item_widths() result.margin_left = free_space_left_for_margins; } else if (computed_values.margin().right().is_auto()) { result.margin_right = free_space_left_for_margins; - } else if (computed_width.is_auto()) { + } else if (computed_width.is_auto() && !item.box->is_replaced_box()) { result.width += free_space_left_for_margins; } auto free_space_left_for_alignment = containing_block_width - a_width - item.used_values.border_left - item.used_values.border_right - item.used_values.padding_left - item.used_values.padding_right - item.used_values.margin_left - item.used_values.margin_right; - switch (justification_for_item(item.box)) { + switch (justification) { case CSS::JustifyItems::Normal: + break; case CSS::JustifyItems::Stretch: break; case CSS::JustifyItems::Center: @@ -1613,13 +1614,18 @@ void GridFormattingContext::resolve_grid_item_widths() ItemAlignment used_alignment; AvailableSpace available_space { AvailableSize::make_definite(containing_block_width), AvailableSize::make_indefinite() }; - if (computed_width.is_auto()) { - used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space), computed_width); - } else if (computed_width.is_fit_content()) { - used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space), computed_width); + if (item.box->is_replaced_box() && item.box->has_natural_width()) { + auto width = tentative_width_for_replaced_element(item.box, computed_values.width(), available_space); + used_alignment = try_compute_width(width, computed_width); } else { - auto width_px = calculate_inner_width(item.box, available_space.width, computed_width); - used_alignment = try_compute_width(width_px, computed_width); + if (computed_width.is_auto() || computed_width.is_fit_content()) { + auto fit_content_width = calculate_fit_content_width(item.box, available_space); + used_alignment = try_compute_width(fit_content_width, computed_width); + used_alignment = try_compute_width(calculate_fit_content_width(item.box, available_space), computed_width); + } else { + auto width_px = calculate_inner_width(item.box, available_space.width, computed_width); + used_alignment = try_compute_width(width_px, computed_width); + } } if (!should_treat_max_width_as_none(item.box, m_available_space->width)) { @@ -1648,6 +1654,7 @@ void GridFormattingContext::resolve_grid_item_heights() { for (auto& item : m_grid_items) { CSSPixels containing_block_height = containing_block_size_for_item(item, GridDimension::Row); + CSS::AlignItems alignment = alignment_for_item(item.box); auto const& computed_values = item.box->computed_values(); auto const& computed_height = computed_values.height(); @@ -1658,15 +1665,14 @@ void GridFormattingContext::resolve_grid_item_heights() CSSPixels height; }; - ItemAlignment initial { - .margin_top = item.used_values.margin_top, - .margin_bottom = item.used_values.margin_bottom, - .height = item.used_values.content_height() - }; + auto try_compute_height = [&item, containing_block_height, alignment](CSSPixels a_height) -> ItemAlignment { + auto const& computed_values = item.box->computed_values(); - auto try_compute_height = [&](CSSPixels a_height) -> ItemAlignment { - ItemAlignment result = initial; - result.height = a_height; + ItemAlignment result = { + .margin_top = item.used_values.margin_top, + .margin_bottom = item.used_values.margin_bottom, + .height = a_height + }; CSSPixels height = a_height; auto underflow_px = containing_block_height - height - item.used_values.border_top - item.used_values.border_bottom - item.used_values.padding_top - item.used_values.padding_bottom - item.used_values.margin_top - item.used_values.margin_bottom; @@ -1678,13 +1684,14 @@ void GridFormattingContext::resolve_grid_item_heights() result.margin_top = underflow_px; } else if (computed_values.margin().bottom().is_auto()) { result.margin_bottom = underflow_px; - } else if (computed_values.height().is_auto()) { + } else if (computed_values.height().is_auto() && !item.box->is_replaced_box()) { height += underflow_px; } - switch (alignment_for_item(item.box)) { + switch (alignment) { case CSS::AlignItems::Baseline: // FIXME: Not implemented + break; case CSS::AlignItems::Stretch: case CSS::AlignItems::Normal: result.height = height; diff --git a/Tests/LibWeb/Layout/expected/grid/replaced-item-2.txt b/Tests/LibWeb/Layout/expected/grid/replaced-item-2.txt new file mode 100644 index 00000000000..1eb67f9cbc8 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/replaced-item-2.txt @@ -0,0 +1,11 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer at (0,0) content-size 800x116 [BFC] children: not-inline + BlockContainer at (8,8) content-size 100x100 children: not-inline + Box at (8,8) content-size 100x100 [GFC] children: not-inline + ImageBox at (8,8) content-size 10x10 children: not-inline + +ViewportPaintable (Viewport<#document>) [0,0 800x600] + PaintableWithLines (BlockContainer) [0,0 800x116] + PaintableWithLines (BlockContainer) [8,8 100x100] + PaintableBox (Box
.img-wrapper) [8,8 100x100] + ImagePaintable (ImageBox) [8,8 10x10] diff --git a/Tests/LibWeb/Layout/input/grid/replaced-item-2.html b/Tests/LibWeb/Layout/input/grid/replaced-item-2.html new file mode 100644 index 00000000000..b3fa756dcc7 --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/replaced-item-2.html @@ -0,0 +1,12 @@ +
\ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt index 0d45e002b62..9dd477389ba 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-013.txt @@ -2,6 +2,7 @@ Harness status: OK Found 2 tests -2 Fail +1 Pass +1 Fail Fail .before 1 -Fail .after 2 \ No newline at end of file +Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt index 0d45e002b62..c2d337bbcc7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-014.txt @@ -2,6 +2,7 @@ Harness status: OK Found 2 tests -2 Fail -Fail .before 1 +1 Pass +1 Fail +Pass .before 1 Fail .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt index c2d337bbcc7..438a9823e7d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-015.txt @@ -2,7 +2,6 @@ Harness status: OK Found 2 tests -1 Pass -1 Fail +2 Pass Pass .before 1 -Fail .after 2 \ No newline at end of file +Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt index 9dd477389ba..438a9823e7d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-016.txt @@ -2,7 +2,6 @@ Harness status: OK Found 2 tests -1 Pass -1 Fail -Fail .before 1 +2 Pass +Pass .before 1 Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt index 0d45e002b62..9dd477389ba 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-031.txt @@ -2,6 +2,7 @@ Harness status: OK Found 2 tests -2 Fail +1 Pass +1 Fail Fail .before 1 -Fail .after 2 \ No newline at end of file +Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt index 9dd477389ba..c2d337bbcc7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-032.txt @@ -4,5 +4,5 @@ Found 2 tests 1 Pass 1 Fail -Fail .before 1 -Pass .after 2 \ No newline at end of file +Pass .before 1 +Fail .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt index c2d337bbcc7..438a9823e7d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-033.txt @@ -2,7 +2,6 @@ Harness status: OK Found 2 tests -1 Pass -1 Fail +2 Pass Pass .before 1 -Fail .after 2 \ No newline at end of file +Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt index 9dd477389ba..438a9823e7d 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-implies-size-change-034.txt @@ -2,7 +2,6 @@ Harness status: OK Found 2 tests -1 Pass -1 Fail -Fail .before 1 +2 Pass +Pass .before 1 Pass .after 2 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt index 7a6bdbab231..6afc4086d97 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-005.txt @@ -2,11 +2,11 @@ Harness status: OK Found 6 tests -1 Pass -5 Fail +3 Pass +3 Fail Fail .before 1 -Fail .before 2 +Pass .before 2 Fail .before 3 Fail .after 4 Pass .after 5 -Fail .after 6 \ No newline at end of file +Pass .after 6 \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt index 9a1f4bbf93e..b5aca6fd478 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/alignment/grid-alignment-style-changes-006.txt @@ -2,11 +2,11 @@ Harness status: OK Found 6 tests -1 Pass -5 Fail +3 Pass +3 Fail Fail .before 1 Pass .before 2 -Fail .before 3 +Pass .before 3 Fail .after 4 -Fail .after 5 +Pass .after 5 Fail .after 6 \ No newline at end of file