From e6dabdcebe9af5391d900aa0413d7a303e5231c6 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Fri, 20 Jun 2025 16:40:40 +0200 Subject: [PATCH] LibWeb: Serialize grid line names in GridFormattingContext `getComputedStyle()` for grid tracks returns style value produced during layout. This is needed to return resolved track sizes values which are thrown away after layout is done. Now GFC produces more correct style value by not ignoring grid line names. --- .../LibWeb/Layout/GridFormattingContext.cpp | 30 +++++++++++------ .../grid-columns-rows-get-set-multiple.txt | 6 ++-- ...-template-columns-computed-withcontent.txt | 14 ++++---- .../grid-template-columns-computed.txt | 32 +++++++++---------- ...rid-template-rows-computed-withcontent.txt | 10 +++--- .../parsing/grid-template-rows-computed.txt | 32 +++++++++---------- 6 files changed, 67 insertions(+), 57 deletions(-) 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