LibWeb/Layout: Unify grid justify-content handling for grid area
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run
This commit is contained in:
Neil Viloria
Alexander Kalenik
parent
d6a8fc00c3
commit
9e2b70661e
Notes:
github-actions[bot]
2024-10-10 11:37:58 +00:00
Author: https://github.com/neil-ptr Commit: https://github.com/LadybirdBrowser/ladybird/commit/9e2b70661ef Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1709
4 changed files with 197 additions and 24 deletions
|
|
@ -60,13 +60,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
|||
Box <div.grid.justify-space-around> at (8,168) content-size 784x20 [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (108.65625,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <div> at (108.671875,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (369.984375,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <div> at (370,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div> at (631.3125,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <div> at (631.328125,168) content-size 60x20 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> at (8,208) content-size 784x0 children: inline
|
||||
|
|
@ -124,9 +124,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
|||
PaintableWithLines (BlockContainer<DIV>) [160,128 60x20]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,168 784x0]
|
||||
PaintableBox (Box<DIV>.grid.justify-space-around) [8,168 784x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [108.65625,168 60x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [369.984375,168 60x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [631.3125,168 60x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [108.671875,168 60x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [370,168 60x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [631.328125,168 60x20]
|
||||
PaintableWithLines (BlockContainer(anonymous)) [8,208 784x0]
|
||||
PaintableBox (Box<DIV>.grid.justify-space-between) [8,208 784x20]
|
||||
PaintableWithLines (BlockContainer<DIV>) [8,208 60x20]
|
||||
|
|
|
|||
133
Tests/LibWeb/Layout/expected/grid/justify-content-fr.txt
Normal file
133
Tests/LibWeb/Layout/expected/grid/justify-content-fr.txt
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||
BlockContainer <html> at (0,0) content-size 800x252 [BFC] children: not-inline
|
||||
Box <body> at (28,28) content-size 744x196 flex-container(row) [FFC] children: not-inline
|
||||
Box <div.container> at (30,30) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (135,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (240,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (354,30) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (354,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (459,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (564,30) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (30,84) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (135,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (240,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (354,84) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (354,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (459,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (564,84) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (30,138) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (135,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (240,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (354,138) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (354,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (459,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (564,138) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
Box <div.container> at (30,192) content-size 300x30 flex-item [GFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (30,192) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (135,192) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <div.item> at (240,192) content-size 90x30 [BFC] children: not-inline
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
BlockContainer <(anonymous)> (not painted) [BFC] children: inline
|
||||
TextNode <#text>
|
||||
|
||||
ViewportPaintable (Viewport<#document>) [0,0 800x600]
|
||||
PaintableWithLines (BlockContainer<HTML>) [0,0 800x252]
|
||||
PaintableBox (Box<BODY>) [8,8 784x236]
|
||||
PaintableBox (Box<DIV>.container) [28,28 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,30 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [135,30 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [240,30 90x30]
|
||||
PaintableBox (Box<DIV>.container) [352,28 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [354,30 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [459,30 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [564,30 90x30]
|
||||
PaintableBox (Box<DIV>.container) [28,82 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,84 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [135,84 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [240,84 90x30]
|
||||
PaintableBox (Box<DIV>.container) [352,82 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [354,84 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [459,84 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [564,84 90x30]
|
||||
PaintableBox (Box<DIV>.container) [28,136 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,138 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [135,138 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [240,138 90x30]
|
||||
PaintableBox (Box<DIV>.container) [352,136 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [354,138 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [459,138 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [564,138 90x30]
|
||||
PaintableBox (Box<DIV>.container) [28,190 304x34]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [30,192 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [135,192 90x30]
|
||||
PaintableWithLines (BlockContainer<DIV>.item) [240,192 90x30]
|
||||
56
Tests/LibWeb/Layout/input/grid/justify-content-fr.html
Normal file
56
Tests/LibWeb/Layout/input/grid/justify-content-fr.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!doctype html>
|
||||
<style>
|
||||
body {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 15px;
|
||||
width: 300px;
|
||||
height: 30px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
.item {
|
||||
background-color: rebeccapurple;
|
||||
}
|
||||
</style>
|
||||
<div class="container" style="justify-content: start;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: end;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: center;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: stretch;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: space-between;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: space-around;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
<div class="container" style="justify-content: space-evenly;">
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
<div class="item"></div>
|
||||
</div>
|
||||
|
|
@ -1817,31 +1817,15 @@ CSSPixelRect GridFormattingContext::get_grid_area_rect(GridItem const& grid_item
|
|||
|
||||
CSSPixels x_start = 0;
|
||||
CSSPixels x_end = 0;
|
||||
if (justify_content == CSS::JustifyContent::Center) {
|
||||
if (justify_content == CSS::JustifyContent::Center || justify_content == CSS::JustifyContent::SpaceAround || justify_content == CSS::JustifyContent::SpaceEvenly) {
|
||||
auto free_space = grid_container_width - sum_base_size_of_columns_and_gaps;
|
||||
free_space = max(free_space, 0);
|
||||
x_start = free_space / 2;
|
||||
x_end = free_space / 2;
|
||||
} else if (justify_content == CSS::JustifyContent::End || justify_content == CSS::JustifyContent::Right) {
|
||||
auto free_space = grid_container_width - sum_base_size_of_columns_and_gaps;
|
||||
x_start = free_space;
|
||||
x_end = free_space;
|
||||
} else if (justify_content == CSS::JustifyContent::SpaceAround) {
|
||||
auto free_space = grid_container_width - sum_base_size_of_columns;
|
||||
free_space = max(free_space, 0);
|
||||
|
||||
auto gap_space = free_space / (m_column_gap_tracks.size() + 1);
|
||||
auto gap_half_space = gap_space / 2;
|
||||
|
||||
x_start = CSSPixels(gap_half_space);
|
||||
x_end = CSSPixels(gap_half_space);
|
||||
} else if (justify_content == CSS::JustifyContent::SpaceEvenly) {
|
||||
auto free_space = grid_container_width - sum_base_size_of_columns;
|
||||
free_space = max(free_space, 0);
|
||||
|
||||
auto gap_space = free_space / (m_grid_columns.size() + 1);
|
||||
|
||||
x_start = gap_space;
|
||||
x_end = gap_space;
|
||||
}
|
||||
|
||||
auto grid_container_height = m_available_space->height.to_px_or_zero();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue