mirror of
https://github.com/RGBCube/serenity
synced 2025-07-26 08:47:34 +00:00
LibWeb: Add support for start, center and end justify-content in GFC
Fixes https://github.com/SerenityOS/serenity/issues/22555
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
56ff9bffae
commit
b6123df492
3 changed files with 145 additions and 4 deletions
99
Tests/LibWeb/Layout/expected/grid/justify-content.txt
Normal file
99
Tests/LibWeb/Layout/expected/grid/justify-content.txt
Normal file
|
|
@ -0,0 +1,99 @@
|
||||||
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
|
BlockContainer <html> at (0,0) content-size 800x103.34375 [BFC] children: not-inline
|
||||||
|
BlockContainer <body> at (8,8) content-size 784x87.34375 children: not-inline
|
||||||
|
Box <div.container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div> at (8,8) content-size 392x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [8,8 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (400,8) content-size 392x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [400,8 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
Box <div.container> at (8,25.46875) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div> at (8,25.46875) content-size 392x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [8,25.46875 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (400,25.46875) content-size 392x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [400,25.46875 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,42.9375) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
Box <div.container> at (8,42.9375) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div> at (8,42.9375) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [8,42.9375 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (75.96875,42.9375) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [75.96875,42.9375 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,60.40625) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
Box <div.container> at (8,60.40625) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div> at (332.03125,60.40625) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [332.03125,60.40625 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (400,60.40625) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [400,60.40625 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <(anonymous)> at (8,77.875) content-size 784x0 children: inline
|
||||||
|
TextNode <#text>
|
||||||
|
Box <div.container> at (8,77.875) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
|
BlockContainer <div> at (656.0625,77.875) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [656.0625,77.875 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
BlockContainer <div> at (724.03125,77.875) content-size 67.96875x17.46875 [BFC] children: inline
|
||||||
|
line 0 width: 67.96875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
|
frag 0 from TextNode start: 0, length: 9, rect: [724.03125,77.875 67.96875x17.46875]
|
||||||
|
"wikipedia"
|
||||||
|
TextNode <#text>
|
||||||
|
|
||||||
|
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||||
|
PaintableWithLines (BlockContainer<HTML>) [0,0 800x103.34375]
|
||||||
|
PaintableWithLines (BlockContainer<BODY>) [8,8 784x87.34375]
|
||||||
|
PaintableBox (Box<DIV>.container) [8,8 784x17.46875]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [8,8 392x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [400,8 392x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,25.46875 784x0]
|
||||||
|
PaintableBox (Box<DIV>.container) [8,25.46875 784x17.46875]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [8,25.46875 392x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [400,25.46875 392x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,42.9375 784x0]
|
||||||
|
PaintableBox (Box<DIV>.container) [8,42.9375 784x17.46875]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [8,42.9375 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [75.96875,42.9375 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,60.40625 784x0]
|
||||||
|
PaintableBox (Box<DIV>.container) [8,60.40625 784x17.46875]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [332.03125,60.40625 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [400,60.40625 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer(anonymous)) [8,77.875 784x0]
|
||||||
|
PaintableBox (Box<DIV>.container) [8,77.875 784x17.46875]
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [656.0625,77.875 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
|
PaintableWithLines (BlockContainer<DIV>) [724.03125,77.875 67.96875x17.46875]
|
||||||
|
TextPaintable (TextNode<#text>)
|
||||||
14
Tests/LibWeb/Layout/input/grid/justify-content.html
Normal file
14
Tests/LibWeb/Layout/input/grid/justify-content.html
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
<!doctype html><style>
|
||||||
|
* {
|
||||||
|
outline: 1px solid black;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="container" style="justify-content: normal;"><div>wikipedia</div><div>wikipedia</div></div>
|
||||||
|
<div class="container" style="justify-content: stretch;"><div>wikipedia</div><div>wikipedia</div></div>
|
||||||
|
<div class="container" style="justify-content: start;"><div>wikipedia</div><div>wikipedia</div></div>
|
||||||
|
<div class="container" style="justify-content: center;"><div>wikipedia</div><div>wikipedia</div></div>
|
||||||
|
<div class="container" style="justify-content: end;"><div>wikipedia</div><div>wikipedia</div></div>
|
||||||
|
|
@ -1302,15 +1302,27 @@ void GridFormattingContext::stretch_auto_tracks(AvailableSpace const& available_
|
||||||
{
|
{
|
||||||
// https://drafts.csswg.org/css-grid/#algo-stretch
|
// https://drafts.csswg.org/css-grid/#algo-stretch
|
||||||
// 12.8. Stretch auto Tracks
|
// 12.8. Stretch auto Tracks
|
||||||
|
|
||||||
auto& tracks_and_gaps = dimension == GridDimension::Column ? m_grid_columns_and_gaps : m_grid_rows_and_gaps;
|
|
||||||
auto& available_size = dimension == GridDimension::Column ? available_space.width : available_space.height;
|
|
||||||
|
|
||||||
// When the content-distribution property of the grid container is normal or stretch in this axis,
|
// When the content-distribution property of the grid container is normal or stretch in this axis,
|
||||||
// this step expands tracks that have an auto max track sizing function by dividing any remaining
|
// this step expands tracks that have an auto max track sizing function by dividing any remaining
|
||||||
// positive, definite free space equally amongst them. If the free space is indefinite, but the grid
|
// positive, definite free space equally amongst them. If the free space is indefinite, but the grid
|
||||||
// container has a definite min-width/height, use that size to calculate the free space for this
|
// container has a definite min-width/height, use that size to calculate the free space for this
|
||||||
// step instead.
|
// step instead.
|
||||||
|
|
||||||
|
auto content_distribution_property_is_normal_or_stretch = false;
|
||||||
|
if (dimension == GridDimension::Column) {
|
||||||
|
auto const& justify_content = grid_container().computed_values().justify_content();
|
||||||
|
content_distribution_property_is_normal_or_stretch = justify_content == CSS::JustifyContent::Normal || justify_content == CSS::JustifyContent::Stretch;
|
||||||
|
} else {
|
||||||
|
auto const& align_content = grid_container().computed_values().align_content();
|
||||||
|
content_distribution_property_is_normal_or_stretch = align_content == CSS::AlignContent::Normal || align_content == CSS::AlignContent::Stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!content_distribution_property_is_normal_or_stretch)
|
||||||
|
return;
|
||||||
|
|
||||||
|
auto& tracks_and_gaps = dimension == GridDimension::Column ? m_grid_columns_and_gaps : m_grid_rows_and_gaps;
|
||||||
|
auto& available_size = dimension == GridDimension::Column ? available_space.width : available_space.height;
|
||||||
|
|
||||||
CSSPixels used_space = 0;
|
CSSPixels used_space = 0;
|
||||||
for (auto& track : tracks_and_gaps) {
|
for (auto& track : tracks_and_gaps) {
|
||||||
if (!track.max_track_sizing_function.is_auto(available_size))
|
if (!track.max_track_sizing_function.is_auto(available_size))
|
||||||
|
|
@ -1876,8 +1888,24 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
|
||||||
int column_start = grid_item.gap_adjusted_column(grid_container());
|
int column_start = grid_item.gap_adjusted_column(grid_container());
|
||||||
int column_end = grid_item.gap_adjusted_column(grid_container()) + resolved_column_span;
|
int column_end = grid_item.gap_adjusted_column(grid_container()) + resolved_column_span;
|
||||||
|
|
||||||
|
auto grid_container_width = m_available_space->width.to_px_or_zero();
|
||||||
|
CSSPixels sum_base_size_of_columns = 0;
|
||||||
|
for (size_t i = 0; i < m_grid_columns_and_gaps.size(); i++)
|
||||||
|
sum_base_size_of_columns += m_grid_columns_and_gaps[i].base_size;
|
||||||
|
auto const& justify_content = grid_container().computed_values().justify_content();
|
||||||
|
|
||||||
CSSPixels x_start = 0;
|
CSSPixels x_start = 0;
|
||||||
CSSPixels x_end = 0;
|
CSSPixels x_end = 0;
|
||||||
|
if (justify_content == CSS::JustifyContent::Center) {
|
||||||
|
auto free_space = grid_container_width - sum_base_size_of_columns;
|
||||||
|
x_start = free_space / 2;
|
||||||
|
x_end = free_space / 2;
|
||||||
|
} else if (justify_content == CSS::JustifyContent::End) {
|
||||||
|
auto free_space = grid_container_width - sum_base_size_of_columns;
|
||||||
|
x_start = free_space;
|
||||||
|
x_end = free_space;
|
||||||
|
}
|
||||||
|
|
||||||
CSSPixels y_start = 0;
|
CSSPixels y_start = 0;
|
||||||
CSSPixels y_end = 0;
|
CSSPixels y_end = 0;
|
||||||
for (int i = 0; i < column_start; i++)
|
for (int i = 0; i < column_start; i++)
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue