LibWeb: Use grid area as available size for abspos contained in GFC

Fixes incorrect percentage length resolution for abspos boxes contained
by a grid.
This commit is contained in:
Aliaksandr Kalenik 2024-09-12 18:02:58 +02:00 committed by Alexander Kalenik
commit a64d182583
Notes: github-actions[bot] 2024-09-12 19:08:37 +00:00
4 changed files with 41 additions and 8 deletions

View file

@ -0,0 +1,11 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x120 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x102 children: not-inline
Box <div.grid> at (11,11) content-size 200x100 positioned [GFC] children: not-inline
BlockContainer <div.abspos-item> at (112,12) content-size 50x50 positioned [BFC] children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x122]
PaintableWithLines (BlockContainer<BODY>) [9,9 782x104]
PaintableBox (Box<DIV>.grid) [10,10 202x102]
PaintableWithLines (BlockContainer<DIV>.abspos-item) [111,11 52x52]

View file

@ -0,0 +1,23 @@
<!DOCTYPE html><style>
* {
border: 1px solid black;
}
.grid {
display: grid;
grid-template-columns: 100px 100px;
grid-template-areas: "a b";
position: relative;
width: 200px;
height: 100px;
}
.abspos-item {
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 50%;
grid-area: b;
}
</style><div class="grid"><div class="abspos-item"></div></div>