diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 98e4f944f55..51da45401f0 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -148,7 +148,7 @@ static Alignment to_alignment(CSS::AlignItems value) } } -GridFormattingContext::GridTrack GridFormattingContext::GridTrack::create_from_definition(CSS::ExplicitGridTrack const& definition) +GridFormattingContext::GridTrack GridFormattingContext::GridTrack::create_from_definition(CSS::ExplicitGridTrack const& definition, bool is_auto_fit = false) { // NOTE: repeat() is expected to be expanded beforehand. VERIFY(!definition.is_repeat()); @@ -157,6 +157,7 @@ GridFormattingContext::GridTrack GridFormattingContext::GridTrack::create_from_d return GridTrack { .min_track_sizing_function = definition.minmax().min_grid_size(), .max_track_sizing_function = definition.minmax().max_grid_size(), + .is_auto_fit = is_auto_fit, }; } @@ -173,6 +174,7 @@ GridFormattingContext::GridTrack GridFormattingContext::GridTrack::create_from_d return GridTrack { .min_track_sizing_function = min_track_sizing_function, .max_track_sizing_function = max_track_sizing_function, + .is_auto_fit = is_auto_fit, }; } @@ -552,18 +554,20 @@ void GridFormattingContext::initialize_grid_tracks_from_definition(GridDimension auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows; for (auto const& track_definition : tracks_definition) { int repeat_count = 1; + bool is_auto_fit = false; if (track_definition.is_repeat()) { - if (track_definition.repeat().is_auto_fill() || track_definition.repeat().is_auto_fit()) + is_auto_fit = track_definition.repeat().is_auto_fit(); + if (track_definition.repeat().is_auto_fill() || is_auto_fit) repeat_count = count_of_repeated_auto_fill_or_fit_tracks(dimension, track_definition); else repeat_count = track_definition.repeat().repeat_count(); } for (auto _ = 0; _ < repeat_count; _++) { if (track_definition.is_default() || track_definition.is_minmax()) { - tracks.append(GridTrack::create_from_definition(track_definition)); + tracks.append(GridTrack::create_from_definition(track_definition, is_auto_fit)); } else if (track_definition.is_repeat()) { for (auto& explicit_grid_track : track_definition.repeat().grid_track_size_list().track_list()) { - tracks.append(GridTrack::create_from_definition(explicit_grid_track)); + tracks.append(GridTrack::create_from_definition(explicit_grid_track, is_auto_fit)); } } else { VERIFY_NOT_REACHED(); @@ -1811,18 +1815,16 @@ void GridFormattingContext::collapse_auto_fit_tracks_if_needed(GridDimension dim // The auto-fit keyword behaves the same as auto-fill, except that after grid item placement any // empty repeated tracks are collapsed. An empty track is one with no in-flow grid items placed into // or spanning across it. (This can result in all tracks being collapsed, if they’re all empty.) - auto const& grid_computed_values = grid_container().computed_values(); - auto const& tracks_definition = dimension == GridDimension::Column ? grid_computed_values.grid_template_columns().track_list() : grid_computed_values.grid_template_rows().track_list(); auto& tracks = dimension == GridDimension::Column ? m_grid_columns : m_grid_rows; - if (tracks_definition.size() == 1 && tracks_definition.first().is_repeat() && tracks_definition.first().repeat().is_auto_fit()) { - for (size_t track_index = 0; track_index < tracks.size(); track_index++) { - if (m_occupation_grid.is_occupied(dimension == GridDimension::Column ? track_index : 0, dimension == GridDimension::Row ? track_index : 0)) - continue; + for (size_t track_index = 0; track_index < tracks.size(); track_index++) { + if (!tracks[track_index].is_auto_fit) + continue; + if (m_occupation_grid.is_occupied(dimension == GridDimension::Column ? track_index : 0, dimension == GridDimension::Row ? track_index : 0)) + continue; - // NOTE: A collapsed track is treated as having a fixed track sizing function of 0px - tracks[track_index].min_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0)); - tracks[track_index].max_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0)); - } + // NOTE: A collapsed track is treated as having a fixed track sizing function of 0px + tracks[track_index].min_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0)); + tracks[track_index].max_track_sizing_function = CSS::GridSize(CSS::Length::make_px(0)); } } diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.h b/Libraries/LibWeb/Layout/GridFormattingContext.h index 016210763e1..ccf4bc51f97 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.h +++ b/Libraries/LibWeb/Layout/GridFormattingContext.h @@ -217,8 +217,9 @@ private: CSSPixels item_incurred_increase { 0 }; bool is_gap { false }; + bool is_auto_fit { false }; - static GridTrack create_from_definition(CSS::ExplicitGridTrack const& definition); + static GridTrack create_from_definition(CSS::ExplicitGridTrack const& definition, bool is_auto_fit); static GridTrack create_auto(); static GridTrack create_gap(CSSPixels size); }; diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed.txt index badca10f1ff..c1d11f40cfd 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed.txt @@ -2,8 +2,8 @@ Harness status: OK Found 25 tests -17 Pass -8 Fail +23 Pass +2 Fail Fail Property grid-template-columns value 'none' Pass Property grid-template-columns value '1px' Pass Property grid-template-columns value '1px [a]' @@ -12,20 +12,20 @@ Pass Property grid-template-columns value '[a] 1px' Pass Property grid-template-columns value '[a] 1px [b]' Pass Property grid-template-columns value '1px repeat(1, 2px) 3px' Pass Property grid-template-columns value '1px repeat(auto-fill, 2px) 3px' -Fail Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px' +Pass Property grid-template-columns value '1px repeat(auto-fit, 2px) 3px' Pass Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px' Pass Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' -Fail Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' +Pass Property grid-template-columns value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' Pass Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' Pass Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' -Fail Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' +Pass Property grid-template-columns value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' Pass Property grid-template-columns value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' Pass Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' -Fail Property grid-template-columns value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' +Pass Property grid-template-columns value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' Pass Property grid-template-columns value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' Pass Property grid-template-columns value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' -Fail Property grid-template-columns value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' +Pass Property grid-template-columns value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' Pass Property grid-template-columns value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' Pass Property grid-template-columns value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' -Fail Property grid-template-columns value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' +Pass Property grid-template-columns value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' Fail Property grid-template-columns value 'repeat(calc(1 + 3 * sign(100em - 1px)), 150px)' \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed.txt index e03bc3c1f60..42b160eafc4 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed.txt @@ -2,8 +2,8 @@ Harness status: OK Found 24 tests -17 Pass -7 Fail +23 Pass +1 Fail Fail Property grid-template-rows value 'none' Pass Property grid-template-rows value '1px' Pass Property grid-template-rows value '1px [a]' @@ -12,19 +12,19 @@ Pass Property grid-template-rows value '[a] 1px' Pass Property grid-template-rows value '[a] 1px [b]' Pass Property grid-template-rows value '1px repeat(1, 2px) 3px' Pass Property grid-template-rows value '1px repeat(auto-fill, 2px) 3px' -Fail Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px' +Pass Property grid-template-rows value '1px repeat(auto-fit, 2px) 3px' Pass Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px' Pass Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' -Fail Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' +Pass Property grid-template-rows value '1px [a] repeat(auto-fit, 2px 3px) [b] 4px' Pass Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' Pass Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' -Fail Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' +Pass Property grid-template-rows value '1px [a] repeat(auto-fit, [b] 2px [c]) [d] 3px' Pass Property grid-template-rows value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' Pass Property grid-template-rows value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' -Fail Property grid-template-rows value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' +Pass Property grid-template-rows value '[a] 1px repeat(auto-fit, 2px [b] 3px) 4px [d]' Pass Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' Pass Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' -Fail Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' +Pass Property grid-template-rows value '100% [a] repeat(auto-fit, [b] 200% [c]) [d] 300%' Pass Property grid-template-rows value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' Pass Property grid-template-rows value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' -Fail Property grid-template-rows value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' \ No newline at end of file +Pass Property grid-template-rows value '[a] 1em repeat(auto-fit, 2em [b] 3em) 4em [d]' \ No newline at end of file