diff --git a/Libraries/LibWeb/Layout/GridFormattingContext.cpp b/Libraries/LibWeb/Layout/GridFormattingContext.cpp index 0753966244f..acce46d1bbe 100644 --- a/Libraries/LibWeb/Layout/GridFormattingContext.cpp +++ b/Libraries/LibWeb/Layout/GridFormattingContext.cpp @@ -634,6 +634,9 @@ void GridFormattingContext::initialize_grid_tracks_for_columns_and_rows() } implicit_row_index++; } + + m_column_lines.resize(m_grid_columns.size() + 1); + m_row_lines.resize(m_grid_rows.size() + 1); } void GridFormattingContext::initialize_gap_tracks(AvailableSpace const& available_space) @@ -2064,17 +2067,24 @@ void GridFormattingContext::run(AvailableSpace const& available_space) independent_formatting_context->parent_context_did_dimension_child_root_box(); } - Vector> grid_track_columns; - grid_track_columns.ensure_capacity(m_grid_columns.size()); - for (auto const& column : m_grid_columns) { - grid_track_columns.append(CSS::ExplicitGridTrack { CSS::GridSize { CSS::LengthPercentage(CSS::Length::make_px(column.base_size)) } }); - } + auto serialize = [](auto const& tracks, auto const& lines) { + CSS::GridTrackSizeList result; + for (size_t i = 0; i < lines.size(); ++i) { + auto const& line = lines[i]; + if (!line.names.is_empty()) { + result.append(CSS::GridLineNames { line.names }); + } - Vector> grid_track_rows; - grid_track_rows.ensure_capacity(m_grid_rows.size()); - for (auto const& row : m_grid_rows) { - grid_track_rows.append(CSS::ExplicitGridTrack { CSS::GridSize { CSS::LengthPercentage(CSS::Length::make_px(row.base_size)) } }); - } + if (i < tracks.size()) { + auto const& track = tracks[i]; + result.append(CSS::ExplicitGridTrack { CSS::GridSize { CSS::LengthPercentage(CSS::Length::make_px(track.base_size)) } }); + } + } + return result; + }; + + auto grid_track_columns = serialize(m_grid_columns, m_column_lines); + auto grid_track_rows = serialize(m_grid_rows, m_row_lines); // getComputedStyle() needs to return the resolved values of grid-template-columns and grid-template-rows // so they need to be saved in the state, and then assigned to paintables in LayoutState::commit() diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt index 3698f718b83..2bd3d1f7221 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-columns-rows-get-set-multiple.txt @@ -2,8 +2,8 @@ Harness status: OK Found 40 tests -34 Pass -6 Fail +35 Pass +5 Fail Pass Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithFixedElement' : grid-template-columns = '7px 11px', grid-template-rows = '17px 2px' Pass Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentElement' : grid-template-columns = '400px 800px', grid-template-rows = '150px 450px' Fail Test getting grid-template-columns and grid-template-rows set through CSS for element 'gridWithPercentWithoutSize' : grid-template-columns = '3.5px 7px', grid-template-rows = '4px 12px' @@ -41,6 +41,6 @@ Pass Test setting bad JS values: grid-template-columns = '-10px minmax(16px, 32p Pass Test setting bad JS values: grid-template-columns = '10px minmax(16px, -1vw)', grid-template-rows = 'minmax(-1%, 15%) 10vw' Fail Test setting bad JS values: grid-template-columns = '10px calc(16px 30px)', grid-template-rows = 'calc(25px + auto) 2em' Pass Test setting bad JS values: grid-template-columns = 'minmax(min-content, calc() 250px', grid-template-rows = 'calc(2em(' -Fail Test setting grid-template-columns and grid-template-rows to 'inherit' through JS +Pass Test setting grid-template-columns and grid-template-rows to 'inherit' through JS Pass Test the default value Fail Test setting grid-template-columns and grid-template-rows to 'initial' through JS \ No newline at end of file diff --git a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.txt index 85c428aa058..9d7659c73d7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-columns-computed-withcontent.txt @@ -2,8 +2,8 @@ Harness status: OK Found 30 tests -19 Pass -11 Fail +24 Pass +6 Fail Pass Property grid-template-columns value 'none' Pass Property grid-template-columns value '20%' Fail Property grid-template-columns value 'calc(-0.5em + 10px)' @@ -21,15 +21,15 @@ Pass Property grid-template-columns value 'fit-content(70px)' Pass Property grid-template-columns value 'fit-content(20%)' Fail Property grid-template-columns value 'fit-content(calc(-0.5em + 10px))' Pass Property grid-template-columns value 'repeat(1, 10px)' -Fail Property grid-template-columns value 'repeat(1, [one two] 20%)' +Pass Property grid-template-columns value 'repeat(1, [one two] 20%)' Pass Property grid-template-columns value 'repeat(2, minmax(10px, auto))' -Fail Property grid-template-columns value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])' +Pass Property grid-template-columns value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])' Pass Property grid-template-columns value 'min-content repeat(5, minmax(10px, auto))' Pass Property grid-template-columns value '[] 150px [] 1fr []' Pass Property grid-template-columns value 'repeat(auto-fill, 200px)' -Fail Property grid-template-columns value 'repeat(auto-fit, [one] 20%)' -Fail Property grid-template-columns value 'repeat(auto-fill, minmax(100px, 5fr) [two])' -Fail Property grid-template-columns value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])' +Pass Property grid-template-columns value 'repeat(auto-fit, [one] 20%)' +Pass Property grid-template-columns value 'repeat(auto-fill, minmax(100px, 5fr) [two])' +Pass Property grid-template-columns value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])' Fail Property grid-template-columns value '[a] 21px [b] repeat(auto-fill, [c] 22px [d] 23px [e]) [f] 24px [g]' Fail Property grid-template-columns value '[a] 21px [b c] repeat(auto-fill, [d e] 22px [f g h] 23px [i j k l]) [m n] 24px [o]' Fail Property grid-template-columns value '[a] repeat(2, [b] 20px [c d] 21px [e f g]) [h i] repeat(auto-fit, [j] 22px [k l m] 23px [n o p q]) [r s]' 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 cdf1d40ba0b..badca10f1ff 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,30 +2,30 @@ Harness status: OK Found 25 tests -3 Pass -22 Fail +17 Pass +8 Fail Fail Property grid-template-columns value 'none' Pass Property grid-template-columns value '1px' -Fail Property grid-template-columns value '1px [a]' -Fail Property grid-template-columns value '1px [a] 2px' -Fail Property grid-template-columns value '[a] 1px' -Fail Property grid-template-columns value '[a] 1px [b]' +Pass Property grid-template-columns value '1px [a]' +Pass Property grid-template-columns value '1px [a] 2px' +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' -Fail Property grid-template-columns value '1px [a] repeat(1, 2px 3px) [b] 4px' -Fail Property grid-template-columns value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' +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' -Fail Property grid-template-columns value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' -Fail Property grid-template-columns value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' +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' -Fail Property grid-template-columns value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' -Fail Property grid-template-columns value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' +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]' -Fail Property grid-template-columns value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' -Fail Property grid-template-columns value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' +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%' -Fail Property grid-template-columns value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' -Fail Property grid-template-columns value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' +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]' 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-withcontent.txt b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-withcontent.txt index 77ca65683a7..a77cfffc6a7 100644 --- a/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-withcontent.txt +++ b/Tests/LibWeb/Text/expected/wpt-import/css/css-grid/parsing/grid-template-rows-computed-withcontent.txt @@ -2,8 +2,8 @@ Harness status: OK Found 27 tests -16 Pass -11 Fail +19 Pass +8 Fail Pass Property grid-template-rows value 'none' Fail Property grid-template-rows value '20%' Fail Property grid-template-rows value 'calc(-0.5em + 10px)' @@ -23,11 +23,11 @@ Fail Property grid-template-rows value 'fit-content(calc(-0.5em + 10px))' Pass Property grid-template-rows value 'repeat(1, 10px)' Fail Property grid-template-rows value 'repeat(1, [one two] 20%)' Pass Property grid-template-rows value 'repeat(2, minmax(10px, auto))' -Fail Property grid-template-rows value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])' +Pass Property grid-template-rows value 'repeat(2, fit-content(20%) [three four] 30px 40px [five six])' Pass Property grid-template-rows value 'min-content repeat(5, minmax(10px, auto))' Pass Property grid-template-rows value '[] 150px [] 1fr []' Pass Property grid-template-rows value 'repeat(auto-fill, 200px)' Fail Property grid-template-rows value 'repeat(auto-fit, [one] 20%)' -Fail Property grid-template-rows value 'repeat(auto-fill, minmax(100px, 5fr) [two])' -Fail Property grid-template-rows value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])' +Pass Property grid-template-rows value 'repeat(auto-fill, minmax(100px, 5fr) [two])' +Pass Property grid-template-rows value 'repeat(auto-fit, [three] minmax(max-content, 6em) [four])' Fail Property grid-template-rows value '[one] repeat(2, minmax(50px, auto)) [two] 30px [three] repeat(auto-fill, 10px) 40px [four five] repeat(2, minmax(200px, auto)) [six]' \ 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 5348f857a29..e03bc3c1f60 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,29 +2,29 @@ Harness status: OK Found 24 tests -3 Pass -21 Fail +17 Pass +7 Fail Fail Property grid-template-rows value 'none' Pass Property grid-template-rows value '1px' -Fail Property grid-template-rows value '1px [a]' -Fail Property grid-template-rows value '1px [a] 2px' -Fail Property grid-template-rows value '[a] 1px' -Fail Property grid-template-rows value '[a] 1px [b]' +Pass Property grid-template-rows value '1px [a]' +Pass Property grid-template-rows value '1px [a] 2px' +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' -Fail Property grid-template-rows value '1px [a] repeat(1, 2px 3px) [b] 4px' -Fail Property grid-template-rows value '1px [a] repeat(auto-fill, 2px 3px) [b] 4px' +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' -Fail Property grid-template-rows value '1px [a] repeat(1, [b] 2px [c]) [d] 3px' -Fail Property grid-template-rows value '1px [a] repeat(auto-fill, [b] 2px [c]) [d] 3px' +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' -Fail Property grid-template-rows value '[a] 1px repeat(1, 2px [b] 3px) 4px [d]' -Fail Property grid-template-rows value '[a] 1px repeat(auto-fill, 2px [b] 3px) 4px [d]' +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]' -Fail Property grid-template-rows value '100% [a] repeat(1, [b] 200% [c]) [d] 300%' -Fail Property grid-template-rows value '100% [a] repeat(auto-fill, [b] 200% [c]) [d] 300%' +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%' -Fail Property grid-template-rows value '[a] 1em repeat(1, 2em [b] 3em) 4em [d]' -Fail Property grid-template-rows value '[a] 1em repeat(auto-fill, 2em [b] 3em) 4em [d]' +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