diff options
4 files changed, 171 insertions, 15 deletions
diff --git a/Tests/LibWeb/Layout/expected/grid/grid-item-min-size.txt b/Tests/LibWeb/Layout/expected/grid/grid-item-min-size.txt new file mode 100644 index 0000000000..d6b4c25a05 --- /dev/null +++ b/Tests/LibWeb/Layout/expected/grid/grid-item-min-size.txt @@ -0,0 +1,14 @@ +Viewport <#document> at (0,0) content-size 800x600 children: not-inline + BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline + BlockContainer <body> at (8,8) content-size 784x0 children: not-inline + Box <div.grid> at (8,8) content-size 102x204 floating [GFC] children: not-inline + BlockContainer <div.first> at (9,9) content-size 100x100 [BFC] children: inline + line 0 width: 36.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 5, rect: [9,9 36.03125x17.46875] + "first" + TextNode <#text> + BlockContainer <div.second> at (9,111) content-size 100x100 [BFC] children: inline + line 0 width: 54.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125 + frag 0 from TextNode start: 0, length: 6, rect: [9,111 54.78125x17.46875] + "second" + TextNode <#text> diff --git a/Tests/LibWeb/Layout/input/grid/grid-item-min-size.html b/Tests/LibWeb/Layout/input/grid/grid-item-min-size.html new file mode 100644 index 0000000000..fc4ac6b1ab --- /dev/null +++ b/Tests/LibWeb/Layout/input/grid/grid-item-min-size.html @@ -0,0 +1,22 @@ +<style> +.grid { + float: left; + display: grid; + grid-template-columns: auto; + grid-template-rows: auto; +} + +.first { + background: pink; + border: 1px solid black; + min-width: 100px; + min-height: 100px; +} + +.second { + background: skyblue; + border: 1px solid black; + min-width: 100px; + min-height: 100px; +} +</style><div class="grid"><div class="first">first</div><div class="second">second</div></div>
\ No newline at end of file diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 4347820202..1b5bfa7607 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -742,35 +742,25 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(GridDimension const di if (track.min_track_sizing_function.is_auto() && available_size.is_intrinsic_sizing_constraint()) { // If the track has an auto min track sizing function and the grid container is being sized under a // min-/max-content constraint, set the track’s base size to the maximum of its items’ limited - // min-/max-content contributions (respectively), floored at zero. The limited min-/max-content - // contribution of an item is (for this purpose) its min-/max-content contribution (accordingly), - // limited by the max track sizing function (which could be the argument to a fit-content() track - // sizing function) if that is fixed and ultimately floored by its minimum contribution (defined - // below). + // min-/max-content contributions (respectively), floored at zero. if (available_size.is_min_content()) { CSSPixels base_size = 0; for (auto& item : grid_items_of_track) { - base_size = max(base_size, calculate_min_content_contribution(item, dimension)); + base_size = max(base_size, calculate_limited_min_content_contribution(item, dimension)); } track.base_size = base_size; } else if (available_size.is_max_content()) { CSSPixels base_size = 0; for (auto& item : grid_items_of_track) { - base_size = max(base_size, calculate_max_content_contribution(item, dimension)); + base_size = max(base_size, calculate_limited_max_content_contribution(item, dimension)); } track.base_size = base_size; } } else if (track.min_track_sizing_function.is_auto()) { - // Otherwise, set the track’s base size to the maximum of its items’ minimum contributions, floored - // at zero. The minimum contribution of an item is the smallest outer size it can have. - // Specifically, if the item’s computed preferred size behaves as auto or depends on the size of its - // containing block in the relevant axis, its minimum contribution is the outer size that would - // result from assuming the item’s used minimum size as its preferred size; else the item’s minimum - // contribution is its min-content contribution. Because the minimum contribution often depends on - // the size of the item’s content, it is considered a type of intrinsic size contribution. + // Otherwise, set the track’s base size to the maximum of its items’ minimum contributions, floored at zero. CSSPixels base_size = 0; for (auto& item : grid_items_of_track) { - base_size = max(base_size, calculate_min_content_contribution(item, dimension)); + base_size = max(base_size, calculate_minimum_contribution(item, dimension)); } track.base_size = base_size; } @@ -1743,4 +1733,124 @@ CSSPixels GridFormattingContext::calculate_max_content_contribution(GridItem con return preferred_size.to_px(grid_container(), containing_block_size); } +CSSPixels GridFormattingContext::calculate_limited_min_content_contribution(GridItem const& item, GridDimension const dimension) const +{ + // The limited min-content contribution of an item is its min-content contribution, + // limited by the max track sizing function (which could be the argument to a fit-content() track + // sizing function) if that is fixed and ultimately floored by its minimum contribution. + // FIXME: limit by max track sizing function + auto min_content_contribution = calculate_min_content_contribution(item, dimension); + auto minimum_contribution = calculate_minimum_contribution(item, dimension); + if (min_content_contribution < minimum_contribution) + return minimum_contribution; + return min_content_contribution; +} + +CSSPixels GridFormattingContext::calculate_limited_max_content_contribution(GridItem const& item, GridDimension const dimension) const +{ + // The limited max-content contribution of an item is its max-content contribution, + // limited by the max track sizing function (which could be the argument to a fit-content() track + // sizing function) if that is fixed and ultimately floored by its minimum contribution. + // FIXME: limit by max track sizing function + auto max_content_contribution = calculate_max_content_contribution(item, dimension); + auto minimum_contribution = calculate_minimum_contribution(item, dimension); + if (max_content_contribution < minimum_contribution) + return minimum_contribution; + return max_content_contribution; +} + +CSS::Size const& GridFormattingContext::get_item_minimum_size(GridItem const& item, GridDimension const dimension) const +{ + if (dimension == GridDimension::Column) + return item.box().computed_values().min_width(); + return item.box().computed_values().min_height(); +} + +CSSPixels GridFormattingContext::content_size_suggestion(GridItem const& item, GridDimension const dimension) const +{ + // The content size suggestion is the min-content size in the relevant axis + // FIXME: clamped, if it has a preferred aspect ratio, by any definite opposite-axis minimum and maximum sizes + // converted through the aspect ratio. + return calculate_min_content_size(item, dimension); +} + +Optional<CSSPixels> GridFormattingContext::specified_size_suggestion(GridItem const& item, GridDimension const dimension) const +{ + // https://www.w3.org/TR/css-grid-1/#specified-size-suggestion + // If the item’s preferred size in the relevant axis is definite, then the specified size suggestion is that size. + // It is otherwise undefined. + auto const& used_values = m_state.get(item.box()); + auto has_definite_preferred_size = dimension == GridDimension::Column ? used_values.has_definite_width() : used_values.has_definite_height(); + if (has_definite_preferred_size) { + // FIXME: consider margins, padding and borders because it is outer size. + auto containing_block_size = containing_block_size_for_item(item, dimension); + return item.box().computed_values().width().to_px(item.box(), containing_block_size); + } + + return {}; +} + +CSSPixels GridFormattingContext::content_based_minimum_size(GridItem const& item, GridDimension const dimension) const +{ + // https://www.w3.org/TR/css-grid-1/#content-based-minimum-size + // The content-based minimum size for a grid item in a given dimension is its specified size suggestion if it exists + if (auto specified_size_suggestion = this->specified_size_suggestion(item, dimension); specified_size_suggestion.has_value()) { + return specified_size_suggestion.value(); + } + // FIXME: otherwise its transferred size suggestion if that exists + // else its content size suggestion + return content_size_suggestion(item, dimension); +} + +CSSPixels GridFormattingContext::automatic_minimum_size(GridItem const& item, GridDimension const dimension) const +{ + // To provide a more reasonable default minimum size for grid items, the used value of its automatic minimum size + // in a given axis is the content-based minimum size if all of the following are true: + // - it is not a scroll container + // - it spans at least one track in that axis whose min track sizing function is auto + // FIXME: - if it spans more than one track in that axis, none of those tracks are flexible + auto const& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows; + auto item_track_index = [&] { + if (dimension == GridDimension::Column) + return item.gap_adjusted_column(grid_container()); + return item.gap_adjusted_row(grid_container()); + }(); + + // 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); + } + + // Otherwise, the automatic minimum size is zero, as usual. + return 0; +} + +CSSPixels GridFormattingContext::calculate_minimum_contribution(GridItem const& item, GridDimension const dimension) const +{ + // The minimum contribution of an item is the smallest outer size it can have. + // Specifically, if the item’s computed preferred size behaves as auto or depends on the size of its + // containing block in the relevant axis, its minimum contribution is the outer size that would + // result from assuming the item’s used minimum size as its preferred size; else the item’s minimum + // contribution is its min-content contribution. Because the minimum contribution often depends on + // the size of the item’s content, it is considered a type of intrinsic size contribution. + + auto preferred_size = get_item_preferred_size(item, dimension); + auto should_treat_preferred_size_as_auto = [&] { + if (dimension == GridDimension::Column) + return should_treat_width_as_auto(item.box(), get_available_space_for_item(item)); + return should_treat_height_as_auto(item.box(), get_available_space_for_item(item)); + }(); + + if (should_treat_preferred_size_as_auto) { + auto minimum_size = get_item_minimum_size(item, dimension); + 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 calculate_min_content_contribution(item, dimension); +} + } diff --git a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h index 2db8d0399f..04d7c21b0d 100644 --- a/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Userland/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -184,8 +184,18 @@ private: CSSPixels calculate_min_content_contribution(GridItem const&, GridDimension const) const; CSSPixels calculate_max_content_contribution(GridItem const&, GridDimension const) const; + CSSPixels calculate_limited_min_content_contribution(GridItem const&, GridDimension const) const; + CSSPixels calculate_limited_max_content_contribution(GridItem const&, GridDimension const) const; + CSSPixels containing_block_size_for_item(GridItem const&, GridDimension const) const; AvailableSpace get_available_space_for_item(GridItem const&) const; + + CSS::Size const& get_item_minimum_size(GridItem const&, GridDimension const) const; + CSSPixels content_size_suggestion(GridItem const&, GridDimension const) const; + Optional<CSSPixels> specified_size_suggestion(GridItem const&, GridDimension const) const; + CSSPixels content_based_minimum_size(GridItem const&, GridDimension const) const; + CSSPixels automatic_minimum_size(GridItem const&, GridDimension const) const; + CSSPixels calculate_minimum_contribution(GridItem const&, GridDimension const) const; }; } |