beenull/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-11-26 01:20:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

LibWeb: Use grid area size for abspos grid items alignment

Browse source 
Fixes yet another case of GFC bug, where Node::containing_block() should
not be used for grid items, because their containing block is grid area
which is not represented in layout tree.
This commit is contained in:
Aliaksandr Kalenik 2024-09-16 22:27:25 +02:00 committed by Andreas Kling
parent fce003a8f5
commit 805b0fed13
Notes: github-actions[bot] 2024-09-17 05:52:42 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/805b0fed136
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/1414
3 changed files with 39 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Tests/LibWeb/Layout/expected/grid/abspos-item-with-grid-area-aligned-in-center.txt Normal file
View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x220 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x202 children: not-inline
Box <div.grid> at (11,11) content-size 200x200 positioned [GFC] children: not-inline
BlockContainer <div.abspos-item> at (137,37) content-size 48x48 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x222]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x204]
PaintableBox (Box<DIV>.grid) [10,10 202x202]
PaintableWithLines (BlockContainer<DIV>.abspos-item) [136,36 50x50]

26
Tests/LibWeb/Layout/input/grid/abspos-item-with-grid-area-aligned-in-center.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
grid-template-areas: "a b"
"c c";
position: relative;
width: 200px;
}
.abspos-item {
position: absolute;
box-sizing: border-box;
background-color: magenta;
width: 50px;
height: 50px;
grid-area: b;
align-self: center;
justify-self: center;
}
</style><div class="grid"><div class="abspos-item"></div></div>

6
Userland/Libraries/LibWeb/Layout/GridFormattingContext.cpp
View file

@ -1936,8 +1936,7 @@ void GridFormattingContext::layout_absolutely_positioned_element(Box const& box)
compute_height_for_absolutely_positioned_element(box, available_space, BeforeOrAfterInsideLayout::After);
if (computed_values.inset().left().is_auto() && computed_values.inset().right().is_auto()) {
auto containing_block_width = containing_block_state.content_width();
auto width_left_for_alignment = containing_block_width - box_state.margin_box_width();
auto width_left_for_alignment = grid_area_rect.width() - box_state.margin_box_width();
switch (justification_for_item(box)) {
case CSS::JustifyItems::Normal:
case CSS::JustifyItems::Stretch:
@ -1962,8 +1961,7 @@ void GridFormattingContext::layout_absolutely_positioned_element(Box const& box)
}
if (computed_values.inset().top().is_auto() && computed_values.inset().bottom().is_auto()) {
auto containing_block_height = containing_block_state.content_height();
auto height_left_for_alignment = containing_block_height - box_state.margin_box_height();
auto height_left_for_alignment = grid_area_rect.height() - box_state.margin_box_height();
switch (alignment_for_item(box)) {
case CSS::AlignItems::Baseline:
// FIXME: Not implemented