mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-07-24 18:02:20 +00:00
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.
This commit is contained in:
Aliaksandr Kalenik
Alexander Kalenik
parent
af602b2555
commit
e6dabdcebe
Notes:
github-actions[bot]
2025-06-21 20:08:23 +00:00
Author: https://github.com/kalenikaliaksandr
Commit: e6dabdcebe
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5150
Reviewed-by: https://github.com/tcl3
6 changed files with 67 additions and 57 deletions
|
|
@ -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<Variant<CSS::ExplicitGridTrack, CSS::GridLineNames>> 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<Variant<CSS::ExplicitGridTrack, CSS::GridLineNames>> 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()
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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]'
|
||||
|
|
|
|||
|
|
@ -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)'
|
||||
|
|
@ -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]'
|
||||
|
|
@ -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]'
|
||||
Loading…
Add table
Add a link
Reference in a new issue